[HTML] form 태그 / input 태그 타입 정리

 

자주 사용하는 form 태그와 input 태그의 타입을 정리해보자

 

 

 

[ form에서 사용하는 태그 ]

 

종류	설명
<form>	폼의 시작과 끝을 만든다.
<fieldset>	폼 요소를 그룹으로 묶는다.
<legend>	필드셋에 제목을 붙인다.
<input>	사용자가 내용을 입력할 필드를 삽입한다.
<select>, <option>	드롭다운 목록을 삽입한다.
<textarea>	텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입한다.
<datalist>	데이터 목록을 삽입한다.

 

 

 

[ input 태그의 유형 ]

 

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

 

 

 

[ input 태그의 속성 ]

 

종류	설명
autofocus	웹 문서가 열리면 입력 필드 안에 마우스 포인터 표시
placeholder	텍스트 필드에 힌트를 표시
readonly	입력 필드를 읽기 전용으로 지정
required	필수 입력 필드를 지정
max	숫자 입력 필드에서 최댓값 지정
mix	숫자 입력 필드에서 최솟값을 지정
step	숫자 입력 필드에서 증감할 간격 지정
maxlength	텍스트 관련 필드에서 입력할 수 있는 최대 길이 지정
minlength	텍스트 관련 필드에서 입력할 수 있는 최소 길이 지정
size	텍스트 관련 필드에서 화면에 표시할 크기 지정
list	연결할 데이터 목록 지정