[기본 개념] 2 | (2.1) 폼 삽입

[기본 개념] 2 | (2.1) 폼 삽입

1> 폼 삽입하기

2 사용자 입력을 위한 input 태그

3 input 태그의 주요 속성

4 폼에서 사용하는 여러 가지 태그

1 폼 삽입하기

폼을 만드는 <form> 태그

 

기본형

<form [속성="속성값"]>여러 폼 요소</form>

 

 폼을 만드는 가장 기본적인 태그로 <form> 과 </form> 태그 사이에 여러 가지 폼 요소를 넣는다.

 

 <form> 태그는 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정한다.

 

 다음을 <form> 태그의 속성이다.

 

종류	설명
method	사용자가 입력한 내용을 서버 프로그램으로 어떻게 넘겨줄 것인지 지정 (get, post) - get : 데이터를 256 ~ 4096byte까지만 서버로 넘길 수 있다. 주소 표시줄에 사용자가 입력한 내용 드러남 - post : 입력한 내용의 길이 제한 없고, 사용자가 입력한 내용도 드러나지 않음
name	자바스크립트로 폼을 제어할 때 사용할 폼의 이름 지정
action	<form> 태그 안의 내용을 처리해 줄 서버 프로그램 지정
target	action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다.

 

(ex. 폼의 내용을 서버로 전송했을 때 서버에 있는 register.php를 실행 )

 

<form action="regoster.php">

 

 또한 자동 완성 기능을 나타내는 autocomplete 속성도 있다. 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해주는 것이다.

 

 자동 완성 기능은 autocomplete 속성을 사용하며 기본 속성값은 "on" 이다. 중요한 개인 정보나 인증번호 같은 일회성 정보를 입력한다면 속성을 off 로 지정하는 것이 좋다.

 

(ex. 자동 완성 기능 끄기 )

 

<form action="" autocomplete="off">

 

폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그

 

기본형

<fieldset [속성="속성값"]></fieldset>

 

기본형

<fieldset>

  <legend>그룹 이름</legend>

</fieldset>

 

 하나의 폼 안에서 여러 구역을 나누어 표시할 때 <fieldset> 태그를 사용한다. 

 

 <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있다.

 

폼 요소에 레이블을 붙이는 <label> 태그

 

기본형

<label>레이블명<input></label>

 

기본형

<label for="id명">레이블 명<input id="id명"></label>

 

 <label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다. 레이블은 입력란 가까이에 아이디나 비밀번호처럼 붙여놓은 텍스트를 말한다.

 

 <label> 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있다.

 

 <label>태그는 2가지 사용방법이 있다.

 

 첫 번째 방법은 <label> 태그 안에 폼 요소를 넣는 것이다.

 

(ex. <label> 태그 안에 <input> 태그 넣기 )

 

<label>아이디(6자 이상)<input type="text"></label>

 

 두 번째 방법은 <label> 태그와 폼 요소를 따로 사용하고 <label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것이다. 

 

 이 방법은 <label> 태그를 사용한 레이블과 사용자 정보를 입력받는 <input> 태그가 떨어져 있어도 쉽게 연결할 수 있다.

 

(ex. <label> 태그와 폼 요소를 따로 쓰고 연결하기 )

 

<label for="user-id">아이디(6자 이상)</label>
<input type="text" id="user-id">

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)