HTML Forms

---

<form> Element

HTML form 들은 사용자 입력을 수집하여 서버에 전달하는데 사용됩니다.

<form> 요소로 HTML form 을 정의한다:

HTML forms 은 form 요소들을 담는다. 

form 요소들은 다양한 타입의 입력(input) 요소와,  체크 박스(checkbox), 라디오(radio) 버튼, 제출(submit) 버튼 등과 같은 것들이다. 

---

<input> Element

<input> 요소는 가장 중요한 form 요소이다.

<input> 요소는 type 속성에 따라 여러 가지로 변화 될 수 있으며, 이 장에서는 간단히 다음과 같은 type 들을 사용해본다.:

Type	Description
text	Defines normal text input
radio	Defines radio button input (for selecting one of many choices)
submit	Defines a submit button (for submitting the form)

	You will learn a lot more about input types later in this tutorial.

---

Text Input

<input type="text"> 사용자가 텍스트 입력(text input)을 할 수 있는 한 줄의 입력 필드를 정의한다 :

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다:

First name:

Last name:

Note: 폼 자체가 표시되지는 않습니다. 또한 텍스트 필드의 기 본 너비는  20자 입니다.

---

Radio Button Input

<input type="radio"> 는 라디오 버튼(radio button)을 정의합니다.

라디오 버튼은 사용자가 제한된 개수의 선택 중 하나만 선택할 수 있습니다 :

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다:

Male
Female
Other

---

<label> 요소

위 예에서 label 요소의 사용을 주목하시오.

label 요소는 매우 작은 영역 (예 : radio button 또는 checkbox)을 클릭하기 어려운 사용자에게 도움이 됩니다. 레이블 요소 내의 텍스트를 클릭하면 라디오 단추 / 확인란이 토글되기 때문입니다.

label 태그의 for 속성은 입력 요소의 id 속성과 같아야합니다.

---

Submit Button

<input type="submit"> 는 폼 -헨들러 (form- handler)에게 폼을 제출하 는 버튼을 정의합니다.

폼-헨들러(form-handler)는 일반적으로 입력 자료를 처리할 스크립트로 이루어진 서버페이지이 다.

폼-헨들러(form-handler)는 폼의 action 속성에 명시되며 일반적으로 수신된 입력을 가지고 무언가를 수행합니다.:

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다:

First name:

Last name:

---

Action 속성

action 속성은 폼이 제출될 때 수행할 행동을 정의 합니다. 

서버에 폼을 제출하는 일반적인 방법은 submit  버튼을 사용하는 것이다.

일반적으로, 폼은 웹서버에 있는 웹페이지에 제출된다.

위의 예에서, 제출된 폼을 처리할 서버측 스크립트(server-side script)가 지정되어있다. :

만약 action 속성이 생략되어 있으면, action 은 현재 페이지로 설정된다. 

---

Method 속성

method 속성은 폼을 제출할 때 사용될 HTTP method (GET or POST)를 지정한다. :

or:

---

When to Use GET?

다음과 같은 경우 GET (the default method)을 사용할 수 있다.:

        폼 제출이 수동적(like a search engine query)이고, 민감한 정보가 없는 경우.

GET을 사용하면, 폼(form) 자료가 페이지 주소 부분에 표시될 것이다. :

	GET 은 짧은 데이타에 적합하며, 크기 제한은 브라우져에 설정되어 있다.

---

When to Use POST?

다음과 같은 경우 POST를 사용해야 한다.:

        폼이 데이타를 업데이트하거나, 민감한 정보(password)를 포함하는 경우.

POST 는 제출된 데이타가 페이지 주소에 보여지지 않아 더 나은 보안성을 제공해준다. 

---

Name 속성

제대로 제출 되려면, 각 입력 필드에 name  속성이 있어야 한다.

다음의 예는 "Last name" input 필드만 제출된다. :

---

<fieldset> 로 폼데이타 그룹화

<fieldset> 요소는 관련된 데이타들은 하나의 폼으로 그룹화 한다.

<legend> 요소는 <fieldset> 요소의 켑션을 정의한다.

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다:

Personal information:

First name:

Last name:

---

HTML Form 속성들

HTML <form> 요소는 모든 가능한 속성들으 설정과 함께 다음과 같이 보여질 것이다.:

Here is the list of <form> attributes:

Attribute	Description
accept-charset	Specifies the charset used in the submitted form (default: the page charset).
action	양식을 제출할 주소(URL)를 지정합니다. (기본 : 제출 페이지).
autocomplete	Specifies if the browser should autocomplete the form (default: on).
enctype	Specifies the encoding of the submitted data (default: is url-encoded).
method	양식을 제출할 때 사용되는 HTTP 메소드를 지정합니다. (기본값: GET).
name	Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate	Specifies that the browser should not validate the form.
target	Specifies the target of the address in the action attribute (default: _self).

	You will learn more about attributes in the next chapters.

---

More Examples

Exercise 1 »   Exercise 2 »   Exercise 3 »   Exercise 4 »

---