What are the attributes of the input tag in html?

The attributes of the input tag in html are: type, required, pattern, step, placeholder, readonly, disabled, size, form, maxlength, autofocus, min, max, etc.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

First let’s talk about the attributes of the html input tag:

1.type: This attribute is the only attribute that must be entered in the input tag. Of course, it can also be If 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.

Build a full-network web front-end full-stack database (general directory) to learn faster and have a firmer grasp. You deserve it (continuously updated)

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">
<p>
<label for="admin">admin</label>
<input type="text" id="admin" form="form1"/>
</p>
</form>

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.

Extended information

Now let’s talk about the usage of input tag:

Let’s first look at an example of 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 acceptable, and it is also the simplest input box style. What we are going to talk about today should be simple, and simple 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 you need the user 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=”...”>

注意：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

说明：multipart 控件是否上传多文件

推荐学习：html视频教程

The above is the detailed content of What are the attributes of the input tag in html?. For more information, please follow other related articles on the PHP Chinese website!