<HTML5+CSS3> 폼 만들기

보통 로그인을 클릭하면 사용자가 입력한 아이디와 비밀번호가 웹 서버로 보내집니다. 서버는 사용자 정보를 받아서 필요한 작업을 하게 되는데, 예를 들어 로그인 정보를 받았다면 서버는 자신이 가지고 있는 사용자 데이터베이스를 뒤져서 사용자가 보낸 정보가 일치하는지 확인하고 브라우저에 결과를 보냅니다. 이런 작업은 모두 데이터 베이스를 기반으로 합니다. 

폼의 형태는 HTML태그를 사용하고, 정보 처리는 ASP나 PHP,JSP같은 서버 프로그래밍을 이용합니다.

<forms>태그-폼만들기

-폼을 만드는 가장 기본적인 태그입니다.

EX) <form 속성="속성값"> 여러 폼 요소 </from>

예를 들어, 폼에 내용을 입력하고 전송 버튼을 눌렀을 때 post방식으로 register.php를 실행한다면

ex)<form action="register.php" mehod="post"> ... </form>

이렇게 사용하면 됩니다.

속성

1.method: 폼을 전송할 방식을 선택하는 속성. 사용할수 있는 값은 get과 post이다.

get :256~4096바이트의 정보만 서버로 넘길 수 있다.

post: 사용자의 입력 내용의 길이 제한을 받지 않아 대부분 post를 사용한다.

2.name:한 문서 안에 여러 개의 폼이 있을 수 있기 때문에 폼을 식별하기 위한 폼의 이름입니다.

3.action:폼을 전송할 서버 쪽의 스크립트 파일을 지정합니다. action속성을 이용하지 않고 onsubmit 이벤트를 이용해 스크립트로 처리할 수 있다.

4.target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.

여로 폼 요소를 나열할 때는 <ul>태그와 <li>태그를 사용해 목록처럼 일렬로 나열합니다.

<fieldset>,<legend>태그 - 폼 요소 그룹으로 묶기

-보기 쉽게 그룹으로 묶어주는 태그입니다. 예를 들어, 쇼핑몰 사이트에서 주문서를 작성하는 폼에서, "사용자 정보" 와 "배송 정보"를 나누어 표시하면 사용자가 정보를 입력하기에도 편하고 정리가 가능합니다.

EX) <fieldset 속성="속성 값"> ... </fieldset>

<fieldset>속성

1.disabled: 이 속성을 사용하면 <fieldset>태그의 자식 요소들을 사용할 수 없게 만듭니다. 즉, 화면에는 표시되지만, 사용자가 내용을 입력하거나 항목을 선택할 수 없습니다.

2.form : 현재 <fieldset>태그가 속해 있는 form의 이름을 표시할 수 있습니다.

3.name:이 속성을 이용해 서버로 넘겨줄 이름을 지정할 수 있습니다.

<legend>태그

-<fieldset>태그로 나누어진 구역에 제목을 붙이고 싶다면 <legend>태그를 사용한다.  <fieldset>태그 다음에 오며 필수 옵션은 아니므로 생략이 가능하다.

EX)<legend> 필드세트의 제목 </legend>

(231p 참고)

<label>태그 - 폼 요소에 캡션 붙이기

-폼 요소와 캡션으로 사용하는 텍스트가 짝을 이루고 있으므로 폼 요소의 위치가 바뀌더라고 캡션이 항상 따라다니게 됩니다.

이 태그를 사용하는 가장 큰 이유는 

1. 시각 장애인들이 폼을 사용할 때 폼의 설명부분,즉 캡션 부분과 사용자가 입력하는 부분을 정게 연결할 수 있기 때문에 사용한다. 

2.라디오 버튼이나 체크 박스에서 텍스트 부분을 클릭해도 라디오 버튼이나 체크 박스가 선택된다는 편리함 때문.

보통 시각 장애인들은 Tab을 눌러 이동을 하는데 텍스트 상자에 마우스 커서가 옮겨졌을 때 그 부분이 "이름"을 입력하는 ㅡ트 상자임을 정확히 알려주어야 한다 따라서 폼 요소 부분과 그옆에 표시되는 텍스트(캡션)를 연결해 주는 태그가 <label>태그 입니다.

사용법

-사용에는 2가지 방법이 있는데 첫 번째 방법은 <label>태그 안에 폼 요소를 넣는다

1.<label>태그 안에 폼 요소 넣기

ex) <label 속성="속성 값" > 캡션 <input ... > </label>

예를 들어, <label>아이디(6자이상) <input type="text" id="id"> </label>

이처럼 <label>태그를 붙여도 빼도 결화 화면은 달라지지 않지만 브라우저에서 폼 요소를 인식할 때 "아이디(6자이상)"이라는 캡션과 텍스트 입력 창을 한 묶음이라고 인식하게 됩니다.

2.<label>요소와 폼 요소를 따로 쓰고 for 속성과 id 속성을 이용해 연결하기. 

ex) <label 속성="속성 값" for="이름" > 캡션 </label>

     <input ... id= "이름">

for 속성을 사용해 어떤 폼 요서에 연결할지를 결정하게 됩니다.

이 방법은 첫 번째에 비해 다소 복잡하지만 <label>태그를 사용한 캡션 부분과 사용자 입력을 받는 <input>소스가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다는 장점이 있습니다. 

라디오 버튼과 체크 박스에서 사용하는 <label>태그

-폼에서 라벨태그를 사용하는 이유 중 하나는 사용자가 라디어 버튼이나 체크 박스를 쉽게 선택하기 위해서 이다.

<label>를 사용하지 않으면 택스트를 눌러도 선택이 안되지만  사용하게 되면, 텍스트를 누르면 바로 체크박스가 선택이 된다.