HTML input type input types __html

This chapter describes the input types for <input> elements. input type: text

<input type= "Text" > defines a single-line input field for text entry: instance

<form> a
 name:<br>
<input type= "text" name= "FirstName" >
<br> last
 name :<br>
<input type= "text" name= "LastName" >
</form> 

Give it a shot yourself.

The above HTML code looks like this in the browser: the name:


Last Name:
input type: password

<input type= "Password" > Define password field: instance

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

Give it a shot yourself.

The above HTML code looks like this in the browser: User name:


User Password:

Note: Characters in the password field are masked (shown as asterisks or filled circles). input type: Submit

<input type= "Submit" > Define the button that submits the form data to the form handler.

A form handler (Form-handler) is typically a server page that contains scripts to process input data.

Specify the form handler (Form-handler) in the Action property of the form: an instance

<form action= "action_page.php" > "
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> 

Give it a shot yourself.

The above HTML code looks like this in the browser: the name:


Last Name:

If you omit the Value property of the Submit button, the button will get the default text: instance

<form action= "action_page.php" > "
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 the Input type:radio yourself

<input type= "Radio" > Define radio buttons.

Radio buttons let a user select only one of a limited number of choices: instance

<form>
<input type= "Radio" name= "Sex" value= "male" Checked>male
<br>
<input Type= "Radio" name= "Sex" value= "female" >female
</form> 

Give it a shot yourself.

The above HTML code looks like this in the browser: Male

Female Input Type:checkbox

<input type= checkbox > Definition check box.

A check box allows the user to select 0 or more options in a limited number of options. instance

<form>
<input type= "checkbox" name= "vehicle" value= "Bike" >i have a Bike
<br>
<input type= "checkbox" name= "vehicle" value= "car" >i have a car 
</form> 

Give it a shot yourself.

The above HTML code looks like this in the browser: I have a bike

I have a car Input Type:button

<input type= "button> definition button. instance

<input type= "button" onclick= "alert (' Hello world! ')" value= "click me!" >

Give it a shot yourself.

The above HTML code looks like this in the browser: HTML5 input type

HTML5 has added several new input types: color date datetime datetime-local Email Month number range search Tel time URL week

Note: Input types that are not supported by older Web browsers are treated as input type text. input type: number

<input type= "number" > for input fields that should contain numeric values.

You can limit the numbers.

Depending on browser support, restrictions can be applied to input fields. instance

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

Try it yourself. Input Restrictions

Some of the commonly used input restrictions (some of which are new in HTML5) are listed here:

Property	Description
Disabled	Specify that the input field should be disabled.
Max	Specify the maximum value for the input field.
MaxLength	Specify the maximum number of characters for the input field.
Min	Specify the minimum value for the input field.
Pattern	A regular expression that prescribes the input value to be checked through.
ReadOnly	Specify that the input field is read-only (cannot be modified).
Required	Specify that the input fields are required (must be filled in).
Size	Specify the width of the input field (in characters characters).
Step	Specify the legal number interval for the input field.
Value	Specify the default value for the input field.

You'll learn more about input restrictions in the next chapter. instance

<form>
  Quantity:
  <input type= "number" name= "points" min= "0" max= "" "Step=" value= "" >
</form>

Try it yourself. input type: Date

<input type= "date" > for input fields that should contain dates.

Depending on the browser support, the date selector will appear in the input field. instance

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

Give it a shot yourself.

You can add restrictions to the input: instance

<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" > for input fields that should contain colors.

Depending on the browser support, the color picker will appear in the input field. instance

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

Try it yourself. input type: Range

<input type= "range" > for input fields that should contain a range of values.

Depending on the browser support, the input field can be displayed as a slider control. instance

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

Give it a shot yourself.

You can use the following properties to specify limits: Min, max, step, value.