Home > Article > Web Front-end > What are the attributes of the html input tag? Summary of usage of input tag (with examples)
This article mainly introduces you to the attributes of the html input tag, as well as a summary of the specific usage of the html input tag. Let's take a look at the uses of the html input tag
First let's talk about the attributes of the html input tag:
1.type: This attribute is input The only attribute in the tag that must be entered. Of course, it can also be left blank. The default is type = "text". The specific values it has will be discussed later.
2.required: Mark whether a field is required. If a field is marked as required = "required" (in strict mode), or required (in relaxed mode) (ps: the following attributes are written in the same way, so they are not written out one by one), and the value of this field is empty , or the value filled in is an invalid value, then the form cannot be submitted. What is an invalid value? Look at the pattern attribute.
3.pattern: This attribute contains a JavaScript-style regular expression. The input content must completely match the regular expression, otherwise the input content will be invalid. Don’t know about regular expressions? You can take a look at JavaScript regular expressions.
4.min max: These two attributes are used for date, time, time and other inputs, as well as number and range. As the name suggests, their role is to limit the maximum and minimum values.
5.step: Similar to max min, its function is to provide a button that can be clicked up and down. For example, the current number is 1, and you set step = "5". Click the up button and it will become 6. .
6.placeholder: There is not much to say about this attribute. Everyone should be familiar with it. It is generally used to prompt the user to input. When the user actually enters text, it will be overwritten by the entered text.
7.readonly: As the name suggests, this property makes the form empty control uneditable. The non-editability here does not mean that it is disabled, but that the text cannot be edited. For example, radio and checkboxes are inherently non-editable, so this attribute is meaningless to them.
8.disabled: This attribute disables a form element. This is disabled, completely disabling all form elements except
9.maxlength: This attribute is used to limit the maximum number of words entered by the user.
10.size: It has no practical effect anymore. Controlling the size is almost always controlled by CSS.
11.form: In HTML5, there is no need to nest form controls in a form. The new form attribute can associate form elements with any form on the page. It can also be nested in a form and submitted with another form. 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. If the input does not have a form attribute, then it will be associated with the form closest to it.
12.autocomplete: As the name suggests, autocomplete, the user inputs part of the input, and the rest is automatically completed. The browser needs to save the content entered by the user so that it can be automatically completed next time.
13.autofocus: This attribute means that this form control automatically obtains focus when the page is loaded.
The above are the attributes of the html input tag. (If you want to see more, come to the PHP Chinese website. Here is the most complete HTML video tutorial)
Now let’s talk about the usage of input tags:
Let’s take a look at an example of the html input tag:
<form action="demo_form.asp"> 用户名: <input type="text" name="fname"><br> 输入框: <input type="text" name="lname"><br> <input type="submit" value="提交"> </form>
The effect of this is as shown in the figure:
The effect is still OK, It is also the simplest input box style. What we are going to talk about today is simple. Simple also means easy to understand.
Let’s talk about the usage summary of html input tag:
1. Text box:
In the form, Text boxes are used to allow users to enter letters, numbers, etc., such as the user's name, address, etc.
The code format is as follows:
<input type=”text” name=”...” size=”...” maxlength=”...” value=”...”/>
2. Password box:
is a special text field used to enter passwords.
The code format is as follows:
<input type=”password” name=”...” size=”...” maxlength=”...” value=”...”/>
3. Hidden domain:
is an invisible element used to collect or send information, for web page access To the user, the hidden domain is invisible. When the form is submitted, the hidden field will send information to the server with the name and value you defined when setting it up.
The code format is as follows:
<input type=”hidden” name=”...” value=”...”/>
4. Radio button:
Use radio button when the user is required to select one from a limited number of options. button. For example, we choose our 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 among the options to be selected. Each checkbox is an independent 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: Use this When selecting a function, specify the method attribute in the form tag. To specify the method as post, the enctype attribute is specified as multipart/form-data.
Description: Whether the multipart control uploads multiple files
The above is an introduction to the attributes of the html input tag in this article, as well as a summary of the usage of the html input tag. If you have any questions, you can leave a message below.
【Editor’s Recommendation】
How to make a html drop-down menu? Code example introduction to html drop-down menu
The above is the detailed content of What are the attributes of the html input tag? Summary of usage of input tag (with examples). For more information, please follow other related articles on the PHP Chinese website!