Shulou(Shulou.com)05/31 Report--

This article mainly explains the "html in the input tag attributes how to use", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "how to use the attributes of input tags in html" it!

The attributes of input tags in html are: type, required, pattern, step, placeholder, readonly, disabled, size, form, maxlength, autofocus, min, max and so on.

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

Let's start with 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 be left empty. The default is type = "text". Exactly what values it has, 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 properties are written in the same way, they are not written out one by one), and the value of the field is empty, or the value entered is invalid, then the form cannot be submitted. What is an invalid value? Look at the pattern property.

Create the full stack database of the whole network web front end (total catalog) to finish learning faster, master more firmly, you deserve to have (continuous update)

3.pattern: this attribute contains a JavaScript-style regular expression, and the input must exactly match the regular expression, otherwise the input is invalid. Don't know anything about regular expressions? Take a look at JavaScript regular expressions.

4.min max: these two attributes are used for inputs such as date, date time, time, as well as number and range. As the name implies, their function is to limit the maximum and minimum values.

5.step: similar to max min, the function is to provide a button that can go up and down. For example, if the current number is 1, you set step = "5", click the button on it, and it becomes 6.

6.placeholder: this attribute is not much to say, everyone should be very familiar with it. It is generally used to prompt the user for input. When the user really enters the text, it will be overwritten by the input text.

7.readonly: as the name implies, this property makes the form empty control uneditable. The non-editability here is not disabled, it's just that you can't edit the text, such as the radio box radio and the check box checkbox, which are inherently non-editable, so this attribute makes no sense 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 doesn't really work for a long time, and the size of control is now almost entirely controlled by CSS.

11.form: in HTML5, form controls are no longer necessary to be nested in a form, and the new form attribute can associate form elements with any form on the page. It can also be nested in one form, as another form is submitted, with the following code:

Admin

In this way, form is associated with input. If input does not have a form attribute, it will be associated with the nearest form form.

12.autocomplete: as the name implies, automatic completion, user input part, followed by automatic completion. The browser is required to save the content entered by the user so that it can be completed automatically next time.

13.autofocus: this property means that the form control automatically gets focus when the page is loaded.

These are the attributes of the html input tag.

Extended data

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

First, take a look at an example of the html input tag:

User name:

Input box:

The effect of this is shown in the picture:

The effect is still OK, and it is also the simplest input box style. What we are talking about today is simple, and simple also means that it is easy to understand.

Let's talk about the summary of the usage of the html input tag:

1. Text box:

In the form, text boxes are used to allow the user to enter letters, numbers, and so on, such as the user's name, address, and so on.

The code format is as follows:

two。 Password box:

Is a special text field for entering passwords.

The code format is as follows:

3. Hidden domain:

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

The code format is as follows:

4. Radio button:

Use the radio button when the user is asked to select one of the limited options. For example, we choose weight when we register.

The code format is as follows:

5. Check box:

Allows you to select more than one of the options to be selected. Each check box is a separate element and must have a unique name.

The code format is as follows:

6. File upload box:

The code format is as follows:

Note: when taking advantage of this feature, specify the method attribute in the form tag. To specify method as post, and the enctype attribute as multipart/form-data.

Description: whether the multipart control uploads multiple files

Thank you for your reading, the above is the content of "how to use the attributes of input tags in html". After the study of this article, I believe you have a deeper understanding of how to use the attributes of input tags in html, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.