안녕하세요. 혀코입니다.
이번 시간에는 Input 태그의 type 사용 방법 총정리를 해볼까 합니다.
Input 태그의 type에는 다음 10가지가 있습니다.
1. text
2. email
3. password
4. tel
5. datetime-local
6. date
7. week
8. month
9. time
10. number
1. text
text는 Input type의 기본 값 입니다. 보통 문자열을 입력받을 때 사용합니다.
이때, label 태그의 for 값과 input 태그의 id 를 같게 해서 연동해 줍니다.
name 값은 사용자가 입력한 값과 쌍으로 name: john 형식으로 입력됩니다.
<label for="name">Name:</label>
<input type="text" id="name" name="name">
2. email
이메일을 입력받을 때 사용합니다. 이메일과 pattern에 정의된 형식이 맞으면 ':valid pseudo class' 가 자동으로 적용되며, 정의된 형식에 맞지 않으면 ':invalid' pseudo class가 자동으로 적용됩니다.
<label for="email">Enter your globex.com email:</label>
<input type="email" id="email"
pattern=".+@globex\.com" size="30" required>
label {
display: block;
font: 1rem 'Fira Sans', sans-serif;
}
input,
label {
margin: .4rem 0;
}
input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}
3. password
비밀번호를 입력받을 때 사용합니다. 비밀번호를 입력하면 해당 비밀번호 대신 disc 심볼이 출력됩니다.
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="pass">Password (8 characters minimum):</label>
<input type="password" id="pass" name="password"
minlength="8" required>
</div>
<input type="submit" value="Sign in">
4. tel
전화번호를 입력받을 때 사용합니다.
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<small>Format: 123-456-7890</small>
5. datetime-local
날짜와 함께 시간을 입력받을 때 사용합니다.
<label for="meeting-time">Choose a time for your appointment:</label>
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2018-06-14T00:00">
6. date
날짜를 입력받을 때 사용합니다.
<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start"
value="2018-07-22" min="2018-01-01" max="2018-12-31">
7. week
주를 입력받을 때 사용합니다.
</label>
<input type="week" name="week" id="camp-week"
min="2018-W18" max="2018-W26" required>
8. month
월을 입력받을 때 사용합니다.
<label for="start">Start month:</label>
<input type="month" id="start" name="start"
min="2018-03" value="2018-05">
9. time
시간을 입력받을 때 사용합니다.
<label for="appt">Choose a time for your meeting:</label>
<input type="time" id="appt" name="appt"
min="09:00" max="18:00" required>
<small>Office hours are 9am to 6pm</small>
10. number
숫자를 입력받을 때 사용합니다.
<label for="tentacles">Number of tentacles (10-100):</label>
<input type="number" id="tentacles" name="tentacles"
min="10" max="100">
이렇게 Input 태그의 type에 대해서 총정리해 봤습니다.
해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글