HTML - Forms-2

Radio Button Input

Radio Button 또한 체크박스랑 비슷하지만, Radio Button은 여러 가지 버튼 중에서도 단 1개의 옵션만 선택할 수 있다. 주로 예, 아니오. 질문, 혹은 정답이 한 개인 n지선다 문제에 활용될 수 있다.

<h3>What is sum of 1+1?</h3>

<label for="two">2</label>
<input type="radio" name="answer" id="two" value="two"/>

<label for="eleven">11</label>
<input type="radio" name="answer" id="eleven" value="eleven"/>

What is sum of 1+1?

2

11

사용자는 위와 같은 Radio Button에서 단 1개의 박스만 체크하여 고를 수 있다. 각각의 input 태그의 id 속성은 label 태그를 위함이고, name 속성은 2개의 radio button을 하나로 묶어주는 역할을 한다. 만일 name 속성의 값을 일치시켜주지 않으면 2개의 radio button이 각각 따로 놀게 되어 중복선택이 가능해진다. 사용자가 둘 중 하나의 정답을 골라 제출하면 고른 radio button에 해당하는 value 값이 answer 변수에 들어가 전송된다

answer = “two”

Dropdown List

많은 양의 옵션 중 단 한 가지의 옵션을 골라야 할 때, radio button도 좋지만, 더 많은 옵션이 필요하다면 드롭다운 리스트를 사용하는 것이 좋다.

<label for="lunch-menu">점심메뉴</label>
<select id="lunch-menu" name="lunch">
  <option value="pizza">피자</option>
  <option value="curry">카레</option>
  <option value="salad">샐러드</option>
  <option value="ramen">라면</option>
  <option value="tacos">타코스</option>

Dropdown list를 구현하기 위한 태그는 select 태그이다. id 속성은 label 태그를 위함이고 name 속성은 사용자가 선택한 리스트의 value를 담기 위함이다. select 태그 안에서 option 태그를 생성하여 드롭다운 리스트의 옵션들을 추가할 수 있다. 사용자가 피자를 점심 메뉴로 선택하고 제출했다면 다음과 같은 데이터가 넘어간다

lunch = “pizza”

Datalist Input

너무 많은 양의 선택지 때문에 사용자가 드롭다운 리스트를 활용하여 원하는 값을 스크롤로 찾기가 부담스럽다고 판단될 때, Datalist Input을 사용할 수 있다.

<label for="city">방문하실 도시를 선택해주세요</label>

<input type="text" name="city" list="list-cities"/>

<datalist id="list-cities">
  <option value="New York">뉴욕</option>
  <option value="Tokyo">도쿄</option>
  <option value="Barcelona">바르셀로나</option>
  <option value="Mexico City">멕시코시티</option>
  <option value="Melbourne">멜버른</option>
  <option value="Seoul">서울</option>
 </datalist>

Datalist의 input을 사용하기 위해서는 input 태그의 type 속성을 “text”로 설정해준 뒤 list 속성과 datalist 태그의 id 속성을 연결해준다. datalist 태그 내에는 dropdown list와 마찬가지로 option 태그를 활용해 데이터 리스트를 세팅해준다. Datalist input가 dropdown input와 다른 점은 검색이 가능하다는 것이다. input의 형태가 “text”이므로 사용자는 철자 검색을 통해 수많은 옵션 중 원하는 옵션을 비교적 수월하게 선택할 수 있다.

Textarea Element

사용자 후기, Q&A 등 웹사이트 사용자에게 장문의 글을 받아야 할 때는 textarea 태그를 사용하는 것이 좋다.

<label for="review">제품후기</label>
<textarea id="review" name="review" rows="8" cols="80"></textarea>

첫 번째로 textarea 태그의 id 속성을 label 태그와 연결해준다. 그 다음 textarea의 크기를 조정해줄 row 속성과 cols 속성을 입력해준다. 입력란의 우측 하단부를 드래그해서 크기를 사용자가 직접 조정할 수도 있다.

Submit Form

모든 Form의 마지막에는 항상 제출 버튼이 필요하다. 이 버튼을 사용자가 클릭해야 사용자가 입력한 모든 form의 정보들이 form 태그의 action 속성에 있는 문서로 이동하기 때문이다. input 태그의 type 속성에 “submit”을 넣어준다. value 속성은 버튼 위에 나타나는 텍스트 정도로 생각하면 좋다.

<input type="submit" value="제출하기"/>