textarea
폼에서 텍스트를 여러 줄 입력하는 영역을 만드는데 사용한다.
textarea의 속성
- cols : 한 줄의 글자 수 (영문 기준이기에 한글 사용시 / 2 필요함!)
- rows : textarea의 줄 개수
<textarea cols="한 줄의 글자 수" rows="textarea의 세로줄 개수">여러줄의 내용</textarea>
select, option
사용자가 내용을 직접 입력하는게 아닌, 여러 옵션 중에서 선택하게 만드는 드롭다운 목록을 만드는 태그로서, select 태그로 목록의 시작과 끝을 표시하고 option 태그로 원하는 항목을 추가한다.
select의 속성
- size : 화면에 표시될 드롭다운 항목의 개수를 지정한다.
- multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용한다.
option의 속성
- value : 해당 항목을 선택할때 서버에 넘겨줄 값
- selected : 드롭다운 매뉴에서 기본적으로 선택할 항목
<label for="product1">상품 선택</label>
<select id="product1">
<option value="special_3kg" selected>특별 3kg</option>
<option value="special_5kg">특별 5kg</option>
<option value="special_7kg">특별 7kg</option>
</select>위와 같은 코드에선 특별3kg이 기본적으로 선택되어있으며 서버에 전송되는값은 special_3kg이다.
datalist, option
데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있다. datalist 태그로 데이터 목록의 시작과 끝을 표시한다.
그리고 option 태그를 사용해 각 데이터의 옵션을 정하고 value속성을 사용해 서버에 전송할 값을 정한다.
<label for="option">옵션 선택</label>
<input type="text" id="option" list="pack">
<datalist id="pack">
<option value="option_1">옵션1</option>
<option value="option_2">옵션2</option>
</datalist>button
버튼을 생성한다. 지정하지 않으면 submit속성을 선택한것으로 간주한다.
버튼의 속성
- submit : 폼을 서버로 전송하는 버튼을 만든다.
<input type="submit">과 같은 기능을 한다.
- reset : 폼에 입력한 내용을 초기화한다.
<input type="reset">과 같은 기능을 한다.
- button : 버튼 형태만 만든다.
<input type="button">과 같은 기능을 한다.
