Front-End/HTML

05장 태그정리

hoya7788 2023. 4. 14. 13:15

~~~</>폼에서 사용하는 태그~~~

<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 : 국제 표준시로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣음

datetime-local : 사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣음

submit : 전송 버튼을 넣음

reset : 리셋 버튼을 넣음

image : submit 버튼 대신 사용할 이미지를 넣음

button : 일반 버튼을 넣음

file : 파일을 첨부할 수 있는 버튼을 넣음

hidden : 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만듦

 

~~~<input> 태그의 속성~~~

autofocus : 웹 문서가 열리면 입력 필드 안에 마우스 포인터를 표시함

placeholder : 텍스트 필드에 힌트를 표시함

readonly : 입력 필드를 읽기 전용으로 표시함

required : 필수 입력 필드를 지정함

max : 숫자 입력 필드에서 최댓값을 지정

min : 숫자 입력 필드에서 최솟값을 지정

step : 숫자 입력 필드에서 증감할 간격을 지정

maxlength : 텍스트 관련 필드에서 입력할 수 있는 최대 길이를 지정함

minlength : 텍스트 관련 필드에서 입력할 수 있는 최소 길이를 지정함

size : 텍스트 관련 필드에서 화면에 표시할 크기를 지정

list : 연결할 데이터 목록을 지정함