05-1 폼 삽입하기

폼은 이미 우리가 알게 모르게 웹 문서에서 자주 사용해 왔음. 특히 사용자의 의견이나 정보를 얻으려고 폼을 사용하는 경우가 많음. 

 

>>>웹에서 만나는 폼

아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있음. 

 

>>폼 작동방식

사용자가 아이디와 비밀번호를 입력하고 [로그인] 버튼을 클릭하면 입력한 정보는 웹 서버로 전송됨.

그럼 서버는 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인하고 그 결과를 웹 브라우저에 보냄. 폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스를 기반으로 작동함.

따라서 텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만, 폼에 입력한 사용자 정보는  ASP나 PHP,JSP 같은 서버 프로그래밍을 이용해 처리함.

 

>>> 폼을 만드는 <form> 태그

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

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

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

 

>>입력한 폼을 서버로 보내기

<form action="register.php">

/* 여러 폼 요소 */

</form>

 

>>자동 완성 기능 켜기

<form action="" autocomplete="on">

/* 여러 폼 요소 */

</form>

 

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

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

예를 들어 쇼핑몰 사이트에서 주문서를 작성할 때

개인 정보와 배송 정보를 나누어 표시하면 사용자가 입력하기도 편리하고 화면도 깔끔하게 정리할 수 있음.

[기본형] <fieldset [속성="속성값"]> </fieldset>

 

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

[기본형] <fieldset>

                    <legend>그룹 이름</legend>

             </fieldset>

 

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

<label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용함.

레이블이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말함.

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

 

첫번째 사용방법 :  태그 안에 폼 요소를 넣는 방법

[기본형] <label>레이블명<input></label>

 

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

다시 말해 폼 요소의 id 속성값을 <label> 태그의 for속성에게 알려주는 방법을 사용함.

[기본형]<label for="id명">레이블명<input id="id명"></label>

 

두 번째 방법은 첫 번쨰 방법보다 복잡해 보이지만 <label>태그를 사용한 레이블과 사용자 정보를 입력받는 <input> 태그가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다는 장점이 있음.