본문 바로가기
Frontend/HTML

[HTML]<input> 태그 속성

by joy_95 2021. 9. 25.

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> 태그 안에 속성 이름만 표시하면 된다.

 

반응형