[html] form 요소

◎ form 태그 <form>

우선 form이란 사용자가 웹 사이트로 정보를 보낼 수 있는 요소이다.

form 태그는 입력받은 자료를 어떤 방식(속성)을 사용해서 서버로 넘기는 것을 정한다.

method: get - data가 256~4096byte까지만 넘길 수 O ,

주소 표시줄에 사용자가 입력한 내용이 드러남.(보안에 취약)

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

name: 자바스크립트로 form 제어할 때 사용할 form의 이름

action: <form> 태그 안의 내용을 처리해 줄 서버 프로그램 지정

target: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함. ex) _blank

autocomplete: 자동완성 기능이다.(이전 입력 내용이 밑에 뜨게) 이 친구는 on/off로 설정할 수 있다.

ex) <form action="" autocomplete = "on"></form>

​

◎ form 태그를 그룹으로 묶기

<fieldset></fieldset>: 하나의 폼 안에서 여러 구역을 나누어 표시하기.

<legend></legend>: <fieldset> 태그로 묶은 그룹의 제목 붙이기

 

fieldset, legend 예시

만약에 fieldset을 하나만 쓴다면 아래와 같이 나온다. 매우 바보같은 상황이지만 궁금해서 해본건 비밀

 

​

◎form 요소에 레이블 붙이기

<label></label> 태그는 form 요소(ex. <input> )에 레이블 붙일 때 사용할 수 있다.

여기에는 두가지 방법이 있다.

ⅰ 태그와 폼 요소를 따로 사용, <label>에 for 속성과 폼 요소의 속성을 이용해 서로를 연결하는 방법.

<label for="user-id">아이디</label>

<input type="text" id="user-id">

​

ⅱ 태그 안에 폼 요소를 함께 넣어 한번에 쓰는 방법.

<label>아이디<input type="text"></label>

​

먼저 ⅰ방식으로 쓰면 띄어쓰기 한칸이 자동으로 된다는 차이점이 있다. 그리고, 번거롭긴 하지만 이 방식으로 쓰게 되면 input태그가 붙어있지않고, 다른 코드사이에 섞여 있어도 id때문에 쉽게 연결할 수 있다.

 

ⅰ과 ⅱ의 결과물

◎ input태그 type 정리

<input>은 사용자가 입력한 정보를 받을 때 사용한다.

<input type="text"> input 태그는 다음과 같이 type이 있다. type에 들어갈 수 있는 속성들은 다양하다.

​

text - 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣는다.

password - 비밀번호를 입력하는 곳.

search- 검색할 때 입력하는 곳.

url - url 주소를 입력하는 곳.

email - email 주소 입력

tel - 전화번호 입력

checkbox- 주어진 여러 항목에서 2개 이상 선택 가능한 체크 박스

radio - 주어진 여러 항목에서 1개만 선택 가능한 라디오 버튼

number - 숫자를 조절할 수 있는 스핀 박스

range - 숫자를 조절할 수 있는 슬라이드 막대

date - 사용자 지역을 기준으로 날짜(연,월,일) 넣는다.

month - 사용자 지역을 기준으로 날짜(연, 월) 넣는다

week - 사용자 지역을 기준으로 날짜(연, 주)를 넣는다.

time - 사용자 지역을 기준으로 시간(시, 분, 분할 초) 넣는다.

datetime - 국제 표준시(utc)로 설정된 날짜, 시간을 넣는다.

datetime - local - 사용자가 있는 지역을 기준으로 날짜, 시간을 넣는다.

submit - 전송 버튼을 넣는다.

reset - 리셋 버튼을 넣는다.

image - submit 버튼 대신 사용할 이미지 넣는다.

button - 일반 버튼을 넣는다.

file - 파일 첨부할 수 있는 버튼을 넣는다.

hidden - 사용자에게 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다.