Back to feed
web

HTML/ form 태그 요소

input

  • form 요소 중 가장 많이 사용하는 태그

  • type에 따라 다양한 방식으로 표현할 수 있다.

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />

label

  • label
    태그는 form 요소를 정의하는 태그

  • screen-reader 기능을 사용하는 유저들에게 편리하다

  • radio 버튼이나 checkbox 같은 작은 요소들을 사용할 때도 편리한데, 이와 연동된 label 태그를 클릭해도 클릭된 것으로 간주되기 때문이다.

  • label
    태그의 
    for
    속성과 
    input
    의 
    id
    를 같게 하여 
    input
    태그와 
    label
    태그를 연결한다.


select

  • drop-down 목록을 정의할 때 사용하는 태그

  • option 태그로 목록의 요소를 정의한다.

  • default는 drop-down 목록의 첫번째 아이템

  • 미리 선택된 옵션을 정의 하기 위해서는 option 태그의 selected 속성을 사용한다.

  • size 속성으로 몇 개의 값을 보여줄지 지정할 수 있다.

  • multiple 속성으로 한 개 이상의 값을 선택할 수 있도록 지정할 수 있다.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3" multiple>
  // 3개까지 표시, 여러개 선택 가능
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>
  // 미리 선택된 아이템
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

textarea

  • 여러 줄 입력 필드 (input의 type="text"는 한 줄 입력 필드)

  • rows 속성으로 세로 줄 수를, cols 속성으로 가로 길이를 지정

  • css로도 사이즈를 지정할 수 있다.

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>


<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

button

  • 클릭 가능한 버튼

  • onclick 속성으로 해당 버튼을 클릭했을 때 실행할 js함수를 지정할 수 있다.

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

fieldset, legend

  • fieldset 태그는 form 내에 서로 연관있는 데이터를 그룹으로 묶을 때 사용한다.

  • legend 태그는 fieldset내의 요소를 정의하는 태그이다.

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br />
    <input type="text" id="fname" name="fname" value="John" /><br />
    <label for="lname">Last name:</label><br />
    <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
    <input type="submit" value="Submit" />
  </fieldset>
</form>

datalist

  • input 태그를 위해 미리 정의된 옵션 목록을 지정하는 태그이다.

  • 사용자는 drop-down 목록으로 미리 정의된 입력 데이터를 볼 수 있다.

  • input 태그의 list 속성과 datalist의 id 속성을 같게하여 두 태그를 연결한다.

<form action="/action_page.php">
  <input list="browsers" />
  <datalist id="browsers">
    <option value="Internet Explorer"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
    <option value="Opera"></option>
    <option value="Safari"></option>
  </datalist>
</form>

output

  • 연산 결과를 보여주는 태그이다.
<form
  action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)"
>
  0
  <input type="range" id="a" name="a" value="50" />
  100 +
  <input type="number" id="b" name="b" value="50" />
  =
  <output name="x" for="a b"></output>
  <br /><br />
  <input type="submit" />
</form>