[HTML] <form> 태그, <input> 태그

<form> 태그

폼은 정보를 저장하거나, 검색, 수정하는 일에 주로 쓰인다. 이러한 일들을 서버 데이터 베이스를 기반으로 한다.

 

<form> 속성

method

사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정

속성값

get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다.

post - 사용자가 입력한 내용이 드러나지 않음

name

폼의 이름을 지정

action

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

target

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

autocomplete

자동 완성 기능이라고 하며 사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우, 이전에 입력했던 내용을 힌트로 보여줌. 기본적으로는 on 상태임.

---

<label> 태그

보통 <input> 옆에 붙인다. label 태그를 이용해야 체크박스 버튼 및 라디오 버튼 이용시 텍스트를 클릭해도 선택됨.

<label for="id이름"><input id="id이름" type=""/></label>

<fieldset>, <legend> 태그

폼 요소 그룹으로 묶기

<fieldset>
	<legend>fieldset제목</legend>
</fieldset>

---

<input> 태그

웹에서의 폼은 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다.

 

<input> 속성

id

폼 요소를 구분하기 위해 사용

size

필드의 길이를 지정하는 속성

type (중요!!!☆)

사용자가 입력할 수 있는 형태 지정

type 유형

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

autofocus

입력 커서 표시하기

ex) <input type="text" autofocus required>

placeholder

힌트 표시

readonly

읽기 전용 필드 만들기, 사용자가 입력하지 못함

required

필수 입력 필드 지정

min, max, step

필드의 최솟값과 최댓값 지정

size, minlength, maxlength 

텍스트의 길이 조건, 길이, 최소길이, 최대길이 속성

---

참고문헌

Do it! HTML5+CSS3 웹 표준의 정석