HTML input 태그 type 종류 및 속성 정리, 샘플 예제
웹 페이지는 블로그처럼 일방적으로 정보를 제공해 주는 페이지가 있는 반면에 사용자로부터 입력값을 받을 수 있게 구성된 페이지도 있습니다. 예로 로그인할 때 사용자 아이디와 패스워드 정보를 받거나 회원가입 시 가입정보를 받을 수 있게 페이지를 구성할 수 있습니다. 폼(form) 태그를 사용하여 사용자로부터 입력값을 받을 수 있는데 입력값을 받을 때 가장 많이 사용하는 태그가 input 태그입니다.
그럼 input 태그 type 속성의 종류 및 샘플 예제로 사용하는 방법에 대해서 알아보죠.
input 태그 type 속성의 종류
1. input 태그 type 속성의 종류
종류 | 성명 |
---|---|
text | 한 줄 텍스트 입력 양식 |
password | 비밀번호 입력 양식 |
hidden | 숨김처리 양식 |
search | 검색어 입력 양식 |
url | URL 주소 입력 양식 |
이메일 입력 양식 | |
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>

[input 태그 주요 속성]
- name : 체크 박스 및 라디오 버튼 항목을 그룹핑하기 위해서 name 속성으로 같은 이름을 사용해야 됩니다.
- checked : 기본값으로 선택
▼ 결과 화면

※ 티스토리 에디터에서 input 태그 가능

HTML 이전 게시글
- [HTML] 페이지 구조 이해하기
- [HTML] 기본 용어(태그, 요소, 속성, 주석) 및 작성 방법
- [HTML] head 태그 정리 및 적용 사례
- [HTML] 시맨택 태그 종류, 웹 페이지 레이아웃 구성 예제
- [HTML] 제목 태그 h1~h6 vs 티스토리 에디터 제목 1~3 비교
- [HTML] 글자(텍스트) 관련 태그 정리
- [HTML] 목록(리스트) 태그 – ol, ul, dl, dd, dt
- [HTML] 테이블(표) 태그 – table, tr, th, td
- [HTML] 이미지 삽입하기, img 태그 및 속성(src, alt)
- [HTML] 오디오, 비디오 삽입하기 – audio, video 태그
- [HTML] 하이퍼링크 삽입하기 – a 태그
- [HTML] 티스토리 본문 목차 만들기 (서식 활용)
- [HTML] 폼(form) 태그 사용하기 그리고 티스토리
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!