[HTML] HTML - 25.HTML5 요소 - input 요소의 타입

이번 시간에는 HTML에 Input 요소의

타입에 대해 알아보도록 하겠습니다.

 

input 요소의 타입

 

html에서 form 요소는 다양한 타입의

input 요소를 포함할 수 있습니다.

 

HTML에서 자주 사용되는 input 요소의

대표적 타입으로는 다음과 같습니다.

• text
• password
• submit
• radio button
• checkbox 
• button

HTML5 에서 추가된 input 요소의 타입

 

HTML5에서 새롭게 추가된 input 요소의

타입은 다음과 같습니다.

 

• 숫자 입력(number)
• 입력 범위 지정(range)
• 색상 입력(color)
• 날짜 입력(date)
• 시간 입력(time)
• 날짜와 시간 입력(datetime-local)
• 연도와 월 입력(month)
• 연도와 주 입력(week)
• 이메일 입력(email)
• URL 주소 입력(url)
• 전화번호 입력(tel)
• 검색어 입력(search)

숫자 입력(number)

 

<input>태그의 type 속성값을 "number"로

설정하면, input 요소는 사용자가 숫자를

입력할 수 있도록 해줍니다.

 

number 타입이 일반 text 타입과 다른 점은

입력 필드 우측에 숫자의 크기를 조잘 할 수 

있는 상하버튼이 생기는 점입니다.

 

브라우저의 지원 여부에 따라 main 속성과

max 속성을 이용하여 숫자 선택에 

제한 값을 설정할 수 있습니다.

<h1>number 타입을 이용한 숫자 입력</h1>

<form action="../../examples/request.php">
    <input type="number" name="favnum" min="1" max="9">
    <input type="submit" value="전송">
 </form>

이번에 배우게 될 <input> 태그의 type 속성값은

익스플로러에서 대부분 동작하지 않습니다.

 

그래서 크롬같은 브라우저에서 결과를 

이미지로 함께 보여줄 것 입니다.

0 <input type="range" name="favnum" min="1" ma="9"> 9

색상 입력(color)

 

<input> 태그의 type 속성값을 "color"로

설정하면 input 요소는 사용자가

색상을 입력할 수 있도록 해줍니다. 

 

선택된 색상은 #을 제외한 6자리의 

16진수 색상값으로 전송됩니다.

 

브라우저 지원 여부에 따라 색성을

선택하기 위한 도구를 보여줍니다.

<input type="color" name="favcolor" value="#CC6600">

날짜 입력(date)

 

<input> 태그의 type 속성값을 "date"로

설정하면, input 요소는 사용자가 날짜를

입력할 수 있도록 해줍니다.

 

브라우저 지원 여부에 따라 날짜를 선택하기

위한 캘린더를 보여줍니다.

<input type="date" name="startby">

또한, min과 max 값을 사용해 날짜 선택에

제한값을 설정할 수 있습니다. 

 

시간 입력(time)

 

<input> 태그의 type 속성값을 "time"으로 

설정하면, input 요소는 사용자가 시간을

입력할 수 있도록 해줍니다.

 

브라우저 지원 여부에 따라서 시간을

선택하기 위한 도구를 보여줍니다.

<input type="time" name="birthtime">

 

날짜와 시간 입력(datetime-local)

 

<input>태그의 type 속성값을 "datetime-local"로

설정하면, input 요소는 사용자가 날짜와 시간을

입력할 수 있도록 해줍니다. 

 

브라우저 지원 여부에 따라 날짜를 

선택하기 위한 캘린더와 시간을 선택하기 

위한 도구를 보여줍니다.

<input type="datetime-local" name="starttime">

 

연도와 월 입력(month)

 

<input>태그의 type 속성값을 "month"로

설정하면, input 요소는 사용자가

연도와 월을 입력할 수 있도록 해줍니다.

 

브라우저 지원 여부에 따라 연도와 월을

선택하기 위한 캘린더를 보여줍니다.

<input type="month" name="birthtime">

 

연도와 주 입력(week)

 

<input> 태그의 type 속성값을 "week"로 

설정하면, input 요소는 사용자가 연도와 

 

몇 번째 주인지를 입력할 수 있도록 해줍니다.

브라우저 지원 여부에 따라 연도와 주를 

선택하기 위한 캘린더를 보여줍니다.

<input type="week" name="nthweek">

 

이메일 입력(email)

 

<input> 태그의 type 속성값을 "email"로

설정하면, input 요소는 사용자가 email 주소로

입력할 수 있도록 해줍니다.

 

브라우저 지원 여부에 따라서 전송할 때

입력한 email 주소가 유효한 email 주소인지

자동으로 검사합니다.

<input type="email" name="email">

 

URL 주소 입력(url)

 

<input> 태그의 type 속성값을 "url"로 설정하면,

input 요소는 사용자가 URL:주소를 입력할 수

있도록 해줍니다.

 

브라우저 지원 여부에 따라 전송할 때

입력한 URL 주소가 유효한 URL 주소인지

자동으로 검사합니다.

<input type="url" name="url">

 

전화번호 입력(tel)

 

<input> 태그의 type 속성값을 "tel"로 

설정하면, input 요소는 사용자가

전화 번호를 입력할 수 있도록 해줍니다.

<input type="tel" name="tel">
<input type="submit" value="전송">

 

검색어 입력(search)

 

<input> 태그의 type 속성값을 "search"로

설정하면, input 요소는 사용자가 

검색어를 입력할 수 있도록 해줍니다.

 

이러한 검색 필드는 보통의

텍스트 필드(text field)와 동일하게 동작합니다.

 

search 타입이 일반 text 타입과 다른 점은

입력 필드에 검색어를 입력하면 

 

입력 필드 우측에 입력된 검색어를

바로 삭제할 수 있는 엑스(X) 표기가

생기는 점 입니다.

<input type="search" name="keyword">

---

참고 자료

코딩교육 티씨피스쿨

 

GitHub - HTML5-STR/html-study: html 블로그 작성용 - study1