autofocus 속성 - 입력 커서 표시하기
페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다.
placeholder 속성 - 힌트 표시하기
사용자가 텍스트를 입력할 때 도움이 되도록 입력란에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다.
readonly 속성 - 읽기 전용 필드 만들기
입력란에 사용자가 입력하지 못하고 읽게만 만든다.
required 속성 - 필수 필드 지정하기
내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데
이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해준다.
min, max, step 속성 - 최솟값, 최댓값, 간격
<input> 태그의 유형이 date, datetime, datetime-local, month, week, time, number, range일 경우에만 사용할 수 있다.
min, max는 최솟값, 최댓값을 지정
step은 일정한 간격을 조절할 수 있다.
size, minlength, maxlength 속성 - 길이, 최소 길이, 최대 길이 속성
size - 필드에 몇글자까지 보이게 할지 지정
minlength - 최소 몇글자 이상을 입력해야하는지
maxlength - 최대 몇글자까지 입력할 수 있는지
그외 속성들
속성 | 설명 |
formaction | 실행할 프로그램을 연결한다. type="submit"이나 type="image"일 때 사용할 수 있다. |
formenctype | 서버로 폼을 전송했을 때 폼 데이터를 어떤 방식으로 해석할 것인지 지정한다. type="submit"이나 type="image"일 때 사용할 수 있다. |
formmethod | 서버로 폼을 전송하는 방식을 지정한다.(get, post 등) 이미 <form> 태그 안에서 지정한 방식이 있어도 그 방식은 무시된다. |
formnovalidate | <form> 태그 안에 novalidate라는 속성이 있어서 서버로 전송할 때 폼 데이터가 유효한지 여부를 표시할 수 있는데 <input> 태그 안에서도 formnovalidate 이용해 유효성 여부를 표시할 수 있다. |
formtarget | 폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 타깃을 지정한다. |
height, width | type="image"일 때 이미지의 너비와 높이를 지정한다. |
list | <datalist>에 미리 정의해 놓은 옵션 값을 <inpu>안에 나열해 보여준다. |
multiple | type="email"이나 type="file"일 때 두 개 이상의 값을 입력한다. <input> 태그 안에 속성 이름만 표시하면 된다. |
반응형
'Frontend > HTML' 카테고리의 다른 글
[HTML] 드롭다운 목록(select, option, datalist optgroup, textarea) (0) | 2021.09.26 |
---|---|
[HTML] form 이용해서 상품 주문서 작성해보기 (0) | 2021.09.25 |
[HTML] <input> 태그의 type (0) | 2021.09.25 |
[HTML] 기본form 만들기(<form>, <label>, <fieldset>, <legend>) (0) | 2021.09.25 |
[HTML] html이란?/html 기본 구조 (0) | 2021.09.21 |