Computer Science M8

HTML Input Types

This chapter describes the different input types for the <input> element.


Input Type Text

<input type="text"> defines a one-line text input field:

Example

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

This is how the HTML code above will be displayed in a browser:

First name:

Last name:


Input Type Password

<input type="password"> defines a password field:

Example

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

This is how the HTML code above will be displayed in a browser:

User name:

User password:

The characters in a password field are masked (shown as asterisks or circles).


Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

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>

This is how the HTML code above will be displayed in a browser:

First name:

Last name:
 

 

If you omit the submit button's value attribute, the button will get a default text:

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 Reset

<input type="reset"> defines a reset button that will reset all form values to their default values:

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">
  <input type="reset">
</form>

This is how the HTML code above will be displayed in a browser:

First name:

Last name:
 

  

If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.


Input Type Radio

<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

This is how the HTML code above will be displayed in a browser:

 Male
 Female
 Other


Input Type Checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

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>

This is how the HTML code above will be displayed in a browser:

 I have a bike 
 I have a car


Input Type Button

<input type="button"> defines a button:

Example

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

This is how the HTML code above will be displayed in a browser:


HTML5 Input Types

HTML5 added several new input types:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

New input types that are not supported by older web browsers, will behave as <input type="text">.


Input Type Color

The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

OperaSafariChromeFirefoxInternet Explorer

Example

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

Input Type Date

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

OperaSafariChromeFirefoxInternet Explorer

Example

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

You can also add restrictions to dates:

OperaSafariChromeFirefoxInternet Explorer

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

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

OperaSafariChromeFirefoxInternet Explorer

Example

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

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.

OperaSafariChromeFirefoxInternet Explorer

Example

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

댓글

댓글 본문
작성자
비밀번호
버전 관리
VPhwang
현재 버전
선택 버전
graphittie 자세히 보기