html5 태그 input type 속성
■ 사용자로 하여금 입력을 받기 위해서 input type 태그를 이용하는데요. input 태그의 속성에 대해서 몇 가지 정리해보려고 합니다. 여기에서 정리할 내용을 예전에는 자바스크립트를 이용해서 처리해야 했지만, html5에서는 간단하게 input 태그의 속성으로 처리할 수 있게 됐습니다. 유용하게 사용할 속성들 몇 가지를 정리해보겠습니다. 속성의 정의를 살펴보고, 간단하게 예제를 만들어 볼게요.
1. readonly
단어의 뜻에서 알 수 있듯이 단순하게 읽기만 가능하게 설정하는 속성입니다. 텍스트 필드에 내용이 있지만, 사용자가 이 내용을 수정할 수 있는 건 아니고 단순하게 읽기만 할 수 있게 하는 겁니다.
■ 속성을 적용하는 방법은 간단합니다. input type 태그 안에 "readonly"만 입력하면 됩니다.
■ 이렇게 text 필드 안에 value 값이 입력돼서 출력되는데요. 이 내용은 읽기만 할 수 있고, 수정 삭제는 안 됩니다.
2. placeholder
이 속성은 텍스트 입력란에 희미하게 입력할 내용의 힌트 등이 나타나도록 하는 건데요. 예를 들어 주민번호 입력란에 희미하게 숫자만 입력하라는 글자가 보이도록 하는 건데요. 예제를 보겠습니다.
■ 태그 안에 placeholder="내용"을 입력하시면 되구요.
■ 위 그림처럼 입력한 내용이 희미하게 보이는 속성입니다.
3. autofocus
input type 태그를 이용해서 입력란을 만들고, 웹 브라우저에서 열어서 입력하기 위해서는 마우스 커서를 입력란으로 이동시켜야 하는데요. 이런 번거로운 과정을 거치지 않아도 웹 페이지를 열면 자동으로 원하는 곳에 마우스 커서를 위치하게 해서 바로 입력할 수 있도록 하는 기능입니다.
■ 역시 태그 안에 autofocus 속성만 입력해주시면 되구요.
■ 그림에서 잘 보이려나 모르겠네요. 소스를 웹 페이지에서 열어보면 그림처럼 자동으로 해당 입력란에 마우스 커서가 위치하게 됩니다.
4. autocomplete
이 속성은 '자동완성' 기능인데요. 어느 웹 페이지에서 로그인하기 위해서 아이디를 입력할 때 기존에 입력했던 아이디가 자동으로 나타나는 거 보신 적이 있을 겁니다. 그 기능이에요. 즉, 기존에 입력했던 내용을 저장하고 있다가 비슷한 단어가 입력되면 자동으로 저장되어 있던 단어들이 나타나게 하는 기능입니다.
■ 자동완성 지정은 autocomplete= "on/off"중 골라서 사용하시면 됩니다.
5. required
이 속성은 필수 입력사항을 꼭 입력해야 다음 단계로 넘어갈 수 있도록 하는 기능인데요. 예를 들어서 본인을 확인하기 위해서는 주민번호는 필수로 입력해야 하잖아요? 그런데 주민번호를 입력하지 않고 다음 단계를 진행하려고 하면 메시지가 출력되면서 진행이 되지 않는 상태로 만드는 속성입니다.
■ 이 속성을 지정하는 방법도 역시 태그 안에 입력만 해주면 됩니다.
이렇게 해서 html5의 input type의 대표적인 속성 몇 가지를 알아봤는데요. 응용해서 사용해보세요. 수고하셨습니다.
