HTML Form 요소

<input> 요소

가장 중요한 양식 요소는 <input>요소입니다.

<input>요소는에 따라 여러 가지 방법으로 표시 할 수 있습니다.

<input name="firstname" type="text">

type속성을 생략하면 입력 필드에 기본 유형 인 "text"가 표시됩니다.

 

<select> 요소

<select>요소는 정의 드롭 다운 목록 :

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Volvo Saab Fiat Audi

<option>요소는 선택할 수있는 옵션을 정의합니다.

기본적으로 드롭 다운 목록의 첫 번째 항목이 선택됩니다.

미리 선택된 옵션을 정의하려면 옵션에 selected속성을 추가하십시오 .

<option value="fiat" selected>Fiat</option>

Volvo Saab Fiat Audi

size표시되는 값의 수를 지정 하려면 속성을 사용하십시오.

<select name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Volvo Saab Fiat Audi

multiple사용자가 둘 이상의 값을 선택할 수있게 하려면 속성을 사용하십시오 .

<select name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Volvo Saab Fiat Audi

 

<textarea> 요소

이 <textarea>요소는 여러 줄 입력 필드 ( 텍스트 영역 )를 정의합니다.

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

The cat was playing in the garden.

이 rows속성은 텍스트 영역에 표시되는 줄 수를 지정합니다.

이 cols속성은 텍스트 영역의 보이는 너비를 지정합니다.

위의 HTML 코드가 브라우저에 표시되는 방식입니다.

 

<button> 요소

<button>요소는 클릭 할 수있는 정의 단추를 :

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

항상 button 요소 의 type 속성을 지정하십시오 . 브라우저마다 버튼 요소에 다른 기본 유형을 사용할 수 있습니다.

 

 

HTML5 <datalist> 요소

<datalist>요소는에서 미리 정의 된 옵션의리스트를 지정 <input>소자.

사용자는 데이터를 입력 할 때 사전 정의 된 옵션의 드롭 다운 목록을 볼 수 있습니다.

list의 속성 <input>요소는 참조해야 id의 속성 <datalist>요소입니다.

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

 

HTML5 <output> 요소

<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>

0 100 + =