input 태그로 텍스트 박스 및 비밀번호 웹표준화를 위한 텍스트 박스 세분화

HTML에서 사용자에게 입력을 받거나 특정 동작을 위한 버튼을 사용해야 할 때 input 태그를 사용합니다. 그중에 텍스트박스를 사용할 수 있는 text, password 속성 그리고, 웹표준화를 위한 텍스트 박스 속성 세분화에 대해 정리해보겠습니다.

 

 

HTML 폼(form)태그 및 속성 정리 get방식 post방식 label태그

HTML 폼(form)태그 및 속성 정리 get방식 post방식 label태그

 

input 태그

HTML에서 각종 컨트롤(텍스트 박스, 체크박스, 라디오 버튼)을 사용할 때는 input 태그 안에 type 속성의 값으로 사용하고자 하는 컨트롤을 지정할 수 있습니다.

<input type = "속성명">

input 태그의 type 속성들

속성명	설명
text	일반적인 텍스트를 입력받을 수 있는 컨트롤
password	비밀번호를 입력할 수 있는 컨트롤 - 입력된 문자가 *** 등의 형태로 숨겨집니다.
checkbox	항목에 대한 체크 여부를 지정할 수 있는 컨트롤
radio	여러 항목중에 한가지만 선택할 수 있는 컨트롤
url	URL 주소를 넣을 수 있는 컨트롤
email	이메일 주소를 입력할 수 있는 컨트롤
tel	전화번호를 입력할 수 있는 컨트롤
number	숫자만 입력할 수 있으며 스핀박스 형태로 숫자를 조절 할 수 있습니다.
range	숫자에 대한 범위가 있고 그 범위를 가로 형태의 슬라이드 막대로 조절할 수 있습니다.
date	로컬 지역 기준의 날짜를 사용할 수 있습니다.
datetime	국제 표준시(UTC)로 설정된 날짜와 시간을 사용할 수 있습니다.
datetime-local	로컬 지역 기준으로 날짜와 시간을 사용할 수 있습니다.
month	로컬 지역 기준의 연과 월을 사용합니다.
week	로컬 지역 기준의 연과 주를 사용합니다.
time	로컬 지역 기준의 시간을 사용합니다.
submit	전송 버튼을 사용할 수 있으며, 해당 버튼으로 서버에 요청을 보낼 수 있습니다.
reset	HTML 컨트롤에 입력된 내용을 리셋할 수 있는 버튼입니다.
image	submit 버튼 대신 사용할 이미지를 넣습니다.
button	일반적인 버튼을 사용합니다.
file	파일을 첨부할 수 있는 버튼을 삽입합니다.
hidden	브라우저 상에서는 표시되지 않으며 서버에 전달할 값이 있을 때 사용합니다.

 

 

 

텍스트(text)와 비밀번호(password)

사용자에게 텍스트 입력을 받을 때 text 속성을 사용하게 됩니다. 이와 마찬가지로 사용자에게 텍스를 입력받으나 패스워드 형태로 디스플레이에서 특정 문자로 표시되게 하려면 password 속성을 사용하면 됩니다.

 

text속성과 password속성과 함께 주로 사용되는 속성은 아래의 표를 참고하시기 바랍니다.

속성명	설명
size	화면에 몇 글자가 보이도록 할 것인지를 지정하는데, 최대로 입력할 수 있는 글자 수(maxlength)를 20개로 지정 했는데, size 속성값을 10으로 지정하게 되면, 10개의 문자만 표시됩니다.
value	value 속성에 값을 입력하게 되면, 입력된 값이 기본값으로 텍스트 필드에 표시되며, 패스워드 속성에서는 사용하지 않습니다.
maxlength	텍스트 박스에서 최대로 입력할 수 있는 문자수를 지정합니다.

 

웹 표준화를 위한 텍스트 필드 세분화

사용자에게 입력을 받을 때, 입력받을 데이터의 종류는 다양합니다. 이메일이 될 수도 있고 전화번호가 될 수도 있습니다. 단순히 text 속성을 사용하기보다는 이렇게 사용자에게 입력받는 내용에 따라 속성명을 세분화하는 것이 웹 표준화로 가는 첫걸음일 수 있습니다. 

 

사용자에게 email을 입력받는 텍스트 박스에는 email 속성을 전화번호를 입력받을 때는 tel 속성을 사용하고 검색을 위한 텍스트 박스에는 search 속성 해야 합니다.

 

위 속성들은 외관상 일반 텍스트와 구분은 없지만, 입력받은 값을 서버로 넘길 때는 각각의 속성에 맞게 구분되어 값이 전달되기 때문에 좀 더 명확해질 수 있습니다. 모바일에서는 tel 속성을 이용된 값에는 전화를 걸 수도 있습니다.

 

input 태그와 텍스트 박스 속성 예제

위 텍스트 박스를 이용한 간단한 입력 양식의 예제입니다. 

  <li>
    <label for="user_id">ID</label>    
    <input type="text" id="user_id">
  </li>
  <li>
    <label for="user_pwd">비밀번호</label>  
    <input type="password" id="user_pwd">
  </li>
  <li>
    <label for="user_name">이름</label>
    <input type="text" id="user_name">
  </li>
  <li>
    <label for="user_tel">전화번호</label>  
    <input type="tel" id="user_tel">
  </li>
  <li>
    <label for="user_email">이메일</label>
    <input type="email" id="user_email">
  </li>
</ul>

 

아래는 실행결과입니다.

ID

비밀번호

이름

전화번호

이메일

HTML-input태그-텍스트박스