HTML5 + CSS3 (4) 폼

4. 폼

* 제작

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

- 관련 작업: 정보를 저장하거나 검색, 수정 작업

- 폼에 입력한 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍을 이용한다.

<form>	폼을 제작하는 기본 태그 예시) <form [속성="속성 값"]> 여러 폼 요소 </form>
<label>	폼 요소에 레이블(텍스트)를 붙이는 태그 예시) <label for = "id이름">     <input id ="id이름" [속성="속성 값"]> </label>
<fieldset>	폼 요소를 그룹으로 묶는 태그 예시) <fieldset [속성  ="속성 값"]> ... </fieldset>
<legend>	그룹으로 묶는 구역에 제목을 붙이는 태그 fieldset과 함께 쓴다. 예시) <fieldset>     <legend>로그인창</legend> </fieldset>
<input>	- 사용자가 입력하는 부분 - 입력하는 내용의 종류는 태그의 type 속성을 통해 지정 - id 속성을 이용해 여러 번 사용된 폼 요소를 구분하기 위해 사용한다. 예시) <input type = "유형" [속성 = "속성 값"]>

 

- <form> 태그에서 사용하는 속성

속성	설명
method	사용자가 입력한 내용을 서버 프로그램으로 넘길 방법을 지정	get: 주소 표시줄에 사용자가 입력한 내용이 드러난다.
		post: 사용자의 입력을 표준 입력(standard input)으로 넘겨주기 때문에 입력 내용의 길이에 제한이 없고 주소 표시줄에 보여지지 않는다.
name	폼의 이름 지정
action	태그 안의 내용을 처리할 서버 상의 프로그램을 지정
target	action 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

 

- <input> 태그에서 사용하는 속성

속성	설명
type = "hidden"	- 화면 상의 폼에는 보이지 않는다. - 폼을 서버로 전송할 때 서버로 함께 전송되는 요소 예시) <input type = "hidden" name = "이름" value ="서버로 넘길 값">
type = "password"	- 비밀번호 입력란 - 사용자가 입력하는 내용이 '*'로 표시된다.
type = "text"	한 줄짜리 텍스트 입력 필드
type = "search"	검색 필드
type = "url"	웹 주소 필드
type = "email"	메일 주소 입력 필드(형식 자동 체크)
type = "tel"	전화번호 입력 필드(사용자 입력을 체크하지는 않음)
type = "number"	숫자 입력 필드, 브라우저에 따라 스핀 박스로 표시됨
type = "range"	숫자 입력 필드, 슬라이드 막대를 이용해 숫자 입력
type = "radio"	여러 항목 중 하나만 선택할 때
type = "checkbox"	여러 항목 중 둘 이상을 선택할 때
type = "color"	색상 표에서 색상 선택
type = "date", "month", "week"	달력 이용해 날짜 입력 예시) <input type = "date | month | week" [value="기본 값" 속성= "속성 값">
type = "time", "datetime-local"	시간 입력
type = "submit", "reset"	- 폼 전송/리셋 버튼 - submit: 사용자 입력 내용을 서버로 전송 - reset: 사용자 입력 내용 전부 삭제 - value 속성을 이용해 버튼 표시 내용 지정
type = "image"	submit 버튼 대신 이미지 삽입
autofocus	페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시
placeholder	입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐
readonly	- 내용을 보기만 하고 입력하지 못하게 함 - 속성값 없이 'readonly'라고 작성
required	- 필수 필드 체크 - 속성 값 없이 'required'라고 작성
min, max, step	- max, min: 해당 필드의 최소, 최대값 - step: 허용된 범위 내의 숫자 간격
size, minlength, maxlength	- size: 텍스트 관련 필드에서 화면에 몇 글자까지 보이게 할 지 결정 - maxlength, minlength: 입력 가능한 최대, 입력해야 하는 최소 글자

 

* 여러 데이터 나열하여 보여주는 태그

<select>, <optgroup>, <option>	- 여러 옵션 중에서 선택(드롭다운 목록) - 공간을 최소한으로 사용하며 여러 옵션 표시 가능
<textarea>	- 텍스트 영역(여러 줄의 텍스트 입력 가능)

- <select> 태그 속성

속성	설명
size	화면에 표시될 드롭다운 메뉴의 항목 개수를 지정
multiple	브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다.

- <option> 태그의 속성

속성	설명
value	옵션을 선택했을 때 서버로 넘겨질 값을 지정한다.
selected	화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다.

- <textarea> 태그의 속성

속성	설명
name	다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정
cols	텍스트 영역의 가로 너비를 문자 단위로 지정
rows	텍스트 영역의 세로 길이를 줄 단위로 지정

* 기타

<button>	- 다양한 형태의 버튼 삽입 - CSS를 이용해 원하는 형태로 꾸밀 수 있음
<output>	계산 결과를 브라우저에 표시
<progress>	- 작업 진행 상태를 브라우저에 표시 - 값에는 특별한 단위가 없고 단위를 표시하지 않음
<meter>	전체 크기 중에서 얼마나 차지하는지 표현할 때 사용

- <button> 태그의 속성

속성	설명
submit	폼을 서버로 전송
reset	폼에 입력한 모든 내용 초기화
button	자체 기능 없음