HTML Form Elements

The <input> Element

form element 중에서 가장 중요한 element이다.

<input> element는 type 속성에 따라 몇가지 다른 방법으로 표시된다.

다음 chapter에서 따로 다루도록 한다.

The <select> Element

<select> element는 drop-down 리스트를 정의한다.

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="bmw" selected>BMW</option>

<option value="audi">Audi</option>

</select>

<option> element는 선택 가능한 옵션을 정의한다.

기본적으로 drop-down 항목의 첫 항목이 선택되어 나타나는데

selected 속성을 줘서 다른 항목이 선택되어 나타나게 할 수 있다.

실행 결과는 아래와 같다.

Volvo Saab BMW Audi

The <textarea> Element

<textarea> element는 여러 행을 입력하는 input 이다.

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.

</textarea>

rows 속성은 글자를 몇 행까지 입력하는지 결정하는 속성이다.

cols 속성은 몇 글자까지 가로로 적을수 있는지(폭) 속성이다.

위의 코드 실행 결과는 아래와 같다.

The cat was playing in the garden.

The <button> Element

<button>은 클릭할 수 있는 버튼을 정의하는 element이다.

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

실행 결과는 아래와 같다.

onclick의 값은 클릭 했을 때, 어떤 함수를 실행 시킬것인가, 함수의 이름과 인자를 적는다.

위의 예에서는 클릭하면 Hello World!라고 적힌 알림창이 뜬다.

HTML5 Form Elements

HTML5에는 <datalist>, <keygen>, <output> element가 있는데, 낮은 버전의 브라우저는 지원하지 않을 수 있다.

HTML5 <datalist> Element

<datalist> element는 <input> element의 미리 정의된 옵션들을 정의한다.

검색창의 자동완성 기능처럼, 입력으로 예상되는 값들이, drop-down 리스트로 제공된다.

<input> element의 list 속성은 <datalist> element의 id를 값을 참조하여 drop-down 리스트를 만든다.

<form action="action_page.php">

<input list="browsers">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Safari">

</datalist>

</form>

실행 결과는 아래와 같다.

HTML5 <keygen> Element

<keygen> element의 목적은 허가된 사용자인지 판별하는 방법을 제공하는데 있다.

form에 키 값 쌍을 생성하는 영역을 만든다.

form을 제출할 때, private와 public 2가지 key가 생성된다.

private key는 로컬에 저장되고, public key는 서버로 보내진다.

public key는 user를 판별하는 client인증서를 생성하는데 사용된다.

<form action="action_page.php">

Username: <input type="text name="user">

Encryption: <keygen name="security">

<input type="submit">

</form>

HTML5 <output> Element

<output> element는 계산의 결과를 표시한다.

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

</form>

실행결과는 아래와 같다.

0 100 + =

116

아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_form_elements.asp