HTML input 태그 type 종류 및 속성 정리, 샘플 예제

웹 페이지는 블로그처럼 일방적으로 정보를 제공해 주는 페이지가 있는 반면에 사용자로부터 입력값을 받을 수 있게 구성된 페이지도 있습니다. 예로 로그인할 때 사용자 아이디와 패스워드 정보를 받거나 회원가입 시 가입정보를 받을 수 있게 페이지를 구성할 수 있습니다. 폼(form) 태그를 사용하여 사용자로부터 입력값을 받을 수 있는데 입력값을 받을 때 가장 많이 사용하는 태그가 input 태그입니다.

그럼 input 태그 type 속성의 종류 및 샘플 예제로 사용하는 방법에 대해서 알아보죠.

input 태그 type 속성의 종류

1. input 태그 type 속성의 종류

종류	성명
text	한 줄 텍스트 입력 양식
password	비밀번호 입력 양식
hidden	숨김처리 양식
search	검색어 입력 양식
url	URL 주소 입력 양식
email	이메일 입력 양식
tel	전화번호 입력 양식
checkbox	2개 이상 선택할수 있는 체크 박스 양식
radio	1개만 선택할수 있는 라디오 버튼 양식
number	숫자만 입력할수 있는 양식
range	범위를 선택할수 있는 양식
date	날짜(연, 월, 일) 양식
datetime	날짜(연, 월, 일, 시, 분, 초, 분할 초) 양식
month	날짜(연, 월) 양식
week	날짜(연, 주) 양식
time	시간(시, 분, 초, 분할 초) 양식
submit	전송 버튼 양식
reset	초기화 버튼 양식
image	submit을 대신할 이미지 양식
button	일반 버튼 양식
file	파일을 첨부할수 있는 버튼 양식
color	색상을 선택할수 있는 양식

☞ 입력받는 형태에 맞게 type을 지정하면 되고 type 종류는 전부 외울 필요는 없는 것 같습니다. 이름만으로도 어떤 양식인지 직관적으로 알 수 있고 요즘은 개발 툴이 좋아서 자동완성 기능을 사용해도 되고 필요시 구글링(제 블로그 참고)을 하시면 됩니다.

2. 사용 예제

▼ 소스 코드

<!DOCTYPE html>
<html>
<head>
     <title>input 태그 type 속성</title>
</head>
<body>
     <h1>input 태그 type 속성</h1>
     text : <input type="text"><br>
     password : <input type="password"><br>
     hidden : <input type="hidden"><br>
     search : <input type="search"><br>
     url : <input type="url"><br>
     email : <input type="email"><br>
     tel : <input type="tel"><br>
     checkbox : <input type="checkbox"><br>
     radio : <input type="radio"><br>
     number : <input type="number"><br>
     range : <input type="range"><br>
     date : <input type="date"><br>
     datetime : <input type="datetime"><br>
     month : <input type="month"><br>
     week : <input type="week"><br>
     time : <input type="time"><br>
     submit : <input type="submit"><br>
     reset : <input type="reset"><br>
     image : <input type="image"><br>
     button : <input type="button"><br>
     file : <input type="file"><br>
     color : <input type="color">
</body>
</html>

▼ 실행 화면

☞ input 태그 속성은 type 이외에도 아주 많이 있습니다. 예제를 통해서 주요 속성에 대해서 알아보죠.

샘플 예제

예제 1)

▼ 소스 코드

<!DOCTYPE html>
<html>
<head>
     <title>input 태그 예제</title>
</head>
<body>
     <ul>
          <li>
               <label for="user_id">사용자ID</label>
               <input type="text" name="user_id" autofocus required>
          </li>
          <li>
               <label for="password">암호</label>
               <input type="password" name="password">
          </li>
          <li>
               <label for="Email">이메일</label>
               <input type="email" name="Email">
          </li>
          <li>
               <label for="Phone">연락처</label>
               <input type="tel" name="Phone" placeholder="숫자만 입력하세요.">
          </li>
          <li>
               <label for="Age">나이</label>
               <input type="number" name="Age" readonly>
          </li>
          <li>
               <label for="birthday">생년월일</label>
               <input type="date" name="birthday">
          </li>
     </ul>
     <div>
          <input type="submit" value="보내기">
     </div>
</body>
</html>

[input 태그 주요 속성]

autofocus : 자동 커서 이동
required : 필수 입력 필드 적용
placeholder : 힌트 표시
readonly : 읽기 전용 필드

▼ 결과 화면

예제 2)

▼ 소스 코드

<!DOCTYPE html>
<html>
<head>
     <title>Document</title>
</head>
<body>
     <fieldset>
          <legend>성별 선택</legend>
          <input type="radio" name="gender">남자
          <input type="radio" name="gender" checked>여자
     </fieldset>    
     <fieldset>
          <legend>지역 선택</legend>
          <input type="radio" name="area" checked>서울
          <input type="radio" name="area">경기
          <input type="radio" name="area">인천
          <input type="radio" name="area">부산
     </fieldset>    
     <fieldset>
          <legend>좋아하는 과일 모두 선택</legend>
          <input type="checkbox" name="fruit" checked>사과
          <input type="checkbox" name="fruit">배
          <input type="checkbox" name="fruit">토마토
          <input type="checkbox" name="fruit">수박
     </fieldset>
     <div style="margin-top: 10px;">
          <input type="image" src="img/button_1.png" style="width: 80px;">
     </div>
</body>
</html>