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.