HTML.12.Form

Form 사용자가 웹 사이트로 정보를 보낼 수 있는 요소

텍스트필드, 체크박스, 라디오 버튼, 송신 버튼 등 다양한 유형의 입력 요소를 위한 컨테이너

폼 자체는 표시되지 않는다

 

폼의 동작 방식

사용자가 아이디/비밀번호 입력 후 로그인 버튼을 클릭하면

입력한 정보가 웹 서버로 전송되고

서버가 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인한 후

그 결과를 웹 브라우저에 전송함

 

form태그

폼을 만드는 태그

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

폼 태그는 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버에 전송하고 이를 서버에서 어떤 프로그램을 이용해 처리할지를 지정한다

get : 데이터를 256 ~ 4,096byte 까지만 서버로 전송 가능 / 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남(보안성이 낮다.)

post : 입력한 내용의 길이에 제한X, 사용자가 입력한 내용도 드러나지X 

 

autocomplete 속성

자동 완성 기능을 나타내는 속성(디폴트: on)

 

<fieldset>, <legend>태그

fieldset: 하나의 폼 안에서 여러 구역을 나누는 태그

legend: 필드셋 태그로 묶은 그룹에 제목을 붙이는 태그

 

<label>태그

인풋태그와 같은 폼 요소에 라벨을 붙일때 사용

라벨:입력란 가까이에서 입력란을 보조하는 텍스트

라벨 태그 사용 시 폼 요소와 라벨 텍스트가 서로 연결되었음을 웹 브라우저가 인식

 

라벨 태그를 쓰는 방법 두가지

1. 라벨 태그 안에 폼 요소를 삽입

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

 

2. 라벨 태그와 폼 요소를 따로 사용하고 태그의 속성을 이용해 연결

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