form
- 웹 서버에 정보를 제출하기 위한 양식 범위를 정의
- <form>이 다른 <form>을 자식 요소로 포함할 수 없다.
| 속성 | 의미 | 값 | 기본값 |
| action | 전송한 정보를 처리할 웹페이지의 URL | URL | |
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off |
on |
| method | 서버로 전송할 HTTP 방식 | GET, POST |
GET |
| name | 고유한 양식의 이름 | ||
| novalidate | 서버로 전송 시 양식 데이터의 유효성을 검사하지 않도록 지정 | ||
| target | 서버로 전송 후 응답받을 방식을 지정 | _self, _blank |
_self |
input
사용자에게 입력 받을 데이터 양식
| 속성 | 의미 | 값 | 기본값 | 특징 |
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off |
on |
|
| autofocus | 페이지가 로드될 때 자동으로 포커스 | Boolean | 문서 내 고유해야 함 | |
| checked | 양식이 선택되었음을 표시 | Boolean | type 속성 값이 radio, checkbox 일 경우만 |
|
| disabled | 양식 비활성화 | Boolean | ||
| form | <form>의 id 속성 값 |
해당 <form>의 후손이 아닐 경우만 | ||
| list | 참조한 <datalist>의 id 속성 값 |
|||
| max | 지정 가능한 최대 값 | Number | type 속성 값이 number 일 경우만, min 속성보다 큰 값만 허용 |
|
| min | 지정 가능한 최소 값 | Number | type 속성 값이 number 일 경우만, max 속성보다 작은 값만 허용 |
|
| maxlength | 입력 가능한 최대 문자 수 | Number | 524288 |
type 속성 값이 text, email, password, tel, url 일 경우만 |
| multiple | 둘 이상의 값을 입력할 수 있는지 여부 | Boolean | type 속성 값이 email, file 일 경우만, email 일 경우 , 로 구분 |
|
| name | 양식의 이름 | |||
| placeholder | 사용자가 입력할 값의 힌트 | type 속성 값이 text, search, tel, url, email 일 경우만 |
||
| readonly | 수정 불가한 읽기 전용 | Boolean | ||
| step | 유효한 증감 숫자의 간격 | Number | type 속성 값이 number, range 일 경우만 |
|
| src | 이미지의 URL | URL | type 속성 값이 image 일 경우만 |
|
| alt | 이미지의 대체 텍스트 | type 속성 값이 image 일 경우만 |
||
| type | 입력 받을 데이터의 종류 | 별도 정리 | text |
|
| value | 양식의 초기 값 |
데이터 종류(type)의 값(values)
type 속성에 입력할 수 있는 값의 목록
<input type="button" />
<input type="text" />
<input type="checkbox" />
| 값 | 데이터 종류 | 특징 |
| button | 일반 버튼 | <button> 처럼 사용 |
| checkbox | 체크박스 | |
| color | 색상 | IE 지원 불가 |
| 이메일 | ||
| file | 파일 | |
| hidden | 보이지 않지만 전송할 양식 | value 속성으로 값을 지정 |
| image | 이미지 제출 버튼 | <img /> 처럼 사용 |
| number | 숫자 | |
| password | 비밀 | 가려지는 양식 |
| radio | 라디오 버튼 | 같은 name 속성 그룹 내 하나만 선택 가능 |
| range | 범위 컨트롤 | min, max, step, value (기본값) 속성 사용 |
| reset | 초기화 | 해당 <form> 범위 내 모든 양식 |
| search | 검색 | |
| submit | 제출 버튼 | 해당 <form> 범위 내 고유한 양식 |
| tel | 전화번호 | |
| text | 일반 텍스트 | |
| url | 절대 URL |
label
for속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함한다.- 라벨 가능 요소:
button,input,progress,select,textare
| 속성 | 의미 |
| for | 참조한 라벨 가능 요소의 id 속성 값 |
<!-- 라벨 가능 요소를 참조 -->
<input type="checkbox" id="user-agreement" />
<label for="user-agreement">동의하십니까?</label>
<!-- 라벨 가능 요소를 포함 -->
<label><input type="checkbox" />동의하십니까?</label>
출처/참고