thinkNote

■ HTML form 요소

▶ <form> : 사용자 입력에 대한 HTML 폼을 정의한다.

▶ <input> : 입력 컨트롤을 정의한다.

▶ <textarea> : 여러 줄의 입력 컨트롤을 정의한다.

▶ <label> : <input> 요소의 라벨을 정의한다.

▶ <fieldset> : 관련 요소를 양식으로 그룹화한다.

▶ <legend> : <fieldset> 요소의 표제를 정의한다.

▶ <select> : 드롭다운 목록을 정의한다.

▶ <optgroup> : 드롭다운 목록에서 관련 옵션 그룹으리 정의한다.

▶ <option> : 드롭다운 목록의 항목을 정의한다.

▶ <button> : 클릭가능한 버튼을 정의한다.

▶ <datalist> : 입력 컨트롤에 대해 미리 정의된 옵션 목록을 지정한다.

▶ <output> : 계산 결과를 정의한다.

▶ 다양한 HTML form 요소를 모두 설명한다.

■ HTML <form> 요소

▶ HTML <form> 요소는 다음 양식 요소 중 한 이상을 포함할 수 있다.

▷ <input>

▷ <label>

▷ <select>

▷ <textarea>

▷ <button>

▷ <fieldset>

▷ <legend>

▷ <datalist>

▷ <output>

▷ <option>

▷ <optgroup>

■ <input> 요소

▶ 가장 많이 사용되는 form 요소는 <input> 요소이다.

▶ <input> 요소는 "type" 속성에 따라 여러 방법으로 표시될 수 있다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_input 

■ <label> 요소

▶ <label> 요소는 여려 form 요소의 라벨을 정의한다.

▶ <label> 요소는 화면 판독기 사용자에게 유용하다.

▶ 사용자가 input 요소에 초점을 맞출 때 화면 판독기가 라벨을 소리내어 읽어주기 때문이다.

▶ <label> 요소는 또한 매우 작은 영역 (라디오 버튼 또는 확인란)을 클릭하는 데 어려움이 있는 사용자에게 도움이 된다.

▶ 사용자가 <label> 요소 내의 텍스트를 클릭하면 라디오 버튼/확인란이 토글되기 때문이다.

▶ <label> 태그의 "for" 속성은 <input> 요소의 "id" 속성과 같아야 함게 묶을 수 있다.

■ <select> 요소

▶ <select> 요소는 드롭다운 목록을 정의한다.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select 

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

▶ 기본적으로 드롭다운 목록의 첫 번재 항목이 선택된다.

▶ 사전 선택된 옵션을 정의하려면 선택한 <option> 속성을 option에 추가한다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select_pre 

□ 보이는 값

▶"size" 속성을 사용하여 표시되는 값의 수를 지정한다.

<label for="cars">Choose a car:</label>
<select id="cars" 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>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select_size 

□ 다중 선택 허용

▶ "multiple" 속성을 사용하여 사용자가 둘 이상의 값을 선택할 수 있도록 한다.

<label for="cars">Choose a car:</label>
<select id="cars" 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>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select_multiple 

■ <textarea> 요소

▶ <textarea> 요소는 여러 줄 입력 필드(텍스트 영역)을 정의한다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_textarea 

▶ "row" 속성은 텍스트 영역에서 볼 수 있는 줄 수를 지정한다.

▶ "cols" 속성은 텍스트 영역의 가시적 너비를 지정한다.

▶ CSS를 사용하여 텍스트 영역의 크기를 정의할 수도 있다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_textarea_style 

■ <button> 요소

▶ <button>요소는 클릭 가능한 버튼을 정의한다.

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

※ 항상 버튼 요소의 "type" 속성을 지정한다.

※ 다른 Browser는 버튼 요소에 대해 다른 기본 유형을 사용할 수 있다.

■ <fieldset>와 <legend> 요소

▶ <fieldset> 요소는 관련 데이터를 양식으로 그룹화하는 데 사용된다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_legend 

■ <datalist> 요소

▶ <datalist> 요소는 <input> 요소에 대해 사전 정의된 옵션 목록을 지정한다.

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

▶ <input> 요소의 "list" 속성은 <datalist> 요소의 "id" 속성을 참조해야 한다.

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist 

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

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_output 

출처 : https://www.w3schools.com/html/html_form_elements.asp