05-3 input 태그의 주요 속성

HTML5에 와서 폼 태그는 더욱 강력해짐. 단순히 내용을 입력할 분만 아니라 입력란에 커서나 힌트를 표시할 수도 있고,

꼭 입력해야 하는 필드도 지정할 수 있음. 예전에는 자바스크립트로 실행한 것을 <input>태그의 속성만으로도 처리할 수 있음.

 

>>> 자동으로 입력 커서를 갖다 놓는 autofocus 속성

autofocus 속성을 사용하면 페이지를 불러오자마자 폼에서 원하는 요소에 마우스  포인터를 표시할 수 있음.

예전에 이 기능을 구현하려면 자바스크립트를 이용해야 했는데 HTML5에서는 autofocus라는 속성으로 쉽게 해결할 수 있음.

[기본형]<input type=텍스트-입력-필드 autofocus required>

 

>>>힌트를 표시해 주는 placeholder 속성

사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 만들 수 있음.

이렇게 하면 텍스트 필드 앞에 제목을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려 줄 수 있어서 편리함.

 

>>>읽기 전용 필드를 만들어 주는 readonly 속성

사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있음.

readonly 속성은 해당 필드를 읽기 전용으로 바꿈.

텍스트 필드나 텍스트 영역에 내용이 표시되어 있어도 사용자는 그 내용을 볼 수만 있고 입력은 할 수 없음.

[기본형] <input type=텍스트-입력-필드 readonly>

 

>>>필수 입력 필드를 지정하는 required 속성

내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데,

이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야함.

이렇게 반드시 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있음.