본문 바로가기
Front-End/HTML

HTML 태그 한 눈에 정리하기 2

by project100 2023. 2. 20.

<form> 에서 사용하는 태그

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

 

<input> 태그의 유형

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

 

<input> 태그의 속성

readonly 입력 필드를 읽기 전용으로 지정한다.
required 필수 입력 필드를 지정한다.
max 숫자 입력 필드에 최대 값을 설정한다.
min 숫자 입력 필드에 최소 값을 설정한다.
placeholder 입력 필드에 힌트 글을 출력한다.(입력하면 사라진다)
size 입력할 텍스트를 화면에 표시할 크기를 지정한다.
maxlength 텍스트 관련 입력 문자의 최대 개수를 지정한다.
minlength 텍스특 관련 입력 문자의 최소 개수를 지정한다.
autofocus 입력 받을 요소에 커서를 위치하게 한다.

'Front-End > HTML' 카테고리의 다른 글

HTML 태그 - form 2 (form 태그 안에 사용하는 태그)  (2) 2023.03.08
HTML 태그 - form  (0) 2023.02.21
HTML 태그 한 눈에 정리하기 1  (0) 2023.02.16
HTML 태그 - Lists  (0) 2023.02.14
HTML 태그- table 2  (0) 2023.02.14