<input> 태그
1. type 속성에서 사용할 수 있는 유형
키워드 | 설 명 |
hidden | 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가지는 필드이다. |
text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다. |
search | 검색 상자를 넣는다. |
tel | 전화번호 입력 필드를 넣는다. |
url | URL 주소를 입력할 수 있는 필드를 넣는다. |
email | 메일 주소를 입력할 수 있는 필드를 넣는다. |
password | 비밀번호를 입력할 수 있는 필드를 넣는다. |
number | 숫자를 조절할 수 있는 화살표를 넣는다. |
color | 색상 표를 넣는다. |
checkbox | 주어진 항목에서 2개 이상 선택 가능한 체크 박스를 넣는다. |
radio | 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다. |
datatime | 국제 표준시(UTC)로 설정된 날짜와 시간(년, 월, 일, 시, 분, 초, 분할 초)를 넣는다. |
datatime-local | 사용자가 있는 지역을 기준으로 날짜와 시간(년, 월, 일, 시, 분, 초, 분할 초)을 넣는다. |
date | 사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다. |
month | 사용자 지역을 기준으로 날짜(연, 월)을 넣는다. |
week | 사용자 지역을 기준으로 날짜(연, 주)를 넣는다. |
time | 사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣는다. |
button | 버튼을 넣는다. |
file | 파일을 첨부할 수 있는 버튼을 넣는다. |
submit | 서버 전송 버튼을 넣는다. |
image | submit 버튼 대신 사용할 이미지를 넣는다. |
reset | 리셋 버튼을 넣는다. |
range | 숫자를 조절할 수 있는 슬라이드 막대를 넣는다. |
보충 설명)
(1) [type="color"]
color 필드는 사용자가 색상표에서 색상을 선택할 수 있게 해준다. 현재까지는 일부 브라우저에서만 지원하고 있지만. 표준 규약이 완성되면 모든 웹 브라우저상에서 표시할 수 있다.
※ 속성
1) list: 선택할 수 있는 색상 목록을 따로 정의했을 경우 그 datalist의 id를 지정한다.
2) value: 색상 값을 지정한다. 색상은 16진수로 표시하고, Red나 Yellow 같은 색상 키워드는 사용할 수 없다.
(2) [type="datetime", type="datatime-local"]
날짜(연도, 월, 일)와 시간을 함께 표시할 수 있다.
<input tpye="datatime">은 UTC라는 국제적인 표준시를 기준으로 한 날짜와 시간을 표시하고, <input="datetime-local"은 지역의 날짜와 시간을 표시한다.
HTML에서 날짜와 시간을 표기할 때는 유효한 형식을 지켜야 한다.
1) 날짜를 나타내는 날짜 문자열(연도 4자리, 월과 일은 2자리)
2) 영문자 T(대문자)
3) 시간을 나타내는 시간 문자열
4) 영문자 Z(대문자) 또는 시차: Z는 타임 존이 UTC일 때 사용한다.
(시차란: 로컬 시간과 UTC 시간과의 차이를 말하는 것으로, 로컬 시간에서 UTC 시간을 뺀 값을 쓴다. 시간을 분까지 표시한다. 예를 들어, 22:50:00와 18:50:00-04:00는 같은 시간을 나타낸다.)
(3) [type="date", type="month", type="week"]
type="date"로 지정하면 달력에서 날짜를 선택했을 때 필드에 "yyyy-mm-dd" 일까지 입력 할 수 있다.
type="month"로 지정하면 달력에서 날짜를 선택했을 때 "yyyy-mm" 형식으로 월까지만 입력할 수 있다.
type="week"로 지정하면 1월 첫째 주를 기준으로 몇 번째 주인지, 연도와 주가 표시된다. 예를 들어, 24째주라면 "yyyy=W24"로 표시된다.
(4) [type="time"]
시간을 지정할 때는 type="time"을 사용한다. 시간은 00:00부터 23:59까지 입력하거나 스핀 박스의 화살표를 클릭해 선택할 수 있다.
※ 날짜와 시간을 나타내는 유형에서 공통으로 사용할 수 있는 속성
1) min: 날짜와 시간의 최소값을 지정한다.
2) max: 날짜나 시간의 최대값을 지정한다.
3) step: 스핀 박스 화살표를 누를 때마다 날짜나 시간을 얼마만큼씩 커지거나 작아지게 할지 그 값을 지정한다.
4) value: 화면에 표시할 초기값을 지정한다.
<!doctype html>
<html lang="ko">
<head>
<title> 웹 폼</title>
<style>
body {
background-color:#fff;
}
form fieldset{
margin-bottom:25px;
}
form legend{
font-size:15px;
font-weight:600;
}
form label.reg {
font-size:14px;
width:110px;
color:#390;
font-weight:bold;
float:left;
text-align:right;
margin-right:10px;
}
form ul li{
list-style:none;
margin: 15px 0;
font-size:14px;
}
#member, #stuffs {
width:50px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>
<label for="today">Today</label>
<input type="datetime-local">
</legend>
</fieldset>
<fieldset id="register">
<legend>수강 과목을 선택하세요</legend>
<ul>
<li>
<label class="reg" for="color">선호색상</label>
<input type="color" id="color">
</li>
<li>
<label class="reg" for="spk">신청 과목<small>(회화)</small></label>
<input type="radio" name="spk" id="spk" value="low" checked>영어 회화(초급)
<input type="radio" name="spk" id="spk" value="middle">영어 회화(중급)
<input type="radio" name="spk" id="spk" value="high">영어 회화(고급)
</li>
<li>
<label class="reg" for="cert">신청 과목<small>(자격)</small></label>
<input type="radio" name="spk" id="cert" value="toeic">TOEIC
<input type="radio" name="spk" id="cert" value="toefl">TOEFL
<input type="radio" name="spk" id="cert" value="opic">OPIC
</li>
<li>
<label class="reg" for="pre">관심분야</label>
<input type="text" id="interest" list="engChoices">
<datalist id="engChoices">
<option value="grammar" label="문법"></option>
<option value="voca" label="어휘"></option>
<option value="speaking" label="회화"></option>
<option value="listening" label="리스닝"></option>
<option value="news" label="뉴스청취"></option>
</datalist>
</li>
</ul>
</fieldset>
<fieldset id="timetable">
<legend>강의 시간을 선택하세요</legend>
<ul>
<li>
<label class="reg" for="startw">개강 주</label>
<input type="week" id="startw">
</li>
<li>
<label class="reg" for="startt">강의 시간</label>
<input type="time" id="startt">
</li>
</ul>
</fieldset>
</form>
</body>
</html>
(5) [type="image"]
submit 버튼 대신에 사용할 이미지가 준비되어 있다면 type="image"를 사용해 전송 이미지를 넣을 수 있다.
type=" button"
폼 안에 버튼 형태를 만든다. 이 버튼은 sublmit나 reset 같은 자체 기능을 가지고 있지 않고 오직 버튼만 넣기 때문에 스크립트 함수 등을 연결해서 사용한다. value 속성을 사용하여 버튼에 표시할 내용을 지정한다.
<input type="button" value="우편 번호 검색" onclick="zipSearch()">
2. <input> 태그의 다양한 속성
(1) readonly 속성
readonly 속성은 해당 필드를 일기 전용으로 바꾼다. 텍스트 필드나 텍스트 영역처럼 필드 안에 내용이 있으면서 사용자에게 내용을 보여주기만 하고, 사용자 입력은 할 수 없게 하는 속성이다.
readonly 속성은 boolean value를 가지기 때문에 true 또는 false 값을 지정해도 되고, 간단히 readonly라고만 쓰거나 readonly="readonly" 또는 readonly="true"로 인식한다.
(2) placeholder 속성
placeholder 속성은 <input> 요소의 필드 안에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 하는 것이다. placeholder 속성을 이용하면 텍스트 필드 앞에 레이블을 사용하지 않고
사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려줄 수 있어 편리하다.
<label>연락처:<input type="text" placeholder="숫자만 입력"></label>
(3) autofocus 속성
autofocus 속성은 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서가 표시되도록 하는 것이다.
마우스 커서가 표시되면 바로 입력할 수 있어서 아주 편리하다. 이전에는 이렇게 하려면 자바스크립트를 이용해야 했는데, HTML5에서는 autofocus라는 속성으로 쉽게 해결할 수 있다.
<label>아이디:<input type="text" size="10" autofocus></label>
다음 예제는 웹 문서를 로딩하자마자 '이름' 옆의 텍스트 필드에 마우스 커서가 표시된다. 그리고 '학번' 옆의 텍스트 필드에는 '7자리 학번'이라는 placeholder가 표시되어 있다가 해당 텍스트 필드를 클릭하면 placeholder가 사라진다.
<li>
<label class="reg" for="uid">학번</label>
<input type="text" id="uid" placeholder="7자리 학번">
</li>
(4) autocomplete 속성
웹 브라우저의 자동 완성 기능은 사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력한 경우 이전에 입력했던 내용을 힌트로 보여준다.
자동 완성 기능을 사용하지 않으려면 브라우저의 환경 설정 명령을 이용해 꺼야 했는데, HTML5에서 새롭게 추가한 <input> 요소의 autocomplete 속성을 이용하면 웹 페이지상에서 자동 완선 기능을 제어할 수 있다.
예를 들어, 사용자가 웹 브라우저에서 자동 완성 기능을 끄지 않은 상태인데 아주 중요한 개인 정보를 입력한다거나 인증번호 입력과 같이 한 번만 사용하고 말 정보를 입력한다면 자동 완성 기능을 끄는 것이 좋다.
이럴 경우 autocomplete 속성을 이용해 폼에서 직접 자동 완성 기능을 끌 수 있다.
autocomplete 속성은 세 가지(on, off, defalut) 상태를 가지고 있어서 이 상태 중에서 하나를 골라 사용한다.
(5) required 속성
폼에 내용을 입력한 후 [submit]를 클릭하면 서버로 촘에 전송하는데, 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사할 수 있다.
<li>
<label class="reg" for="uname">이름</label>
<input type="text" id="uname" autofocus required>
</li>
출처: https://devbox.tistory.com/entry/ㄴ?category=574553 [장인개발자를 꿈꾸는 :: 기록하는 공간]
