네모장 | 네모장

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>