HTML&CSS) 폼 관련 태그들

<form> 태그 - 폼만들기

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

 

2) 속성 종류(사용자가 입력한 자료들을 서버로 어떤 방식으로 넘기고 처리할 것인지 지정)

ⓐ method : get(주소표시줄에 입력한 내용이 그대로 드러남), post(입력한 내용이 드러나지 않음)

ⓑ name : 폼의 이름을 지정함

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

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

ⓔ autocomplete : 내용을 입력할 때 이전에 입력했던 내용을 힌트로 보여줌(자동완성기능)

 

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

1) 기본형 

① <label [속성="속성 값"]> 레이블이름 <input ...> </label> : <label>태그 안에 폼 요소를 넣는 것

② <label for="id이름"> 레이블이름</label> <input id="id이름" [속성="속성 값"]> 

: id 속성 값을 <label>태그의 for 속성에게 알려주는 방식

* 레이블 : 입력 창 옆에 붙여 놓은 텍스트(ex id, passward)

# label을 이용하면 라디오버튼이나 체크박스를 정확히 클릭하지 않아도 텍스트를 클릭해도 되서 편하다.

 

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

- 하나의 폼 안에서 여러 구역을 나누어 표시하려고 할 때 사용한다.

1) 기본형 : <fieldset> <legend> 구역이름 </legend> </fieldset>

▷ fieldset은 태그 사이의 폼을 하나의 영역으로 묶고 외곽선을 그려줌

▷ legend태그는 제목을 붙여준다.

 

<input> 태그 - 입력 항목 만들기

1) 기본형 : <input type="유형" [속성="속성 값"]>

- id 속성 : 이름을 지정하여 css를 이용해 꾸밀 수 있음/ 최소한 한 개 이상의 문자여야 하고 공백이 없어야한다.

 

2) type속성 종류

유형	설명
hidden	사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가짐
text	한 줄짜리 텍스트를 입력할 수있는 텍스트 상자를 넣음
search	검색 상자를 넣음(오른쪽에 x가 표시되어 검색어를 쉽게 지울 수 있음)
tel	전화번호 입력필드를 넣음
url	URL주소를 입력할 수있는 필드를 넣음
email	메일주소를 입력할 수있는 필드를 넣음
password	비밀번호를 입력할 수있는 필드를 넣음
datetime	국제 표준시로 설정된 날짜와 시간을 넣음
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간을 넣음
date	사용자 지역을 기준으로 연,월,일 을 넣음
month/week/time	사용자 지역을 기준으로 연,월/연,주/시,분,초,분할 초 를 넣음
number	숫자를 조절할 수 있는 화살표를 넣음
range	숫자를 조절할 수있는 슬라이드 막대를 넣음
color	색상 표를 넣음
checkbox	주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣음
radio	주어진 항목에서 1개만 선택할 수있는 라디오 버튼을 넣음
file	파일을 첨부할 수 있는 버튼을 넣음
submit	서버 전송 버튼을 넣음
image	submit 버튼 대신 사용할 이미지를 넣음
reset	리셋 버튼을 넣음
button	버튼을 넣음