폼 관련 태그들

 웹 폼(form)은 특정 항목에 사용자가 입력하는 형태이다. (ex. 로그인 창)

다양항 항목 및 체크박스를 넣을 수 있다고한다. 폼과 관련된 태그에 대해서 공부해봤다.

 

1. 폼(form) 만들기

<form [속성="속성 값"]> 여러 폼 요소 </form>

 속성을 통해 사용자가 입력한 자료를 서버에서 어떤 프로그램을 이용해 처리할 것인지, 서버로 어떤 방식으로 넘길 것인지 지정한다.

속성은 method, name, action, target등이 있다. 특히, 우리가 인터넷을 하면서 자주 볼 수 있는 자동 완성 기능 속성은 "autocomplete"이다. 

<label [속성="속성값"]> 레이블 <input ...> </label>

 위와 같이 <label> 태그를 쓰면 입력 창 옆에 텍스트를 만들 수 있다.

왼쪽 이미지와 같이 만들 수 있다. (파란 박스) 또한, "아이디 저장"처럼 체크박스도 만들 수 있다.

<fieldset [속성="속성 값"]> ... </fieldset>

위의 태그는 폼 요소를 그룹으로 묶을 수 있다.

 

 

2. 입력을 위한 <input> 태그

<input type="유형" [속성="속성 값">

 가능한 유형은 다양하지만 대표적인 몇가지를 꼽자면 text, search, url, radio, checkbox, button 등이 있다.

 

3. <input> 태그의 다양한 속성

 input 태그의 속성은 엄청 다양하다. autofocus - 마우스 커서 표시, placeholder - 힌트 표시하기 등이 있다.

 

4. 여러 데이터 나열해서 보여주기

<select 속성="속성 값">
    <optgroup [속성="속성값"]>
	<option value="값" [속성="속성 값"]> 내용1 </option>
	<option value="값" [속성="속성 값"]> 내용2 </option>
	<option value="값" [속성="속성 값"]> 내용3 </option>
    </optgroup>
...
</select>

 위의 html을 사용하면 드롭다운 형식으로 고를 수 있도록 데이터들이 나타난다. 그 중에서도 optgroup은 옵션끼리 묶어야 할 경우 사용한다.

<input type="text" list="데이터 목록 id">
    <datalist id="데이터 목록 id">
    	<option> ... </option>
        <option> ... </option>
    	....
    </datalist>

 텍스트 필드에 직접 값을 입력하는 것이 아니라 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 입력해주는 HTML이다.

<textarea [속성="속성 값"]> 내용 </textarea>

 폼에서 여러 줄을 입력할 수 있는 텍스트 영역을 만들어주는 HTML이다.

 

5. 기타 다양한 폼 요소

<button [type="submit | reset | button"]> 내용 </button>

 웹 문서에서 버튼을 삽입하는 태그이다. 여러가지 다양한 폼 요소는 책 속의 문제를 풀어가며 천천히 내 것으로 만들어야겠다.

---

본 내용은 이지스퍼블리싱의 'Do it! HtML5 + CSS3 웹 표준의 정석'을
참고하여 작성한 내용입니다.