🌎 Web/HTML
[HTML] form, input 태그의 모든 것
오늘 ONEUL
2022. 3. 17. 00:45
form 요소
<form> 태그
- 사용자로부터 입력받고, 입력받은 데이터를 서버로 보낼 수 있다.
- action 속성은 입력받은 데이터를 처리할 url, 파일위치, 특정 주소값등을 명시한다.
- method 속성은 데이터 전송 방식을 명시한다. GET방식과 POST 방식이 있다.
- method 속성이 생략되거나 빈 값이면 GET 방식으로 설정된다.
<form> 요소
| 요소 | 설명 |
| <input> | 다양한 타입의 input 요소를 활용하여 사용자로부터 입력을 받을 수 있다. |
| <label> | 여러 form 요소에 대한 타이틀 역할로 label을 정의한다. |
| <select> | 드롭다운 목록 |
| <textarea> | 여러 줄 입력 |
| <button> | 클릭 가능한 버튼 |
input 요소
<input> 유형(type)
| 유형(type) | 설명 |
| <input type="text"> | 한 줄 텍스트 입력 |
| <input type="password"> | 비밀번호 |
| <input type="number" | 숫자 입력 |
| <input type="email"> | 이메일 입력 |
| <input type="tel"> | 전화번호 입력 |
| <input type="range"> | 범위 입력 |
| <input type="search"> | 검색어 입력 |
| <input type="date"> | 날짜 입력 |
| <input type="datetime-local"> | 날짜와 시간 입력 |
| <input type="time"> | 시간 입력 |
| <input type="month"> | 연도와 월 입력 |
| <input type="week"> | 연도와 주 입력 |
| <input type="color"> | 색상 입력 |
| <input type="url"> | URL 주소 입력 |
| <input type="image"> | 이미지 버튼 입력 |
| <input type="button"> | 버튼 입력 |
| <input type="submit"> | 전송 버튼 |
| <input type="reset"> | 리셋 버튼 |
| <input type="file"> | 파일 선택 |
| <input type="hidden"> | 숨겨진 입력 |
| <input type="checkbox"> | 체크박스 |
| <input type="radio"> | 라디오 버튼 |
<input> 속성
| 속성 | 설명 |
| value | 입력창의 초기값 지정 |
| name | key:value 형태로 전송될 때 key name |
| readonly | 읽기 전용(전송할 경우 초기값 전송됨) |
| disabled | 사용 불가(전송도 되지 않음) |
| checked | 미리 선택 지정 |
| max | 입력창의 최대값을 지정 |
| maxlength | 입력창의 최대 문자 수를 지정 |
| min | 입력창의 최소값을 지정 |
| pattern | 입력값을 체크할 정규 표현 지정 |
| required | 입력창이 필수임을 지정 |
| size | 입력창의 너비(문자 단위)지정 |
| step | 입력창의 정규식 지정 |
| multiple | 입력창의 다중선택 지정 |
| placeholder | 입력창의 예상 값 또는 간단한 설명 지정 |
※ 참고자료