HTML 강좌 input 태그 총정리
안녕하세요 엘빈입니다.
저번 포스팅에서는 form 구조에 대해서 간략히 알아보았습니다.
이번 포스팅에서는 Form 태그 안에서 대부분이 차지하는 input 태그에 대해서 알아보겠습니다.
Input 태그는 입력 형식을 구현하기 위한 태그로 type 유형에 따라 다양하게 화면에 표시할 수 있습니다.
기본 형식은 다음과 같습니다
" <input type = "유형" id="id값" [속성="속성 값"]>"
type 은 input 태그를 입력할 때 필수적인 속성입니다.
type 값에 따라 input 태그는 다양한 기능과 모습으로 화면에 구현됩니다.
id 값은 필수적이진 않지만 꼭 값을 넣도록 요구되는 속성 값입니다.
그 이유는 다른 input 태그와 구별하기 위함과 웹 서버에서 입력 값을 판별하기 위함입니다.
나중에 이에 대해 자세히 포스팅 하겠습니다! 일단 이정도만 알아 두고 type 값들에 대해서 알아보겠습니다.
|
hidden |
사용자에게 안보임 |
text |
텍스트 입력 |
search |
검색 상자 |
|
tel |
전화번호 입력 |
url |
Url 주소 입력 |
|
이메일 입력 |
|
password |
비밀번호 입력 |
datetime |
국제 표준시 삽입 |
date |
사용자 지역 연/월/일 삽입 |
|
month |
사용자 지역 연/월 삽입 |
week |
사용자 지역 연/주 삽입 |
time |
사용자 지역 시/분/초 삽입 |
|
number |
숫자 조절 화살표 |
range |
숫자 조절 슬라이드 막대 |
color |
색상표 삽입 |
|
checkbox |
체크박스 삽입 |
radio |
라디오 버튼 삽입 |
file |
파일 첨부 버튼 |
|
submit |
서버 전송 버튼 |
reset |
리셋 버튼 삽입 |
button |
버튼 삽입 |
이 외에도 html5로 업데이트 되면서 세분화 된 type 유형들이 늘어났지만 대부분 이 표안의 유형을 사용합니다.
(1) hidden
hidden 유형은 화면상에는 표시되지 않지만 서버에 입력 form을 전송시 함께 전송되는 요소입니다.
<input type="hidden" name="나라" value="korea">
value에 서버에 전송될 값을 넣어줍니다.
(2) text
빈 텍스트를 입력하는 유형입니다. Form 형식에서 가장 많이 사용됩니다.
<input type="text" name="텍스트" value="기본내용" size="10" maxlength="5">
value에 기본 표시될 내용을 size에 텍스트 필드 크기를 maxlength에 최대 문자 개수를 지정합니다.
(3) search
검색 상자를 만드는 텍스트 필드입니다. 일반 텍스트 상자와 거의 동일하며 뒤쪽에 x로 입력 내용을 한번에 지울 수 있습니다.
<input type="serach">
(4) tel
전화번호 입력을 위한 태그입니다. 서버는 이를 전화번호라 인식하며 바로 통화로 연결될 수 있는 기능을 제공합니다.
<input type="tel">
(5) url
웹 주소를 입력하기 위한 유형입니다. 반드시 'http://'로 시작하는 사이트 주소를 입력해야 합니다.
<input type="url">
(6) email
이메일을 입력하기 위한 유형입니다. 브라우저 자체에서 '@'가 들어간 이메일 형식인지 검사해줍니다.
<input type="email">
(7) password
패스워드 입력을 위한 유형입니다. 입력한 내용이 화면에 표시되지 않고 '*'로 대체됩니다.
<input type="password" id="userPass" size="10">
(8) datetime, date, month, week, time
모두 시간과 관련된 유형입니다. Value 속성을 이용해 기본 값을 지정할 수 있으며 datetime,time을 제외한 3개의 태그는 달력을 통해 범위를 한번에 지정할 수 있습니다.
<input type="datetime">datetime<br>
<input type="date">date<br>
<input type="month">month<br>
<input type="week">week<br>
<input type="time">week<br>
(9) number, range
숫자 조절을 위한 버튼 표시와 기능을 제공합니다. Min으로 최솟값 max로 최댓값 value로 초기값을 설정할 수 있습니다.
<input type="number" min="1" max="5" value="1">number<br>
<input type="range" min="1" max="5" value="1">number<br>
(10) radio, checkbox
객관식처럼 제한된 범위내에서 사용자가 선택할 수 있도록 도와주는 유형들입니다. Checkbox는 여러 개를 radio는 한 개만 선택 가능합니다.
두개 유형 모두 단독으로 사용하지 않으며 label 태그와 같이 사용하게 됩니다.
1 checkbox<br><label><input type="checkbox" name="korean" value="국어">국어</label>
2 <label><input type="checkbox" name="english" value="영어">영어</label>
3 <label><input type="checkbox" name="math" value="수학">수학</label><br>
4 radio<br><label><input type="radio" name="swim" value="수영">수영</label>
5 <label><input type="radio" name="soccer" value="축구">축구</label><br>
(11) file
사용자가 파일을 첨부하고 싶을 때 화면에 표시되는 유형입니다.
<input type="file">
(12) submit
사용자가 입력한 내용을 웹 서버에 제출하기 위한 유형입니다. 모든 form 태그는 submit 유형을 하나 이상 포함해야 합니다.
<input type="submit">
(13) reset
사용자가 입력한 모든 정보를 지울 수 있습니다. 해당 form의 내용을 처음부터 입력하고 싶을 때 활용됩니다.
<input type="reset">
(14) button
버튼을 만들고 싶을 때 사용하는 유형입니다. 버튼 클릭 시 실행되는 함수를 지정할 수 있습니다.
<input type="button" value="새 탭 열기" onclick="window.open()">
자 지금까지 배운 내용들을 종합적으로 코드로서 작성해볼까요?
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset = "utf-8">
5 <title>첫 홈페이지 만들기 프로젝트</title>
6 </head>
7 <body>
8 <form method="get" action="/login">
9 <input type="hidden" name="나라" value="korea">hidden<br>
10 <input type="text" name="텍스트" value="기본내용" size="10" maxlength="5">text<br>
11 <input type="serach">search<br>
12 <input type="tel">tel<br>
13 <input type="url">url<br>
14 <input type="email">email<br>
15 <input type="password" id="userPass" size="10">password<br>
16 <input type="datetime">datetime<br>
17 <input type="date">date<br>
18 <input type="month">month<br>
19 <input type="week">week<br>
20 <input type="time">time<br>
21 <input type="number" min="1" max="5" value="1">number<br>
22 <input type="range" min="1" max="5" value="1">range<br>
23 checkbox<br><label><input type="checkbox" name="korean" value="국어">국어</label>
24 <label><input type="checkbox" name="english" value="영어">영어</label>
25 <label><input type="checkbox" name="math" value="수학">수학</label><br>
26 radio<br><label><input type="radio" name="swim" value="수영">수영</label>
27 <label><input type="radio" name="soccer" value="축구">축구</label><br>
28 <input type="file">file<br>
29 <input type="submit">submit<br>
30 <input type="reset">reset<br>
31 <input type="button" value="새 탭 열기" onclick="window.open()">button<br>
32 </form>
33 </body>
34
모든 코드를 작성해보았습니다. 화면상에는 어떻게 표시될까요?
화면에 다음과 같이 가지각색의 모습으로 표시됩니다.
Input 태그는 웹 문서 개발에 자주 사용되기 때문에 유형들에 대해서 제대로 숙지하시기 바랍니다.
지금까지 input 태그의 유형들에 대해서 살펴보았습니다.
포스팅 읽어주셔서 감사합니다.
'개발 > HTML_CSS' 카테고리의 다른 글
| Css 기본 선택자 정리 및 사용법 정리, 자주 쓰이는 것 위주로 (0) | 2020.01.18 |
|---|---|
| CSS 기초적인 내용 정리, 쉽게 이해해보자! (0) | 2020.01.18 |
| HTML 강좌 form 구조에 대해서 (0) | 2020.01.13 |
| HTML 강좌 9 링크 관련 태그(a,map,area) (0) | 2020.01.12 |
| Html 강좌 8 이미지 관련 태그 정리 (0) | 2020.01.12 |
