티스토리 뷰



HTML5 17강은 지난 강좌에 이어 또 <input>태그에 관한 내용이다ㅋㅋㅋ 지금까지 <input>태그의 다양한 type 속성값에 대해 공부했는데 오늘은 type외에 사용자가 입력을 좀더 편하게 하기위해 사용하는 <input>태그의 속성을 공부할 것이다.  







ㅣHTML5 강좌: 사용자 편의를 위한 <input>태그의 속성




<input autofocus>

<input autocomplate>

<input placeholder = "텍스트">


사용자 편의를 위한 <input>태그 속성은 autofocus, autocomplate, placeholder가 있다. 먼저 autofocus 속성은 웹페이지를 열자마자 바로 입력할 수 있게 도와주는 속성이다. 예를 들어 네이버에 접속하면 검색창을 클릭하지 않아도 커서가 깜빡이기 때문에 바로 검색어를 입력할 수 있다. 만약 autofocus속성을 쓰지 않으면 사용자가 네이버를 접속하고 검색창을 클릭한 다음에 입력해야 하므로 조금 더 번거롭다. 


autofocus는 주로 회원가입 페이지로 넘어갈때 많이 쓰이는 속성이다. 





한편 autocomplate과 placeholder는 아이디나 비밀번호를 입력받을 때 자주 쓰는 속성이다. 네이버나 웹사이트에 아이디를 입력할 때 아이디 앞에만 입력해도 예전에 로그인했던 아이디가 떠서 쉽게 입력이 가능한데 이 기능을 자동 완성 기능이라고 한다. autocomplate 속성을 넣으면 입력창에 자동 완성 기능이 추가된다.


placeholder는 보면 알겠지만 입력창안에 안내 텍스트(속성값)를 넣어주는 속성이다. 최근에는 입력창 밖에 안내 텍스트(ex 아이디, 비밀번호, 주소.. 등)를 넣기보다는 입력창안에 넣는 웹디자인이 유행하는 추세다.







ㅣHTML5 강좌: 사용자가 제대로 입력했는지 확인하는 속성




<input required>


사용자가 입력창에 정보를 제대로 입력하는지 검사하는 속성은 required와 formnovalidate가 있다. 먼저 required 속성은 사용자가 required 속성이 적용된 입력창에 정보를 입력하지 않고 전송버튼을 누르면 오류 메시지가 떠서 꼭 필요한 내용을 입력하게 만드는 역할을 한다.





구글 브라우저에 웹페이지를 열어서 입력창에 아무것도 입력하지 않고 제출을 클릭하면 '이 입력란을 작성하세요'라는 오류 메시기자 뜬다.





<form formnovalidate>

<input formnovalidate>


다음으로 formnovalidate 속성은 <form>태그에도 쓸 수 있고 <input>태그에도 쓸 수 있다. formnovalidate는 사용자가 입력한 정보가 유효한지 검사하는 속성으로 사용자가 입력한 정보가 유효하지 않으면 경고 메시지가 떠서 제대로된 정보를 입력하게 도와준다. 





<input>태그에 type 속성에 값을 email을 주면 email을 입력하는 입력창이 만들어진다. 그런데 사용자가 여기에 email이 아닌 다른 내용을 입력하고 전송버튼을 눌러도 그대로 전송된다. 그런데 formnovalidate 속성을 주면 서버에 주기전에 입력된 정보 형식이 email이 맞는지 확인하고 형식이 맞지 않으면 위와 같이 오류가 뜬다.







ㅣHTML5 강좌: 그외 기타 <input> 속성




<input minlength = "" maxlength = "" >

<input min = "" max = "" step = "" >


앞서 입력 태그를 공부하면서 잠깐씩 맛본 속성들이다. minlength속성은 입력해야할 최소 글자수를, maxlength속성은 입력할 수 있는 최대 글자수 값을 주는 속성으로 기본적으로 텍스트를 입력하는 입력창에 사용할 수 있다. 반면 min(최소값)과 max(최대값), step(간격) 속성은 숫자나 날짜, 시간을 입력하는 입력창에 사용한다.



댓글
댓글쓰기 폼