HTML Form 요소들
<input> 요소
가장 중요한 form 요소가 <input> 요소이다.
<input> 요소는 type 속성에 따라 여러 가지로 변화 될 수 있다.
 |
모든 <input> type 들은 다음 장에 설명되어 있다. |
|---|
<select> 요소 (드롭-다운 목록(Drop-Down List))
<select> 요소는 드롭-다운(drop-down) 목록을 정의:
Example
<select name="cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option
value="fiat">Fiat</option>
<option
value="audi">Audi</option>
</select>
Try it Yourself » <option> 요소는 선택할 옵션들을 정의.
일반적으로 목록의 첫번째 항목이 선택된 것으로 보여진다.
미리 정한 옵션으로 선택 되도록 selected 속성을 추가 할 수 있다.
<textarea> 요소
<textarea> 요소는 여러 줄의 입력 필드(텍스트 영역)를 정의 한다.:
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Try it Yourself » 위의 HTML code 는 브라우저에서 다음과 같이 표시된다.:
<button> 요소
<button> 요소는 클릭이 가능한 button 을 정의한다.:
위의 HTML code 는 브라우저에서 다음과 같이 표시된다.:
HTML5 Form 요소들
HTML5 는 다음의 form 요소들을 추가 하였다:
- <datalist>
- <output>
|
By default, browsers do not display unknown elements. New elements will not destroy your page. |
|---|
HTML5 <datalist> 요소
<datalist> 요소는 <input> 요소에 대한 사전 정의 된 옵션들의 목록을 지정한다. .
사용자는 입력 데이타로 사전 정의된 옵션들의 드롭-다운 목록을 보게 된다.
<input> 요소의 list 속성이 <datalist> 요소의 id 속성을 참조해야만 한다.
Example
An <input> element with pre-defined values in a <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>
Try it Yourself » HTML5 <output> 요소
<output> 요소는 계산 결과(스크립트에 의해서 수행된)를 표시한다.
Example
Perform a calculation and show the result in an <output> element:
<form action="action_page.asp"
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>
Try it Yourself » Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 »
HTML Form Elements
= new in HTML5.
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <button> | Defines a clickable button |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |