The tag is one of the most common elements in our daily development, but I’m sure many of you used only a few types, such as: Text password button checkbox radio search number file Value ID name Disabled Checked placeholder title, etc., and the tag has a lot of utility properties and a lot of type that you can use to make your development more efficient, so let’s start with that.

inuptIs a form element

Use such a big title eye-catching description, is to remind students, in the front of the current popular layout is to use DIV and CSS, and then are used to ajax data submission way, this is not wrong, but to say, want to fully use the tag itself features, There are some attributes of that you must use in

form elements. Back in the old days, before Ajax became popular, we used to submit data using forms, the

tag, using the action property of the form, and our was an element that belonged to the

form, To use
well, more often than not, you need to use together with the form element. Here is a brief description of which
attributes and features need to be combined with the form element tag.

1. Practical attributes

The tag also has some useful attributes, some for validation purposes, some for special functions, such as the read-only readonly attribute. That is, the contents of the tag are for viewing and cannot be modified.

    1. Verify attributes;

`

<form action="/example/html5/demo_form.asp" method="get"> <label> </label> <input type='text' required /> <input type="submit" value=" submit" />Copy the code

`

This HTML code above, if the user is not input values, click submit, is not submitted, and will give a default prompt, please enter the field, feel good magic, is also not feel so familiar, like we often use some UI framework form validation, is modeled on this function to do, that is to say, it is the earliest. However, the required attribute must be used in the

form tag to be valid. There is only one validation attribute written above, and two useful ones below (=^_^=).

`

<form action="/example/html5/demo_form.asp" method="get"> <label>mobile: </label> <input type='number' pattern="[0-9]{3}" /> <-- pattern="[0-9]{3}" </label><input type="number" name="points" min="5" Max ="10" /> <-- min="5" Max ="10" Input min="5" Max ="10" These two attributes apply to type <input type="submit" /> </form>Copy the code

`

    1. Functional attributes;

`

Focus text box: <input type='number' autofocus="autofocus" /> Disable text box: <input type="text" disabled="disabled" /> Limit input length: <input type="text" maxLength ="6" /> Read-only text box: <input type="text" readonly="readonly" value=" read-only "/> The default check box is: <input type="checkbox" checked="checked"/>Copy the code

`

The above several < input > using the properties of the often do not look at the document, some people don’t know for certain, which a few is really super super practical, especially maxlength limit the length of the input and read-only readonly, many people don’t know the input has the two properties, is to use js to imitate to implementation, That’s a waste of performance.

Second, use the type attribute

Type is the core of the tag. The main function of the tag depends on the type of the tag. It can also be modeled with a few lines of js, but it would be a lot of lines of code to emulate this, and it is also js+ HTML ^_^’. Now that HTML is HTML5, also has a lot of new types to use. Here’s the code:

`

<input type="number" min="1" Max ="10" onchange="inputFn(Event)" /> Phone number type: <input type="tel" min="11" Max ="11" onchange="inputFn(event)" /> <input type="range" Max ="50" min="0" onchange="inputFn(event)"/> <input type="date" onchange="inputFn(event)" />Copy the code

`

In these several types, each I think is very practical, date type is the date control, the interface display requirements are not high, it is really completely enough, email type is the mailbox input control, the biggest characteristic of this type is its own mailbox rule verification, of course, this verification is not exactly… , but it also has another characteristic, that is, when the mobile terminal input, the input is the default keyboard out of the @ symbol, don’t need you to switch to the switch, the number type is also, this type allows you to enter the Numbers only, tel I don’t think it’s the type of difference is reflected on the platform, the PC, I measured down other characters can be input, but in the mobile terminal, It has the same function as number, you can only enter numbers.

Input tagfileThe file type

This type separate, there is a reason, because this type is not enter, but select the file to our hardware devices, the types of daily development actually with a lot of, especially the PC, but this type used in the mobile terminal, or have a different experience, so that here are mainly the application of mobile terminal is to use the file type. Here’s an example: ‘

<input type="file" onchange="inputFn(event)"/>
Copy the code

`

The default file type, without adding other attributes, will be used on mobile,ios will be the default pop option box

file
accept 

<input type="file" accept="image/*" onchange="inputFn(event)"/>
Copy the code

`

Add the accept attribute and assign the value “image/*”. On ios, the call will be the same as before, but on Android, the popup box will have two options: camera and file.

accept

`

Select excel < INPUT type=”file” Accept =”.xlsx” onchange=”inputFn(event)”/>

< INPUT type=”file” Accept =”.png” onchange=”inputFn(event)”/>

`

Accept is an attribute that defines the file type to be selected, and only applies to the file type. By default, only one file is selected at a time. At this point, another attribute that works with the file type is multiple: ‘

<input type="file" accept="image/*" onchange="inputFn(event)" multiple="multiple"/>
Copy the code

Multiple ‘can help us select multiple files at a time. In PC, you need to hold down Shift or CTRL to help you select multiple files. In mobile, you can select multiple files by opening album and entering file directory. But Android doesn’t seem to be able to…

Next, but what if we wanted to just turn on the camera function? Another attribute with file comes out:

`

<input type="file" Accept ="image/*" capture="camera"> <input type="file" Accept ="image/*" capture="user"> <input type="file" Accept ="video/*" capture="camcorder"> <input type="file" accept="video/*" capture="user"> <input type="file" accept="audio/*" capture="user">Copy the code

`

Capture =”camera”, capture=”camcorder”, capture=”camcorder” But Android can,

capture
accept
file

summary

There is no end to learning, accumulate over a long period of time, one day, we can also be a god. This sentence is my purpose to write this blog, my purpose is also to learn and summarize, to comb out their daily development encountered. If there is insufficient place, please leave a message to guide… By the way, (=^_^=)