HTML 입력 관련 태그 모음
button
- 버튼을 위한 태그
- 자동으로 닫는 태그 X
- 시멘틱 o
- input은 value에 문자열만 들어가서 이미지는 못보냄, button은 태그의 내용란에 img태그로 이미지를 넣는게 가능함
- 속성
*autofocus : 페이지가 로드되었을 때 자동으로 포커스를 가질 것인가에 대한 속성. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
*disabled : 해당 입력 태그를 비활성화 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
type : 버튼이 동작할 방식을 지정
submit : [기본값] 양식 제출 버튼으로 작동
button : 아무런 기능이 없는 버튼으로 작동
reset : 초기화 버튼으로 작동
form(양식)
- 서버로 전송하고자 하는 사용자 입력 값을 받는 태그들(input, select, textarea)을 자식, 자손으로 가짐
- 자동으로 닫는 태그 x
- 시멘틱 o
- 하나의 양식 태그는 서로 관련있는 입력 태그만 가져야 함
- 양식 태그들끼리는 선조, 부모, 자식, 자손 관계를 형성하면 안됨
input
- 사용자로부터 입력값을 받기 위해 사용
- 자동으로 닫는 태그 o
- 시멘틱 o
- 속성
name : [필수] 가지고 있는 값을 서버로 전송할 때 식별자. 특별한 경우가 아니라면 해당 양식 내에서 고유해야 함
type : [필수]
*text : [기본값] 일반 문자열
*button : 요청을 보내지 않는 일반 버튼
*checkbox : 여부 선택을 위한 체크 박스
color : 색상 선택 데이터 전송 시 HEX컬러 문자열로 전송
date : 날짜 선택. 모바일에선 년/월/일 선택 키패트들 표시해주기도 함
datetime-local : 날짜 및 시간 선택. 모바일에선 맞춤형 키패드를 표시해주기도 함
*emial : 이메일 문자열, 모바일 기기에서는 앳(@), 마침표(.), 도메인 TLD(.com 등)을 표시해주기도 함
*file : 파일 선택
파일을 전송하기 위해서는 <form> 태그의 enctype 속성 값이 multipart/from-data이고 method 속성 값이 post여야 함
*hidden : 숨겨진 상태. 의도적으로 보이지 않게 하기 위해 사용.
값의 형태는 문자열(text), 보통 보안을 위한 토큰(Salt)값을 저장하기 위해 사용
number : 숫자 입력. 자연상수(e), 소수점(.)등을 허용함으로 유의해야 함
*password : 비밀번호 입력. 입력한 값이 애스터리스크(*)로 대치되어 표시된다.
radio : 여러 선택지 중 하나를 선택하기 위한 라디오 박스.
name 속성 값이 같은 radio 중 하나밖에 선택할 수 없다
range : 숫자를 선택할 수 있는 막대
reset : 양식 태그내에 존재하는 입력 태그의 값을 초기화하는 버튼
search : 검색을 위한 입력. 검색창의 의미를 부여하는 시멘틱이 있을 뿐, 외관 및 기능상 text와 차이가 없다.(브라우저 별로 돋보기 아이콘을 추가하는 경우가 있음)
*submit : 해당 양식을 제출하기 위한 버튼
tel : 연락처 입력. 모바일 기기에서 숫자와 별표(*), 샾(#)을 표시해주기도 함
url : URL을 위한 텍스트 입력. URL 입력을 위한 시멘틱이 있을 뿐, 외관 및 기능상 text와 차이가 없다.
accept : type이 file일 때 허용할 확장자 혹은 MIME 타입을 지정한다.
확장자는 마침표(.)를 적고 확장자를 적는 형식으로 작성
MIME의 후행 타입은 애스터리스크(*)를 활용할 수 있다.
콤마(,)를 구분하여 여러개의 타입을 나열할 수 있다.
autocomplete : (어떠한 형태의) 자동완성기능을 사용할 것인가에 대한 설정
on : 일반 자동완성기능 사용. 해당 입력 태그에 입력했던 적이 있던 내용을 기반으로
off : 자동완성기능 x
name : 이름 자동 완성
new-password : 새로운 비밀번호 자동 완성(생성).
one-time-code : 일회용 비밀번호(OTP, One-Time-Password) 자동 완성.
*autofocus : 페이지가 로드되었을 때 자동으로 포커스를 가질 것인가에 대한 속성. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
(마우스 커서로 클릭했을 때 깜빡이는거)
*checked : type 속성 값이 checkbox, radio일 때 기본적으로 체크된 상태로 설정 <!--checkbox의 초기값같은 개념-->
*disabled : 해당 입력 태그를 비활성화 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
max : type 속성 값이 number, range 등일 때의 최댓값
min : type 속성 값이 number, range 등일 때의 최소값
*maxlength : 문자열의 최대 길이
*minlength : 문자열의 최소 길이
multiple : type 속성값이 file일 때, 여러 개의 파일을 선택할 수 있게 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
*placeholder : 값이 비어있을 때 대신하여 보여줄 텍스트.
*readonly : 읽기 전용 설정. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
*required : 값이 비어있을 수 없음에 대한 설정. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
spellcheck : 브라우저에 내장된 철자 확인 기능을 사용할 것인가에 대한 설정.
default : [기본값] 브라우저 설정을 따름
true : 강제 사용
false : 강제 미사용
step : type 속성 값이 range일 때 한 틱(Tick)에 변화할 단계 값.
*value : 해당 입력 태그의 값. 단, 버튼 형식(button, reset, submit 등)일 때에는 표시할 문자열로 작동.
- <form> 태그의 자식, 자손이어야 의미를 가짐
label
- 입력 태그와 관련하여 이에 관한 설명을 작성하고 연결시키기 위해 사용
- 자동으로 닫는 태그 x
- 시멘틱 o
- label 태그는 연결된 입력 태그에 대한 설명을 문자열로 가짐, 스크린 리더가 연결된 태그에 대한 설명으로 label 내부의 내용을 사용하므로 반드시 작성해야 함, 누락시 HTML5 표준 위반
- 작성 방법은 두개
label 태그의 for 속성 값을 입력 태그가 가지는 id 속성 값과 일치시키는 방법
<label for="emailInput">이메일</label>
<input type="email" id="emailInput" name="email" placeholder="이메일 입력">id 속성이 가지는 속성값은 하나의 HTML 문서 내에서 중복되면 안되서 각별히 유의
label 태그가 직접 입력 태그를 자식, 자손으로 가지게 하는 방법
<label for="">
<span>이메일</span>
<!-- span은 별 뜻 없는 건데 그렇다고 안쓰면 HTML5 표준 위반이라고 함-->
<input type="email" name="email" placeholder="이메일 입력">
</label>optgroup(Option Group)
- 서로 관련있는 option태그를 묶음
- 자동으로 닫는 태그x
- 시멘틱 o
- 하나 이상의 option 태그가 서로 유관함을 알리는 시멘틱이 있으나, 선택이 불가하고 시각적 효과 외에 특별한 기능을 가지지는 않는다.
- select 태그의 자식이어야함, 자식으로 option 태그를 가져야 함
- 속성
label : [필수]표시할 텍스트를 지정
disabled : 해당 입력 태그를 비활성화 한다. <optgroup>태그가 비활성화 될 경우, 이가 포함하는 <option>태그들도 함께 비활성화 된다.
속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
option
- <select>가 가지는 실질적인 값이 있는 항목 태그
- 자동으로 닫는 태그 X
- 시멘틱 o
- <select>나 <optgroup>의 자식이어야 함
- 속성
*disabled : 해당 입력 태그를 비활성화 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
selected : 초기에 선택된 상태로 지정한다. 속성 값을 가지지 않으며 부여된 것으 로 의미를 가짐
value : 실질적으로 서버에 전송될 값. 생략할 경우 <option>태그가 가지는 내부 내용을 전송한다.
select
- 드롭다운(Drop Down)방식 혹은 리스트(List) 방식의 항목선택을 위한 입력태그
- 자동으로 닫는 태그 X
- 시멘틱 o
- 직접 값을 가지지 않음, 자식, 자손으로 값을 직접 가지는 <option> 태그를 가짐
- 속성
성
name : [필수] 가지고 있는 값을 서버로 전송할 때 식별자. 특별한 경우가 아니라면 해당 양식 내에서 고유해야 함
*autofocus : 페이지가 로드되었을 때 자동으로 포커스를 가질 것인가에 대한 속성. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
(마우스 커서로 클릭했을 때 깜빡이는거)
*disabled : 해당 입력 태그를 비활성화 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
multiple : 여러 개의 <option>을 선택할 수 있게 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
*required : 값이 비어있을 수 없음에 대한 설정. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
textarea
- 개행이 가능한 문자열 값을 입력받기 위한 태그
- 자동으로 닫는 태그 X
- 시멘틱 o
- input과 다른 점은 쓰는 중에 엔터(줄바꿈)가 가능함, 초기값 설정할 때 value 대신 태그 내용에 직접 적어야 함
- 속성
name : [필수] 가지고 있는 값을 서버로 전송할 때 식별자. 특별한 경우가 아니라면 해당 양식 내에서 고유해야 함
autocomplete : (어떠한 형태의) 자동완성기능을 사용할 것인가에 대한 설정
on : 일반 자동완성기능 사용. 해당 입력 태그에 입력했던 적이 있던 내용을 기반으로
off : 자동완성기능 x
*autofocus : 페이지가 로드되었을 때 자동으로 포커스를 가질 것인가에 대한 속성. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
(마우스 커서로 클릭했을 때 깜빡이는거)
cols : 초기에 설정될 열의 개수(가로방향 글씨 개수)를 지정. 자연수여야 함. 기본값은 20
*disabled : 해당 입력 태그를 비활성화 한다. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
*maxlength : 문자열의 최대 길이
*minlength : 문자열의 최소 길이
*placeholder : 값이 비어있을 때 대신하여 보여줄 텍스트.
*readonly : 읽기 전용 설정. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
*required : 값이 비어있을 수 없음에 대한 설정. 속성 값을 가지지 않으며 부여된 것으로 의미를 가짐
rows : 초기에 설정될 행의 개수(세로방향 글씨 개수)를 지정. 자연수여야 함. 기본값은 2
spellcheck : 브라우저에 내장된 철자 확인 기능을 사용할 것인가에 대한 설정.
default : [기본값] 브라우저 설정을 따름
true : 강제 사용
false : 강제 미사용