폼 (Form)

- 폼은 데이터를 선택하거나 입력하기 위한 부품.

- 폼의 내용은 form 요소 안에 작성함. action 속성을 사용하여 송신할 곳의 URL을 지정하거나 method 속성을 사용하여 통신 방법(GET 또는 POST)을 지정할 수 있음.

1) GET : 보내진 데이터는 URL의 일부(파라미터)로 주소 표시줄에 나타남.

2) POST : 보내진 데이터는 URL에 표시되지 않음. 긴 데이터를 보낼 때 적합함.

 

<form action="/cgi-bin/formsample4.cgi" method="POST">
<p> 이름을 입력하세요. </p>
<p><input type="text" name="username"></p>
<p><input type="submit"></p>
</form>

* type 속성의 종류

1) text : 텍스트 한 줄분의 입력 폼(텍스트 상자)을 나타냄. (type 속성을 직정하지 않는 경우는 이 형식이 됨.) maxlength 속성을 사용하여 최대 문자 수를 지정할 수 있음.

2) radio : 라디오 버튼(한 개분)을 나타냄. name 속성에 지정한 값이 똑같으면 동일한 그룹으로 간주됨. checked 속성을 지정하면 항목을 미리 선택할 수 있음.

3) checkbox : 체크 박스(한 개분)를 나타냄. checked 속성을 지정하면 항목을 미리 선택해 놓을 수 있음.

4) file : 파일 업로드용 입력 폼을 나타냄.

5) password : 입력한 문자가 화면에 표시되지 않는 입력 폼을 나타냄.

6) reset : 리셋 버튼을 나타냄. value 속성에는 버튼에 표시될 문자열을 지정함.

7) submit : 보내기 버튼을 나타냄. CGI로 데이터를 보낼 때는 이 버튼을 누름. value 속성에는 버튼에 표시될 문자열을 지정함.

8) file : 파일 업로드용 입력 폼을 나타냄.

 

* select 태그

- 여러 개의 선택지로부터 선택하는 메뉴를 작성할 수 있음.

- option 태그를 항목으로 하여 선택지를 지정함.

- select 요소에 size 속성을 지정하면 드롭다운이 아니라 목록 박스 형태가 됨.

 

어떤 그림책을 샀습니까?<br>

<select name="picbook">

<option value="1">C</option>

<option value="2">Java</option>

<option value="3" selected>HTML5</option>

</select>

 

* button 태그

- 폼에 버튼을 추가함.

- type 속성에 지정한 값에 따라 기능이 달라짐.

 

type="submit" // 송신 버튼

type="reset" // 리셋 버튼

type="button" // 범용 버튼

type="image" // 이미지 송신 버튼. src 속성에 이미지 파일명을 지정함.

ex) <input type="image" src="cat.png">

 

* textarea 태그

- 여러 줄의 텍스트를 입력하기 위한 필드를 추가함.

- cols 속성은 한 줄당 문자 수, rows 속성은 줄의 수를 지정함.

- 태그와 종료 태그 사이에 텍스트를 입력해 두면 필드 안에 해당 텍스트를 미리 표시할 수 있음.

 

<textarea cols="30" rows="20">

자유롭게 입력하세요.

</textarea>

 

* label 태그

- 폼의 입력 부품에 제목을 붙임.

- value 속성을 사용하여 제목을 붙일 수 없는 태그에 사용함.

 

<label for="name">성함</label>   // for 속성은 id 속성을 참조함.

<input type="text" id="name">

 

* fieldset 태그 및 legend 태그

- fieldset 태그는 폼을 구성하는 부품을 그룹화함.

- legend 태그는 fieldset 태그로 작성된 그룹에 제목을 붙임.

- legend 태그는 fieldset 요소 안에서 가장 먼저 작성함.

 

<form action="/cgi-bin/example.cgi" method="post">

<fieldset>

<legend>주소 등록</legend>

<label for="adress">주소</label>

<input type="text" id="adress">

</fieldset>

</form>

 

* 숨김 데이터

- input 요소에 type="hidden"을 지정하면 화면에는 표시되지 않지만 서버에 송신하고 싶은 데이터를 지정할 수 있음.

- HTML 소스상에는 표시되므로 사용자에게 알리고 싶지 않은 데이터를 취급할 때는 사용하면 안됨.

 

<input type="hidden" name="uid" value="1215">

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)