[HTML] 폼

Reading time ~1 minute

폼은 사용자가 특정 양식에 맞춰 웹 서버로 데이터를 전송할 때 사용하는 HTML 요소이다.
폼은 <form> 태그를 사용하여 만들 수 있다.

<form>
    폼 요소1
    폼 요소2
    .
    .
    .
</form>

폼 요소 (Form Elements)

하나의 폼은 여러 개의 폼 요소 들을 가진다. 각각의 폼 요소는 사용자에게 어떤 형식의 데이터를 입력받는 지를 제시한다.

input 은 가장 중요한 폼 요소이다. input의 type 속성에 따라 다양한 형태로 데이터를 입력받을 수 있게 된다.

<form>
    <input type="타입">
</form>

다음은 input 요소의 type 속성에 올 수 있는 값들이다.

한 줄로 된 텍스트 입력칸을 생성한다.

<input type="text"> 

비밀번호를 입력받는 칸을 생성한다. 입력되는 값은 * 로 가려진다.

<input type="password">

폼에 입력된 데이터를 폼 핸들러 에 전송하는 버튼을 생성한다. 폼 핸들러는 입력받은 데이터를 처리하는 서버 페이지이며, input의 action 속성에 정의된다.

<input type="submit">

폼에 입력된 데이터를 기본값으로 되돌리는 버튼을 생성한다.

<form>
    <input type="text" value="값을 입력 한 뒤 버튼 클릭"><input type="reset">
</form>

몇 개의 선택지 중에서 하나만을 고를 수 있는 선택 항목을 생성한다. 단, 반드시 name 속성을 동일하게 해주어야 하나만 선택하도록 설정된다.

<input type="radio" name="options">선택 1
<input type="radio" name="options">선택 2
<input type="radio" name="options">선택 3

선택 1
선택 2
선택 3

선택하지 않거나, 하나 이상의 선택지를 동시에 선택할 수 있는 선택 항목을 생성한다. 이 경우에는 name 속성을 다르게 지정해주어야 한다.

<input type="checkbox" name="options">선택 1
<input type="checkbox" name="options">선택 2
<input type="checkbox" name="options">선택 3

선택 1
선택 2
선택 3

특정한 명령을 실행하는 버튼을 생성한다. 실행할 명령을 onclick 속성에 정의한다.

<input type="button" onclick="alert('Hello, world!')">