intput type

 

 

Input Type: text

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

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

 

First name:

Last name:

 

Input Type: password

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

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

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

 

User name:

User password:

 

 

Input Type: submit

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

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

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

 

<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>​

 

First name:

Last name:

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

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

 

First name:

Last name:

 

 

 

Input Type: radio

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

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

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

 

Male
Female
Other

 

 

 

Input Type: checkbox

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

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

 

<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>​

 

I have a bike
I have a car

 

 

Input Type: button

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

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

 

 

 

Input Type: number

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

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

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

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

 

Quantity (between 1 and 5):

 

 

Input 제한(Restrictions)

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

AttributeDescription

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

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

 

Quantity:

 

 

Input Type: date

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

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

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

 

Birthday:

 

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

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

 

Enter a date before 1980-01-01:
Enter a date after 2000-01-01:

 

 

Input Type: color

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

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

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

 

Select your favorite color:

 

 

Input Type: range

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

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

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

 

 

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

 

 

Input Type: month

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

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

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

 

Birthday (month and year):

 

 

Input Type: week

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

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

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

 

Select a week:

 

 

Input Type: time

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

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

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

 

Select a time:

 

 

Input Type: datetime

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

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

 

Birthday (date and time):

 

The input type datetime is removed from the HTML standard. Use datetime-local instead.

 

 

Input Type: datetime-local

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

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

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

 

Birthday (date and time):

 

 

Input Type: email

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

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

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

 

E-mail:

 

 

Input Type: search

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

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

 

Search Google:

 

 

Input Type: tel

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

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

 

Telephone:

 

 

Input Type: url

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

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

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

 

Add your homepage: