What are the attributes of the HTML input tag? Summary of usage of input tags (with examples)

This article focuses on the properties of the HTML input tag, as well as the specific usage summary of the HTML input tag. Let's take a look at what the HTML input tag does.

First of all, the properties of the HTML input tag:

1.type: This property is the only attribute that must be entered in the input tag, and of course, it can be blank, and the default is type = "Text". Specifically it has those values, which we'll discuss later.

2.required: Marks whether a field is required. If a field is marked as required = "required" (in strict mode), or required (in loose mode) (PS: The following attribute is written in the same way, not all of them), and the value of this field is empty, or the value entered is an invalid value, the form cannot be submitted. What is an invalid value? Look at the Pattern property.

3.pattern: This property contains a JavaScript-style regular expression, and the input must match the regular expression exactly, otherwise the input is invalid. Not familiar with regular expressions? You can take a look at JavaScript regular expressions.

4.min Max: These two properties are used for inputs such as date datetime time, and number and range. As the name implies, their function is to limit the maximum value, the minimum value.

5.step: Similar to Max min, the function is to provide a button that can be up and down, such as the current number is 1, you set the step = "5", click on the button, it becomes 6.

6.placeholder: This property does not say, everyone should be very familiar with, is generally used to prompt the user input, when the user really entered the text, will be input text coverage.

7.readonly: As the name implies, this property makes the form blank control non-editable. The non-editable here is not disabled, but can not edit the text, such as a radio box radio, check box checkbox This is not editable, so this property is meaningless to them.

8.disabled: This property disables a form element. This is disabled, completely disabling all form elements except <output>.

9.maxlength: This property is used to limit the maximum number of words a user enters.

10.size: There is no time for practical action, and control size is now almost always controlled by CSS.

11.form: In HTML5, there is no need for form controls to be nested in a form, and the new form property can associate form elements with any form on the page. can also be nested within a form, and as another form is submitted, the code is as follows:

<form id= "Form1" ></form><p><label for= "admin" >admin</label><input type= "text" id= "Admin" form= "Form1"/></p>

In this way, the form and input are linked together. If input does not have a form attribute, it will be associated to the form form that is closest to him.

12.autocomplete: As the name implies, automatic completion, user input part, the following auto-completion. The browser needs to save the user input for the next auto-completion.

13.autofocus: This attribute means that the form control automatically receives focus when the page is loaded.

These are the attributes of the HTML input tag. (Want to see more topic.alibabacloud.com, here is the most complete HTML video tutorial)

Now, let's talk about the use of the input tag:

Let's look at an example of an HTML input tag:

<form action= "demo_form.asp" > User name: <input type= "text" name= "fname" ><br> input box: <input type= "Text" Name= "lname" ><br><input type= "Submit" value= "Submission" ></form>

The effect of this

The effect is still possible, but also the simplest type of input box, we will speak today is simple, simple also means easy to understand.

Say a summary of the usage of the HTML input tag:

1. Text box:

In a form, a text box is used to let the user enter letters, numbers, and so on, such as the user's name, address, and so on.

The code format is as follows:

<input type= "text" name= "..." "size=" ... "maxlength=" ... "value=" ... "/>

2. Password box:

is a special text field that is used to enter a password.

The code format is as follows:

<input type= "password" name= "..." size= "..." maxlength= "..." value= "...  "/>

3. Hidden fields:

is an invisible element used to collect or send information, and for Web visitors, hidden fields are invisible. When a form is submitted, the hidden field sends the information to the server with the name and value that you defined when you set it.

The code format is as follows:

<input type= "hidden" name= "..." value= "..."/>

4. Radio button:

Use the radio button when a user is required to select one from a limited number of options. For example, we choose weight when registering.

The code format is as follows:

<input type= "Radio" name= "..." value= "..."/>

5. check box:

Allows more than one option to be selected in the Pending option. Each check box is a separate element and must have a unique name.

The code format is as follows:

<input type= "checkbox" Name= "..." value= "..."/>

6. File Upload box:

The code format is as follows:

<input type "file" Name= "..." >

Note: When you use this feature, you specify the method property in the Form tab. To designate method as post, the Enctype property is specified as Multipart/form-data.

Description: Whether the multipart control uploads multiple files

The above is an introduction to the properties of the HTML input tag, as well as a summary of the usage of the HTML input tag, there are questions to ask in the comments below.