[HTML] <input> 태그 : #1 유형과 속성
HTML을 작성하다보면 꼭 쓰게 되는 태그 중에 하나가
바로 <input> 태그이다.
오늘은 <input> 태그의 유형과 속성에 대해 알아보려한다.
해당 태그의 속성만 잘 사용해도 HTML에 작성된 input을 어느 정도 제어할 수 있다!
input
<input type="">input 태그는 정보를 입력하기 위해 사용하는 태그이다.
<input> 태그의 기본 값은 text이지만,
어떤 유형을 지정해주냐에따라 다양한 형태로 사용할 수 있다.
(아래는 repl.it 에 미리 작성해놓은 input type들이다. 링크를 통해 체험해보자! 👇🏻)
repl.it
inputtype.emayom.repl.co
#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 | 컨트롤의 크기 |
| 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
HTML
요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다.
developer.mozilla.org
⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :) ⚠️
*** 혹시라도 잘못된 정보가 있다면 언제든지 알려주시면 감사하겠습니다 ! ***