Web (7) form 태그

Web form : 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들 (ex. 로그인 폼이나 회원가입 폼)

 

<form> 태그 : 폼 만들기

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

form 태그의 속성들

(1) method : 사용자가 입력한 내용들을 서버쪽 프로그램으로 어ᄄᅠᇂ게 넘겨줄지 지정

- method의 속성 1. get : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 256byte~4096byte까지의 데이터만 서버로 넘길 수 있다.

- method의 속성 2. post : 대부분이 이 방식을 사용한다. 사용자의 입력을 표준 입력 (standard input)으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다.

(2) name : 폼의 이름을 지정한다. 한 문서 안에 여러 개의 <form>태그가 있을 경우, 폼들을 구분하기 위해 사용한다.

(3) action : <form>태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다.

(4) target : <action>태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.

autocomplete 속성 – 자동 완성 기능

- 기본값은 “on” 이다.

- 개인정보나 중요한 정보를 입력할땐 꺼야하는데 “off”시키면 된다.!

ex. <form action=“register.php” autocomplete=“off”>

 

<label> 태그 – 폼 요소에 레이블 붙이기

- 레이블 : 입력 창 옆에 ‘아이디’나 ‘비밀번호’처럼 붙여 놓은 텍스트

기본형1 : <label [속성=“속성 값”]> 레이블 <input ....> </label>

기본형2 : <label for= “id이름”> <input id=“id이름” [속성=“속성 값”]> </label>

 

그냥 checkbox와 label을 이용한 radio의 다른점 : checkbox는 텍스트를 클릭하면 체크되지 않는데 radio는 텍스트만 클릭해도 체크된다.

 

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

<fieldset>태그는 <fieldset>과 </fieldset>태그 사이의 폼들을 하나의 영역으로 묶고 외곽선을 그려 주고 <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙여준다.