[HTML/CSS] form 요소 2— 부가적 입력 양식
저번 포스트에서는 form 요소를 이용하여 사용자의 입력을 받아보았다. 이번 포스트에서는 HTML 로 좀 더 다양하게 사용자의 입력을 받을 수 있는 form 의 다양한 하위 요소에 대해서 다뤄보려고 한다.
<textarea>
<textarea> 요소 는 여러 줄의 텍스트 입력을 받는 입력 요소이다. 텍스트 입력 영역의 입력 문자는 기본적으로 개수 제한이 없고, 각 문자가 동일한 양의 수평 공간을 차지하는 고정폭 글꼴로 렌더링된다. cols 속성과 rows 속성으로 지정할 수 있으며, CSS 에서 height 속성과 width 속성을 사용하여 지정할 수도 있다.
<textarea> 요소는 인라인 요소이며, 기본적으로 여는 태그와 닫는 태그 모두 갖는다.
<select>, <optgroup>, <option>
<select>
<select> 요소는 옵션 메뉴를 제공하는 드롭다운 리스트를 정의할 때 사용한다.
<select> 요소에 <label> 요소를 연결하는 방법과 서버로 데이터를 전송하는 키 값을 정의하는 방법은 <input> 요소가 하는 방법과 비슷하다.
<option>
<option> 요소는 드롭다운 리스트에서 사용될 각각의 옵션을 정의한다.
서버로 전송될 값은 value 속성으로 정의하고, 사용자에게 보여질 값은 여는 <option> 태그와 닫는 <option> 태그 사이에 적는다.
<option> 요소는 <select>요소나 본 포스트에서 곧 다룰<datalist> 요소 내부에만 위치할 수 있다.
<optgroup>
<optgroup> 요소는 옵션 메뉴를 제공하는 드롭다운 리스트에서 사용되는 옵션들의 그룹을 정의할 때 사용한다.
<optgroup> 의 보여질 그룹명은 label 속성을 통해 정의한다.
드롭다운 리스트에서 옵션의 수가 많을 경우 <optgroup> 요소를 사용하여 관련된 옵션끼리 각각의 그룹으로 묶어주면 사용자가 좀 더 쉽게 드롭다운 리스트를 사용할 수 있다.
<datalist>
<datalist> 요소는 <input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의할 때 사용한다.
<datalist> 요소와 <input> 요소를 연결하는 방법은 <input> 요소의 list 속성과 <datalist> 요소의 id 속성을 동일한 값으로 정해주면 된다.
<datalist> 는 <select> 요소와 다르게 반드시 주어진 값들에서 선택해야하는 값이 아니다. 사용자가 다른 값을 입력할 수도 있지만, 단지 선택 옵션을 제공하는 역할을 한다.
<output>
<output> 요소는<form> 요소의 oninput 속성과 같이 사용되어 <input> 요소의 값을 읽고 다시 브라우저에 표시할 수 있는 기능을 제공한다. oninput 속성에서 <output> 요소의 name 속성의 값을 변수 명으로 사용하여 코드를 실행한다. for 속성에는 계산에 사용되는 요소들의 id를 적어주면 되는 것으로 보이나, 기능에 반드시 필요한 것은 아니다.
<fieldset>
<fieldset> 요소는 <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용한다.
<fieldset> 요소는 하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려준다. <legend> 요소를 사용하면 <fieldset> 요소의 캡션을 정의할 수 있다.
Reference
- [W3School] “HTML tutorial” — https://www.w3schools.com/html/default.asp
- [W3School] “HTML tags” — https://www.w3schools.com/tags/default.asp
- [TCPSchool] “HTML 태그" — http://www.tcpschool.com/html-tags/intro
