[HTML 정리] 폼 태그, input 태그

 

 

 

폼

 

로그인, 회원가입과 같은 정보를 보내는 요소

<form [속성=”속성값”]>여러 폼 요소</form>

 

 

폼 속성

method	입력한 정보를 서버쪽으로 어떻게 넘겨줄지를 정한다 get : 정보가 주소표시줄에 드러남 (head) post : 입력한 내용이 드러나지 않음 (body)
name	자바 스크립트로 폼을 제어할 때 폼의 이름을 지정
action	처리해 줄 서버 프로그램 지정
target	action 에서 지정한 파일을 다른 창에서 열게함

 

 

 

폼에서 사용하는 태그

 

<textarea></textarea>	여러줄을 입력하는 텍스트 영역 (cols, rows 속성으로 너비, 몇줄을 표시할 지 지정)
<select></select>	드롭다운 목록의 시작, 끝 표시 size : 화면에 표시할 드롭다운 항목 개수 multiple : 드롭다운 목록에서 둘 이상의 항목을 선택
<option></option>	<select> 태그 내에서 사용. 드롭다운 목록의 항목 value : 서버로 넘겨줄 값 지정 selected : 기본 선택
<datalist></datalist>	데이터 목록의 시작과 끝을 표시 (option으로 항목)
<button></button>	버튼 (submit, reset, button)

 

 

 

 

input

 

검색 상자나 로그인 버튼과 같은 사용자가 입력하는 부분

<input type = “타입”></input>

 

 

 

input 타입

text	텍스트 박스
password	비밀번호 (입력하면 *** 처럼 보인다)
search	검색 상자
url	url 주소를 입력할 수 있는 박스
email	이메일 주소를 입력할 수 있는 박스
tel	전화번호를 입력할 수 있는 박스
checkbox	체크박스 (다중 선택)
radio	라디오 버튼 (1개만 선택)
number	숫자 조절 스핀 박스
range	숫자 조절 슬라이드 막대

date	날짜 (년, 월, 일)
month	날짜 (년, 월)
week	날짜 (년, 주)
time	시간 (시, 분, 초, 분할 초)
datetime	날짜 + 시간 (국제 표준 시)
datetime-local	날짜 + 시간 (사용자의 지역 기준)
submit	전송 버튼
reset	리셋 버튼
image	submit 대신 사용할 이미지를 넣는다
button	일반 버튼

file	파일 첨부 버튼
hidden	사용자는 보이지 않지만 서버로 넘겨주는 값이 있는 필드

 

+<label></label> input 태그 앞 또는 뒤에 입력하여 레이블을 붙일 수 있다

 

 

 

text, password 속성

 

size : 텍스트, 비밀번호 길이 지정. 화면에 몇글자가 보이게 할것인지

value : 자동으로 해당 값이 입력되어 있음

maxlength : 최대 문자 수

 

 

 

 

checkbox, radio 속성

 

value : 선택한 버튼을 서버에게 알려줄 떄 넘길 값 (필수 속성)

checked : 기본으로 선택되어 있는 값 설정

 

 

 

 

number, range 속성

 

min : 최소값 (기본 0)

max : 최대값 (기본 100)

step : 숫자 간격

value : 필드에 표시할 초기값

 

 

 

기타 속성

 

autofocus : 페이지를 불러오자마자 마우스 포인터가 위치함

placeholder : 텍스트박스에 미리보기, 힌트 내용을 보여줌

readonly : 읽기 전용 필드

required : 필수 입력 필드

 

 

 

 

 

-Doit! HTML+CSS+자바스크립트 웹표준의 정석 책으로 공부하였습니다