사용자에게 입력 받을 데이터 양식.
| 속성 | 의미 | 값 | 기본값 | 특징 |
| 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속성 값이 eamil, file일 경우만, email일 경우 ","로 구분 | |
| name | 양식의 이름 | |||
| placeholder | 사용자가 입력할 값의 힌트 | type속성 값이 text, search, tel, url, email일 경우만 | ||
| readonly | 수정 불가한 읽기 전용 | Boolean | ||
| step | 유효한 증감 숫자의 간격 | Number | 1 | type속성 값이 number, range일 경우만 |
| src | 이미지의 URL | URL | type속성 값이 image일 경우만 | |
| alt | 이미지의 대체 텍스트 | type속성 값이 image일 경우만 | ||
| type | 입력 받을 데이터의 종류 | 별도 정리 | text | |
| value | 양식의 초기 값 |
1. 태그 연결
팁을 말하자면 form태그 안에는 form이 들어갈 수 없지만, form안에 입력되어있지 않는 태그도 form과 연결 할 수 있는 방법은 있다.
<form action="/login" id = "login-form">
</form>
<input type="text" form = "login-form">이와같이 입력하면 input태그는 form태그 안에 있는거나 마찬가지가 된다.
2. 입력 힌트
<input type="number" placeholder="숫자를 입력해주세요!">다음은 입력할수있는범위는 숫자만 가능하고, placeholder로 통해 텍스트칸에 무엇을 입력해야하는지 안내를 해준다.
3. image태그의 다른 사용 방법
<form action="/login">
<input type="image" src="./images/heropy.png" alt = "HEROPY">
</form>image태그가 아닌 input태그로 image를 설정하고 이미지를 클릭하면 login화면으로 이동하게 만드는 폼도 가능하다.
4. reset 기능
<body>
<form action="/login">
<input type="text" name = "id">
<input type="password" name = "pw">
<input type="submit" vlaue = "log-in">
<input type="reset" value = "re-set">
</form>
<input type="text">
</body>reset 버튼은 form태그안에있는것만 해당이 된다.
'HTML > 요소' 카테고리의 다른 글
| 양식 - BUTTON (0) | 2021.01.05 |
|---|---|
| 양식 - LABEL (0) | 2021.01.05 |
| 양식 - FORM (0) | 2021.01.05 |
| 표 콘텐츠 - HEAD, TBODY, TFOOT (0) | 2021.01.05 |
| 표 콘텐츠 - COLGROUP, COL (0) | 2021.01.05 |