HTML Input Property

The HTML Input property of the Value property

The Value property specifies the initial value of the input field:

ReadOnly Property

The ReadOnly property specifies that the input field is read-only (cannot be modified):

The ReadOnly property does not require a value. It is equivalent to readonly= "ReadOnly".

Instance

Disabled property

The Disabled property specifies that the input field is disabled.

The disabled elements are not available and cannot be clicked.

The disabled element is not committed.

Instance

Size Property

The Size property specifies the dimension of the input field (in characters counted):

Instance

MaxLength Property

The MaxLength property specifies the maximum length allowed for an input field:

If you set the MaxLength property, the input control does not accept characters that exceed the allowed number.

This property does not provide any feedback. If you need to remind users, you must write JavaScript code.

Note: Input restrictions are not foolproof. JavaScript provides a number of ways to increase illegal input. To securely restrict input, the recipient (server) must check the limit at the same time.

Instance

HTML5 Property

HTML5 adds the following properties for <input>:

• AutoComplete
• Autofocus
• Form
• FormAction
• Formenctype
• FormMethod
• Formnovalidate
• Formtarget
• Height and width
• List
• Min and Max
• Multiple
• Pattern (regexp)
• Placeholder
• Required
• Step

AutoComplete Property

The AutoComplete property specifies whether the form or input field should be completed automatically.

When auto-completion is turned on, the browser automatically fills in the values based on the user's previous input values.

Tips:

Tip:it is possible to has AutoComplete "on" for the form, and "off" for specific input fields, or vice versa.

The AutoComplete property applies to <form> and the following <input> types: text, search, URL, tel, email, password, datepickers, range, and color.

Opera Safari Chrome Firefox Internet Explorer

Instance

Auto-Complete an open HTML form (an input field is off):

and add the required attributes for <form>:

• AutoComplete
• Novalidate

Novalidate Property

The Novalidate property belongs to the <form> property.

If set, novalidate specifies that the form data will not be validated when the form is submitted.

Opera Safari Chrome Firefox Internet Explorer

Instance

Indicates that the form is not validated when it is committed:

<form action= "action_page.php" novalidate>   e-mail: <input type= "Email" name= "User_email" >   

Autofocus Property

The Autofocus property is a Boolean property.

If set, specifies that the <input> element should automatically get focus when the page loads.

Opera Safari Chrome Firefox Internet Explorer

Instance

Make the first name input field automatically get focus when the page loads:

Form Property

The form attribute specifies one or more forms that the <input> element belongs to.

Tip: If you want to refer to more than one form, use a space-delimited list of form IDs.

Opera Safari Chrome Firefox Internet Explorer

Instance

The input field is outside the HTML form (but is still a form):

FormAction Property

The FormAction property specifies the URL of the file that processes the input control when the form is submitted.

The FormAction property overrides the <form> element's Action property.

The FormAction property applies to type= "Submit" and type= "image".

Opera Safari Chrome Firefox Internet Explorer

Instance

Has two two commit buttons and an HTML form for different actions:

Formenctype Property

The Formenctype property specifies how the form data (FORM-DATA) is encoded when it is submitted to the server (only for method= "POST" forms).

The Formenctype property overrides the Enctype property of the <form> element.

The Formenctype property applies to type= "Submit" and type= "image".

Opera Safari Chrome Firefox Internet Explorer

Instance

Send the default encoding and form data (FORM-DATA) encoded as "Multipart/form-data" (the second submit button):

<form action= "demo_post_enctype.asp" method= "POST" > First   Name: <input type= "text" name= "FName" >< br>   <input type= "Submit" value= "Submit" >   <input type= "Submit" formenctype= "Multipart/form-data" "   value=" Submit as Multipart/form-data "></form>

FormMethod Property

The FormMethod property defines the HTTP method used to send form data (Form-data) to the action URL.

The FormMethod property overrides the method property of the <form> element.

The FormMethod property applies to type= "Submit" and type= "image".

Opera Safari Chrome Firefox Internet Explorer

Instance

The second submit button overrides the form's HTTP method:

<form action= "action_page.php" method= "get" > First   Name: <input type= "text" name= "FName" ><br> Last   name: <input type= "text" name= "lname" ><br>   <input type= "Submit" value= "Submit" >   <input type= "Submit" formmethod= "POST" formaction= "demo_post.asp"   

Formnovalidate Property

The Novalidate property is a Boolean property.

If set, specifies that the <input> element is not validated when the form is submitted.

The Formnovalidate property overrides the Novalidate property of the <form> element.

The Formnovalidate property can be used to type= "submit".

Opera Safari Chrome Firefox Internet Explorer

Instance

A form with two submit buttons (verified and not verified):

Formtarget Property

The name or keyword specified by the Formtarget property indicates where the received response is displayed after the form is submitted.

The Formtarget property overrides the target property of the <form> element.

The Formtarget property can be used with type= "submit" and type= "image".

Opera Safari Chrome Firefox Internet Explorer

Instance

This form has two commit buttons that correspond to different target windows:

