HTML Input 요소의 타입들(types)

« Previous Next Chapter »

이 장에서는 <input> 요소의 입력 타입(type) 들을 설명한다. 

HTML에서 사용할 수 있는 다른 input type은 다음과 같습니다.:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

Input Type: text

<input type="text"> 텍스트 입력(text input)위 한 줄의 입력 필드를 정의 text input:

Example

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
Try it Yourself »

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다:

First name:

Last name:

Input Type: password

<input type="password"> 는  password 필드를 정의한다.

password 필드의 문자는 별표나 동그라 미로 표시로 가려집니다.

Example

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>
Try it Yourself »

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다.:

User name:

User password:

Input Type: submit

<input type="submit"> 는 폼 -헨들러 (form- handler)에게 폼을 제출하 는 버튼을 정의합니다.

폼-헨들러(form-handler)는 일반적으로 입력 자료를 처리할 스크립트로 이루어진 서버페이지이 다.

폼-헨들러(form-handler)는 폼의 action 속성에 명시되며 일반적으로 수신된 입력을 가지고 무언가를 수행합니다.:

Example

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
Try it Yourself »

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다.

First name:

Last name:



submit 버튼의 value 속성을 생략하며, 버튼에는 기본값이 할당된다.:

Example

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit">
</form>
Try it Yourself »

Input Type: radio

<input type="radio"> 라디오 버튼(radio button)을 정의합니다.

라디오 버튼은 사용자가 제한된 개수의 선택 중 하나만 선택할 수 있습니다 :

Example

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>
Try it Yourself »

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다.:

Male
Female

Input Type: checkbox

<input type="checkbox"> 체크박스(checkbox) 를 정의 합니다.

체크박스는 제한된 선택들 중에서 사용자가 임의의 개 수를 선택할 수 있게 해준다.

Example

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Try it Yourself »

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다.:

I have a bike
I have a car

Input Type: button

<input type="button">  버튼(button) 을 정의:

Example

<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Try it Yourself »

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다.:


Input Type: number

<input type="number"> 는 숫자 값을 포함해야 하는 입력필드에 사용됩니다. 

숫자에 한계를 설정할 수 있습니다.

브라우저의 지원에 따라서, 한계를 입력 필드에 표시될 수도 있다.

Example

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>
Try it Yourself »

Input 제한(Restrictions)

일반적인 input 제한(restrictions)은 다음과 같다. :

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

Example

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Try it Yourself »

Input Type: date

<input type="date"> 는 사용자가 날짜를 포함해야 하는 입력 필드에 사용됩니다.

브라우저의 지원에 따라서,  날짜 선택기(date picker)가 입력 필드로 표시될 수도 있다.

Example

<form>
  Birthday:
  <input type="date" name="bday">
</form>
Try it Yourself »

입력에 제한을 추가 할 수도 있다. :

Example

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>
Try it Yourself »

Input Type: color

<input type="color"> 는 색상을 포함해야 하는 입력 필드에 사용됩니다.

브라우저의 지원에 따라서, 색상 선택기(color picker)가 입력 필드에 표시될 수도 있다.

Example

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>
Try it Yourself »

Input Type: range

<input type="range"> 는 값이 범위 안에 있어야하는 입력 필드에 사용됩니다.

브라우저의 지원에 따라서, 입력 필드가 슬라이드 콘트롤(slider control)로 표시될 수 있다.

Example

<form>
  <input type="range" name="points" min="0" max="10">
</form>
Try it Yourself »

제한을 지정하기위해 다음의 속성들을 사용할 수 있다.: min, max, step, value.

Input Type: month

<input type="month"> 사용자가 월과 연도를 선택할 수 있게 해준다.

브라우저의 지원에 따라서,  날짜 선택기(date picker)가 입력 필드로 표시될 수도 있다. 

Example

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>
Try it Yourself »

Input Type: week

<input type="week"> 사용자가 주과 연도를 선택할 수 있게 해준다.

브라우저의 지원에 따라서,  날짜 선택기(date picker)가 입력 필드로 표시될 수도 있다.

Example

<form>
  Select a week:
  <input type="week" name="week_year">
</form>
Try it Yourself »

Input Type: time

<input type="time"> 사용자가 시간을 선택할 수 있게 해준다 (no time zone).

브라우저의 지원에 따라서,  시간 선택기(time picker)가 입력 필드로 표시될 수도 있다.

Example

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>
Try it Yourself »

Input Type: datetime

<input type="datetime"> 사용자가 날짜와 시간을 (시간대와 함께) 선택할 수 있게 해준다.

Example

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>
Try it Yourself »
Note The input type datetime is removed from the HTML standard. Use datetime-local instead.

Input Type: datetime-local

<input type="datetime-local">사용자가 날짜와 시간을 (시간대 없이) 선택할 수 있게 해준다.

브라우저의 지원에 따라서,  날짜 선택기(date picker)가 입력 필드로 표시될 수도 있다.

Example

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>
Try it Yourself »

Input Type: email

<input type="email"> 는 e-메일 주소를 포함해야 하는 입력 필드에 사용된다.

브라우저의 지원에 따라서, 폼이 제출 될 때  e-메일 주소가 자동으로 유효성 검사가 될 수 있습니다.

Example

<form>
  E-mail:
  <input type="email" name="email">
</form>
Try it Yourself »

Input Type: search

<input type="search"> 는 검색 필드에 사용됩니다. (검색 필드는 일반 텍스트 필드처럼 동작된다.) 

Example

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>
Try it Yourself »

Input Type: tel

<input type="tel"> 는 전화 번호를 포함해야 하는 입력 필드에 사용됩니다.

Example

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>
Try it Yourself »

Input Type: url

<input type="url"> 은 URL 주소를 포함하는 입력 필드에 사용됩니다.

브라우저의 지원에 따라서, 폼이 제출 될 때 URL 필드의 값이 자동으로 유효성 검사가 될 수 있습니다.

Example

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>
Try it Yourself »

Test Yourself with Exercises!

Exercise 1 »    Exercise 2 »    Exercise 3 »    Exercise 4 »    Exercise 5 »


« Previous Next Chapter »