TIL 04 | HTML Form

Codecademy HTML를 통해 배운 HTML Form의 개념과 Input Tag의 다양한 Type 속성을 알아보자.

HTML Form

HTML Form은 사용자와 웹사이트가 상호 작용하는 중요한 기술중에 하나이다. 기본적으로 Form Tag는 정보를 모으는데 탁월한 도구이고, 이와 같은 정보를 처리할 곳으로 전송한다.

<form action="/example.html" method="POST"></form>

여기서 <action> 속성은 정보가 전송되는 장소, <method> 속성은 전송할 method 종류를 의미한다. GET과 POST는 브라우저에서 Form 데이터를 가져와 서버로 보내는 기능을 수행하지만, GET 방식은 데이터를 url 끝에 붙여 눈에 보이게 하고 POST 방식은 내부적으로 보이지 않게 한다.

Input Tag

Input Tag는 사용자가 다양하게 폼 태그를 입력할 수 있는 공간을 만들어 준다.

<form action="/example.html" method="POST">
<input type="text" name="first-text-field" value="already pre-filled">
</form> 

자주 사용되는 Input 속성은 다음과 같다.

• type="text" 태그의 모양, 형식을 변경할 수 있다.
• name="name" 태그의 이름을 지정한다.(서버로 전달되는 이름)
• value="value" 태그의 값을 지정한다.(Default 값으로 지정 가능하며 변경가능)
• 그 외 자주 사용되는 Input 속성들

*** <input> 태그는 Void element로 불리며 content를 가지지 않기에 closing tag를 가지지 않는다. 대신 opening tag의 끝에 />로 닫아준다.

*** _Void element에 대해 검색한 결과 슬래시(/)로 클로징하는 것은 XHTML에서는 필수이지만 HTML5에서는 옵션이라고 한다.

Input Type

Type 속성은 입력 태그의 유형으로 다양한 형식을 가지고 있다.

• "text" 한 줄의 텍스트 입력값을 가진다.

• "password" text 속성과 같지만 문자를 숨겨서 표시한다.

• "number"

<form>
  <label for="years"> Years of experience: </label>
  <input id="years" name="years" type="number" step="1">
</form>

Years of experience:

숫자 입력을 위한 창을 만들고, min, max를 통해 최소, 최대값을 정할 수 있다.
step 속성은 허락하는 숫자의 간격을 뜻한다.

• "range" number 속성과 비슷하지만 정확한 값이 중요하지 않은 창을 생성한다.

<input id="volume" name="volume" type="range" min="0" max="100" step="1">

• "checkbox" 체크박스를 생성한다.(중복 선택 가능)

<label for="onion">Onion</label>  
<input type="checkbox" id="onion" name="topping" value="onion">
<label for="potato">Potato</label>  
<input type="checkbox" id="potato" name="topping" value="potato">  
<label for="carrot">Carrot</label>  
<input type="checkbox" id="carrot" name="topping" value="carrot">

Onion Potato Carrot

• "radiobutton" 선택 항목 중 1가지만 선택이 가능하다.

<form>
  <p>What is sum of 1 + 1?</p>
  <input type="radio" id="two" name="answer" value="2">
  <label for="two">2</label>
  <br>
  <input type="radio" id="eleven" name="answer" value="11">
  <label for="eleven">11</label>
</form>

What is sum of 1 + 1?

2
11

• "select" 여러개의 옵션 중 하나를 선택할 경우 용이하다.

<form>
  <label for="lunch">What's for lunch?</label>
  <select id="lunch" name="lunch">
    <option value="pizza">Pizza</option>
    <option value="curry">Curry</option>
    <option value="salad">Salad</option>
    <option value="ramen">Ramen</option>
    <option value="tacos">Tacos</option>
  </select>
</form>

What's for lunch? Pizza Curry Salad Ramen Tacos

• "datalist" select과 달리 datalist는 사용자가 직접 원하는 옵션을 정할 수 있다.

<form>
  <label for="city">Ideal city to visit?</label>
  <input type="text" list="cities" id="city" name="city">
  <datalist id="cities">
    <option value="New York City"></option>
    <option value="Tokyo"></option>
    <option value="Barcelona"></option>
    <option value="Mexico City"></option>
    <option value="Melbourne"></option>
    <option value="Other"></option>  
  </datalist>
</form>

Ideal city to visit?

• "textarea" text 속성은 한 줄만 가능하지만 textarea는 여러 줄을 입력 가능하다. Default 값을 지정할 수도 있다.

<form>
  <label for="blog">New Blog Post: </label>
  <br>
  <textarea id="blog" name="blog" rows="5" cols="30">
  </textarea>
</form>

New Blog Post:

• "submit" 서버로 제출/전송하는 버튼을 만든다.

<form>
  <input type="submit" value="Send">
</form>

Label Tag

<label>은 for 속성을 이용해 <input>과 결합, 연결되며 id를 공유해야 한다. 일반적으로 <label> 태그는 일반적인 텍스트로 보여지지만 사용자가 마우스로 해당 텍스트를 클릭할 경우 <label>과 연결된 요소를 곧바로 선택할 수 있어 편의성을 높여준다.

<form action="/example.html" method="POST">
  <label for="meal">What do you want to eat?</label>
  <br>
  <input type="text" name="food" id="meal">
</form>