HTML Forms

The <form> Element

<form> element는 사용자의 입력을 처리하는데 사용되는 form을 정의한다.

<form> element의 내용으로는 텍스트 필드, 체크박스, 라디오버튼 등의 element들이 들어간다.

The <input> Element

<input> element는 form element 중에 가장 중요하다.

<input> element는 type 속성으로 화면에 표시되는 방법을 바꿀 수 있다.

후에 더 다루겠지만, 여기서 몇가지를 소개한다.

Type	Description
<input type="text">	한 줄 짜리 텍스트 입력 칸 정의
<input type="radio">	라디오(선택) 버튼 정의
<input type="submit">	form 제출 버튼 정의

Text input

기본적으로 20글자를 입력할 수 있는 텍스트 입력칸 예제이다.

<form>

Firstname:<br>

<input type="text" name="firstname"><br>

Lastname:<br>

<input type="text" name="lastname"><br>

</form>

출력은 아래와 같다.

Firstname:

Lastname:

Radio Button Input

여러가지 중 하나를 선택할 수 있는 라디오버튼 예제이다.

<form>

<input type="radio" name="gender" value="male" checked> Male<br>

<input type="radio" name="gender" value="male"> Female<br>

<input type="radio" name="gender" value="male"> other<br>

</form>

출력은 아래와 같다

Male
Female
other

The Submit Button

<input type="submit">은 form에 작성된 데이터를 form-handler로 제출하는 버튼을 정의한다.

form-handler는 입력 데이터를 처리하는 스크립트로 된 서버페이지이다.

어떤 form-handler에 제출할 것인지는 <form>의 action 속성으로 정할 수 있다.

<form action="action_page.php">

Firstname:<br>

<input type="text" name="firstname"><br>

Lastname:<br>

<input type="text" name="lastname"><br>

<input type="submit" value="제출">

</form>

The Action Attribute

action 속성은 form이 제출될 때 수행할 동작을 정의한다.

기본적으로, 유저가 제출 버튼을 클릭할 때 서버상의 웹페이지에 form 데이터가 보내지는 동작을 한다.

위의 예제에서 form 데이터는 action_page.php라는 서버 페이지에 보내진다.

만약 action 속성이 생략되면 현제 페이지로 설정된다.

The Method Attribute

method 속성은 form 데이터를 제출할 때 사용할 HTTP method(GET 혹은 POST)를 정의하는 속성이다.

<form action="action_page.php" method="get">

혹은

<form action="action_page.php" method="post">

When to Use GET?

GET은 form 데이터를 제출할 때 사용하는 방법인데, 주소 표시영역에 제출하는 내용이 보이게 된다.

그래서 개인정보같은 민감한 내용을 보낼때는 사용하지 않는다.

GET은 짧은 양의 데이터를 전송할 때 적합하다.

When to Use POST?

POST는 개인정보 같이 민감한 내용이 form 데이터에 포함되어 있을 때 쓴다.

POST method는 제출하는 내용을 주소영역에 표시하지 않는다.

The Name Attribute

각 input 영역에는 name 속성이 꼭 있어야 한다.

만약 name 속성이 생략되었을 경우, 해당 input 영역의 내용은 전송되지 않는다.

Grouping Form Data with <fieldset>

<fieldset> element는 form 안에서 관련된 데이터끼리 모아놓은 그룹이다.

<legend>는 <fieldset> element의 캡션을 정의한다.

<form action="action_page.php">

<fieldset>

<legend>Personal information:</legend>

First name:<br>

<input type="text" name="firstname" value="Mickey"><br>

Last name:<br>

<input type="text" name="lastname" value="Mouse"><br>

<input type="submit" value="submit">

</fieldset>

</form>

출력은 아래와 같다.

Personal information:

First name:

Last name:

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

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