HTML5+CSS3]4-3 <input>태그의 다양한 속성

https://www.youtube.com/user/easyspub

 

easyspub

⭐입력란에 커서나 힌트를 표시하고 필수로 입력해야 하는 필드를 지정하는 등 좀 더 세밀하게 폼을 조정할 수 있다.

 

✔autofocus속성 : 입력 커서 표시하기

👉페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다

 

✔placeholder속성: 힌트 표시하기

입력란에는 적당한 힌트 내용을 표시할 수 있다.

필드를 클릭하면 내용이 사라질 수 있다.

 

✔readonly속성 : 읽기 전용 필드 만들기

사용자가 입력하지 못하고 읽게만 만든다. 해당 필드를 읽기 전용으로 바꿈

간단히 readonly라고만 쓰거나 readonly="readonly" 라고 써도 readonly="true"로 인식한다.

 

✔required속성 : 필수 필드 지정하기

required속성을 지정해 필수 필드로 만들어서 필요한 내용이 모두 채워지게 한다.

속성을 사용할 때 required="required" 또는 required 라고 입력한다.

필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저들마다 다르게 나타난다.

 

✔min, max, step 속성

min속성과 max속성은 각각 해당 필드의 최솟값과 최댓값을 지정한다.

step속성은 허용된 범위 내의 숫자의 일정한 간격을 가르킨다.

<input>태그의 유형이 date이거나 datetime, datetime-local, month, week, time, number, range일 경우에만 사용할 수 있다.

 

✔size, minlength, maxlength 속성 : 길이, 최소 길이, 최대 길이 속성

size속성 : 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할지 지정

maxlength속성 : 최대 몇 글자까지 입력할 수 있는지 지정

minlength속성 : 최소 몇 글자 이상을 입력해야 하는지 지정, 최신 크롬과 안드 브라우저에서만 지원

 

✔<input>태그에서 사용할 수 있는 속성