HTML Input 요소의 타입들(types)

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

텍스트 입력(text input)위 한 줄의 입력 필드를 정의 text input:

Example

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

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

First name:

Last name:

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>

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

User name:

User password:

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>

위의 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>

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>

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

Male
Female
Other

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>

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

I have a bike
I have a car

Input Type: button

버튼(button) 을 정의:

Example

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

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

Input Type: number

는 숫자 값을 포함해야 하는 입력필드에 사용됩니다.

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

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

Example

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

Input Type: date

는 사용자가 날짜를 포함해야 하는 입력 필드에 사용됩니다.

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

Example

<form>
  Birthday:
  <input type="date" name="bday">
</form>

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

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>

Input Type: color

는 색상을 포함해야 하는 입력 필드에 사용됩니다.

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

Example

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

Input Type: range

는 값이 범위 안에 있어야하는 입력 필드에 사용됩니다.

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

Example

<form>
  <input type="range" name="points" min="0" max="10">
</form>

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

Input Type: month

사용자가 월과 연도를 선택할 수 있게 해준다.

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

Example

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

Input Type: week

사용자가 주과 연도를 선택할 수 있게 해준다.

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

Example

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

Input Type: time

사용자가 시간을 선택할 수 있게 해준다 (no time zone).

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

Example

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

Input Type: datetime

사용자가 날짜와 시간을 (시간대와 함께) 선택할 수 있게 해준다.

Example

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

Input Type: datetime-local

사용자가 날짜와 시간을 (시간대 없이) 선택할 수 있게 해준다.

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

Example

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

Input Type: email

는 e-메일 주소를 포함해야 하는 입력 필드에 사용된다.

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

Example

<form>
  E-mail:
  <input type="email" name="email">
</form>

Input Type: search

는 검색 필드에 사용됩니다. (검색 필드는 일반 텍스트 필드처럼 동작된다.)

Example

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

Input Type: tel

는 전화 번호를 포함해야 하는 입력 필드에 사용됩니다.

Example

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

Input Type: url

은 URL 주소를 포함하는 입력 필드에 사용됩니다.

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

Example

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>