Height and Width properties

The Height and Width properties specify the heights and widths of the <input> element.

The height and Width properties are used only for <input type= "image" >.

Note: Always specify the dimensions of your image. If the browser is not clear about the image size, the page will blink when the image loads.

Opera Safari Chrome Firefox Internet Explorer

Instance

Define the image as the submit button and set the height and Width properties:

List Property

The <datalist> element referenced by the List property contains predefined options for the <input> element.

Opera Safari Chrome Firefox Internet Explorer

Instance

Use <datalist> to set the <input> element for predefined values:

The difference between DataList and select (drop-down list):

Select:5 1 of the values inside the selection ;
DataList: You can fill in the text box, or you can select 1 of the following 5 values.

Min and Max properties

The Min and Max properties specify the minimum and maximum values for the <input> element.

The Min and Max properties apply to the type of input you want: number, Range, date, datetime, datetime-local, Month, time, and week.

Opera Safari Chrome Firefox Internet Explorer

Instance

<input> elements with minimum and maximum values:

Enter a date before 1980-01-01:<input type= "date" name= "Bday" max= "1979-12-31" > enter a date after 2000-01-01:<in Put type= "date" name= "Bday" min= "2000-01-02" > Quantity (between 1 and 5): <input type= "number" name= "Quantity" min= " 1 "max=" 5 ">

Multiple Property

The Multiple property is a Boolean property. You can select files!

If set, specifies that the user is allowed to enter more than one value in the <input> element.

The Multiple property applies to the following input types: email and file.

Opera Safari Chrome Firefox Internet Explorer

Instance

File upload fields that accept multiple values:

Pattern Property

The Pattern property specifies the regular expression used to check the value of the <input> element.

The Pattern property applies to the following input types: text, search, URL, tel, email, and password.

Tip: Use the global Title property to describe the pattern to help the user.

Tip: Learn more about regular expressions in our JavaScript tutorials.

Opera Safari Chrome Firefox Internet Explorer

Instance

Can only contain three-letter input fields (no numbers or special characters)

Placeholder Property

The placeholder property specifies a hint that describes the expected value of the input field (sample value or a short description of the format ).

The prompt appears in the input field before the user enters a value.

The placeholder property applies to the following input types: text, search, URL, tel, email, and password.

Opera Safari Chrome Firefox Internet Explorer

Instance

Input fields that have placeholder text:

Required Property

The Required property is a Boolean property.

If set, the input fields must be filled in before submitting the form .

The Required property applies to the following input types: text, search, URL, tel, email, password, date pickers, number, checkbox, radio, and file.

Opera Safari Chrome Firefox Internet Explorer

Instance

Required input fields:

Step Properties

The step attribute specifies the legal number interval for the <input> element.

Example: If step= "3", then the legal number should be-3, 0, 3, 6, and so on.

Tip: The Step property can be used together with the Max and Min properties to create a range of legal values.

The Step property applies to the following input types: number, range, date, datetime, datetime-local, Month, time, and week.

Opera Safari Chrome Firefox Internet Explorer

Example

An input field with a specific legal number interval:

Code for the exercise:

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>insert title here</title>
<body>
<!--form forms are used to define forms, and table is used for components such as ordered layout text boxes--
<form>
<fieldset>
<legend> Registration and User Login page </legend>
<table>
<tr>
<td><input type= "Radio" name= "Sex" value= "male" > Boys <br/></td>
</tr>
<tr>
<td><input type= "Radio" name= "Sex" value= "female" > Girls <br/></td>
</tr>
<tr>
<td> User name:</td>
<td><input type= "text" name= "username" value= "Zhang San" disabled></td>
<td><input type= "text" name= "asdf" placeholder= "Jack Chen" required= "required"/></td>
</tr>
<tr>
<td> Password:</td>
<td><input type= "Password" name= "passwd" autofocus= "Autofocus" ></td>
</tr>
<tr>
<td><input type= "button" name= "Submit" value= "Submission" ></td>
<td><input type= "button" name= "reset" value= "reset" ></td>
</tr>
<tr>
<select name= "Country" >
<option value= "America" selected> USA </option>
<option value= "China" > Chinese </option>
<option value= "Korea" > Korea </option>
</select>
</tr>
</table>
</fieldset>
</form>
<textarea name= "message" rows= "ten" cols= ">"
The cat is playing in the garden.
</textarea>
<br>Enter a date after 1997-3-2:<br/>
<input type= "date" name= "D1" min= "1997-3-2" >
<input type= "Submit" ><br>
<input type= "range" name= "Rag1" min= "1" max= "ten" ><br>
<input type= "Month" Name= "M1" ><br>
<input type= "Week" name= "W1" ><br>
<input type= "Time" name= "T1" ><br>
<input type= "datetime" Name= "DT1" ><br>
<input type= "datetime-local" name= "DT-L1" ><br>
<input type= "Tel" name= "Tel1" ><br>
<input type= "file" Name= "img" multiple= "multiple" ><br>
</body>

Results:

HTML Input Property