input 태그에는 다양한 속성들이 존재하는데요 바로 한번 살펴볼까요

  1. readonly - 해당 필드를 읽기 전용으로 바꿉니다. 텍스트 필드나 텍스트 영역처럼 필드 안에 내용이 있으면서 사용자에게 내용을 보여주기만 하고, 사용자가 입력은 할 수 없게 하는 속성입니다.

readonly 는 불값을 가지기 때문에 true 또는 false 값을 지정해도 되고, 간단히 readonly 라고 쓰거나 readonly = " readonly" 라고 써도 true로 인식합니다.

  1. placeholder - input 요소의 필드 안에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 하는 것입니다.

placeholder속성을 이용하면 텍스트 필드 앞에 레이블을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려줄수 있습니다

  1. autofocue - 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서가 표시되도록 하는 것입니다.

마우스 커서가 표시되면 바로 입력할 수 있어서 아주 편리합니다. 이전에는 이렇게 하려면 자바스크립트를 이용해야 했는데, html5 autofocus 속성으로 쉽게 해결할 수 있습니다.

  1. autocomplete - 웹 브라우저의 자동 완성 기능은 사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우 이전에 입력했던 내용을 힌트로 보여줍니다.

autocomplete 속성을 이용해 폼에서 직접 자동완성기능을 끌 수 있습니다.

on / off / default 3가지 속성을 사용합니다.

  1. min, max, maxlength, step 속성

input 태그의 최솟값과 최댓값 그리고 최대글자 개수를 제한합니다

마지막 step 속성은 최솟값과 최댓값을 지정합니다 또한 단체주문 필드에서는 기본값을 10으로 하고 최댓값을 100으로 하면서 10단위로 크기 값을 늘릴 수 있게 지정하는 방법도 볼 수 있습니다.

  1. required 속성

submit 을 클릭하면 서버로 form을 전송하는대 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 합니다.

이때 required 속성을 지정하면 필수필드가 되는데 불값이기때문에 required = "required" 또는 required 라고만 하면됩니다.