[HTML] <input> 태그 : #1 유형과 속성

HTML을 작성하다보면 꼭 쓰게 되는 태그 중에 하나가

바로 <input> 태그이다.

 

오늘은 <input> 태그의 유형과 속성에 대해 알아보려한다.

해당 태그의 속성만 잘 사용해도 HTML에 작성된 input을 어느 정도 제어할 수 있다!

 

input

<input type="">

input 태그는 정보를 입력하기 위해 사용하는 태그이다.

 

<input> 태그의 기본 값은 text이지만,

어떤 유형을 지정해주냐에따라 다양한 형태로 사용할 수 있다.

 

(아래는 repl.it 에 미리 작성해놓은 input type들이다.  링크를 통해 체험해보자! 👇🏻)

repl.it

 

#1 Type

 

한눈에 파악하기위해 임의로 유형에 따라 묶어서 크게 분류했다 ! 하나씩 알아보자. 

- button 타입

• button 
• submit :  입력한 값들을 전송해주는 버튼
• checkbox : 단일 값을 선택하거나 해제할 수 있는 버튼
• radiio : 여러 값 중 하나를 선택할 수 있게하는 버튼
• range : 컨트롤러를 조절해 값을 지정하는 버튼
• color : 색을 지정할 수 있는 컬러 피커

 

- text 타입

• text : 한 줄의 텍스트를 입력받는 필드
• password : 입력 값을 가려주는 필드
• email : 유효성 검증 매개변수가 존재하며, 이메일에 적합한 키보드를 보여줌. (브라우저가 지원할 경우!)
• tel
• url : 검증 매개변수가 존재하며, 동적 키보드들을 지원하는 브라우저와 장치들에 관련된 키보드가 있음.

 

- number 타입

• number : 클릭 시 스피너(🔼, 🔽)를 표시하고, 지원되는 기본 확인을 추가함.
• month : 년도와 월을 선택할 수 있음.
• week : 선택한 날짜가 해당 년도에 몇번째주인지 보여줌.
• date : 년 / 월 / 일을 선택할 수 있도록 달력을 열어줌. (브라우저가 지원할 경우!)
• datetime
• datetime-local : 날짜와 함께 시간을 지정할 수 있음.
• time

 

- file 타입

• file : 파일을 지정할 수 있음.
• image

 

- etc.

• search : 검색문자열을 입력하는 한줄 텍스트 필드
• reset : 양식의 내용을 디폴트값으로 초기화하는 버튼 (권장되지 않음!)
• hidden : 보이지 않지만 값은 서버로 전송하는 컨트롤

 

#2 Attribute

input 태그를 유용하게 만들어주는 정말 다양한 속성들이 존재한다.

이번엔 위에서 알아본 타입에 따라 사용되는 속성들을 함께 파악해보자.

 

- 첫번째는 모두 / 거의 공통으로 쓰이는 속성이다 !! (⭐️⭐️⭐️⭐️⭐️)

 

all	autocomplete	양식 자동생성 기능 (form autofill) 암시
	autofocus	페이지가 로딩될때 양식 제어에 오토포커스
	disabled	양식 컨트롤이 비활성화되었는지의 여부
	form	컨트롤을 양식 요소와 연결
	name	input 양식 컨트롤의 이름. 이름/값 짝(pair)의 일부로서 양식과 함께 전송된다
	type	input 양식 컨트롤의 유형
	value	양식 컨트롤의 현재 값. 이름/값 짝(pair)의 일부로서 양식과 함께 전송된다

 

almost all	list	datalist 자동입력 옵션의 id 속성값
	readonly	불리언값. 이 값은 수정이 불가능함
	required	불리언값. 양식이 전송되기 위해서 반드시 입력하거나 확인이 필요한 값

(아래에서 중복하여 언급하지 않도록 하겠습니당)

 

 

- 두번째는 button 타입

submit	formaction	양식 전송시 URL 사용하기
	formenctype	양식의 데이터 인코딩 유형이 양식 전송시 사용될 것
	formethod	양식 전송시 HTTP 방식을 사용
	formnovalidate	양식 전송시 양식 컨트롤 확인을 무시하기
	formtarget	양식 전송시 브라우징 맥락

 

checkbox

checked

커맨드나 컨트롤이 체크 되었는지의 여부

 

radio

checked

커맨드나 컨트롤이 체크 되었는지의 여부

 

- 세번째는 text 타입

 

text	maxlength	value의 최대 길이 (문자수)
	minlenght	value의 최소 길이 (문자수)
	placeholder	양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용
	pattern	value 가 유효하기 위해 일치해야 하는 패턴
	size	컨트롤의 크기
	dirname	양식 전송시 요소의 방향성을 전송할 때 양식 필드의 Name

 

password	maxlength	value의 최대 길이 (문자수)
	minlength	value의 최소 길이 (문자수)
	placeholder	양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용
	size	컨트롤의 크기

 

email	multiple	불리언값. 여러 값을 허용할지의 여부
	size	컨트롤의 크기

 

tel	maxlength	value의 최대 길이 (문자수)
	minlength	value의 최소 길이 (문자수)
	placehodler	양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용
	size	컨트롤의 크기
	pattern	value 가 유효하기 위해 일치해야 하는 패턴

 

url	maxlength	value의 최대 길이 (문자수)
	minlength	value의 최소 길이 (문자수)
	placeholder	양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용

 

search	maxlength	value의 최대 길이 (문자수)
	minlength	value의 최소 길이 (문자수)
	placeholder	양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용
	dirname	양식 전송시 요소의 방향성을 전송할 때 양식 필드의 Name

 

- 네번째는 number 타입

 

numeric type	min / max	최소값 / 최대값
	step	유효한 증분적인 (Incremental)값

 

- 마지막으로 file 타입

 

file	accept	파일을 업로드 컨트롤에서 기대하는 파일 유형을 암시
	multiple	불리언값. 여러 값을 허용할지의 여부
	capture	파일 업로드 제어에서 input 방식에서 미디어 capture

 

image	src	이미지 출처의 주소에서 src 와 같은 속성
	alt	이미지 유형에 대한 대체 속성. accessibiltiy 측면에서 필요.
	height	이미지의 height 속성과 같음
	width	이미지의 width 속성과 같음
	formaction	양식 전송시 URL 사용하기
	formenctype	양식의 데이터 인코딩 유형이 양식 전송시 사용될 것
	formethod	양식 전송시 HTTP 방식을 사용
	formnovalidate	양식 전송시 양식 컨트롤 확인을 무시하기
	formtarget	양식 전송시 브라우징 맥락

 

 

<input> 태그의 유형과 속성을 전체적으로 한눈에 파악했으니 

다음 포스팅에서는 직접 속성을 활용하며 자세히 알아보자 🤔

---

: 입력 요소 - HTML: Hypertext Markup Language | MDN

 

 

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️

***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***