Table of contents
single line input box
＜ input type=“text”/＞
The single-line text input box is often used to input short information, such as user name, account number, etc. Common attributes include name, value, and maxlength.
password input box
＜ input type=" password"/＞
The password input box is used to enter the password, and its content will be displayed in the form of dots.
single button
＜ input type=" radio"/＞
Radio buttons are used for single selection, such as selecting gender, whether to operate, etc. It should be noted that when defining a radio button, you must specify the same name value for the options in the same group, so that "single selection" will take effect. Additionally, the checked attribute can be applied to radio buttons to specify a default checked item.
check box
＜ input type=" checkbox"/＞
Check boxes are often used for multiple choices, such as selecting interests, hobbies, etc., and the checked attribute can be applied to it to specify the default selected item.
normal button
＜ input type=" button"/＞
Ordinary buttons are often used in conjunction with the Javascript scripting language, which is enough for beginners to understand.
submit button
＜ input type=" 'submit"/＞
The submit button is the core control in the form, and the user generally needs to click the submit button to submit the form data after completing the information input. You can apply the value attribute to it to change the default text on the submit button.
reset button
＜ input type=" reset"/＞
When the information entered by the user is incorrect, the reset button can be clicked to cancel all the entered form information. You can apply the value attribute to it to change the default text on the reset button.
Submit button in image form
＜ input type=" image"/＞
The submit button in image form is basically the same as the normal submit button in function, but it replaces the default button with an image, which is more beautiful in appearance. It should be noted that the url address of the image must be specified for defining the src attribute.
hidden field (hidden text)
Hidden fields are invisible to users and are usually used for background programs, so beginners can understand them.
file field
＜ input type=“file”/＞
When defining the file field, a "Select File" button and prompt message text will appear on the page, and the user can submit the file to the background server by clicking the button and directly selecting the file.
email type
＜ input type=“email”/＞
The emai type tag is a text input box specially used for inputting an E-mail address, and is used to verify whether the content of the email input box conforms to the E-mail address format; if not, a corresponding error message will be prompted.
url type
＜input type “url”/＞
The <input/> tag of type Url is a text box for entering a URL address. If the entered content is text in the URL address format, the data will be submitted to the server; if the input value does not conform to the URL address format, the submission will not be allowed and a prompt message will be displayed.
tel type
＜ input type=“tel”/＞
The tel type is used to provide a text box for inputting a telephone number. Since the formats of telephone numbers vary widely, it is difficult to implement a common format. Therefore, the tel type is usually used in conjunction with the pattern attribute.
type of search
＜ input type=" search"/＞
The search type is a text box specially used for inputting search keywords, and it can automatically record some characters, such as site search or Google search. After the user enters the content, there will be a delete icon on the right side, click this icon button to quickly clear the content.
color type
＜ input type=" color"/＞
The color type is used to provide a text box for setting the color, which is used to realize an RGB color input. Its basic form is #RRGGBB, the default value is #000000, and the default color can be changed through the value attribute value. Click the clor type text box to quickly open the color picker panel, which is convenient for users to visually select a color.
number type
＜ input type=" number/＞
The <input/ tag of type number is used to provide a text box for entering a value. When submitting the form, it will automatically check whether the content in the input box is a number. If the input content is not a number or the number is not within the limited range, an error message will appear.
The input box of the number type can limit the number entered, specify the maximum and minimum values allowed, legal digital intervals or default values, etc. The specific attributes are described below.
● vale: specifies the initial value of the input box
●max: Specify the maximum input value that the input box can accept.
min: Specifies the minimum input value that the input box can accept.
●sep: Enter the legal number interval of the field, if not set, the default value is 1.
range type
＜ input type=" range"/＞
The <inpu tag of the range type is used to provide an input range of values within a certain range, which is displayed as a slider on the web page. Its commonly used attributes are the same as the number type. Through the min attribute and max attribute, you can set the minimum and maximum values, and specify the stride of each slide through the step attribute. If you want to change the vale value of mnge, you can directly drag the slider or click the slider to change it.
Date pickers type
＜ input type= date， month，week…"/＞
The Date picker type refers to the date and time type. HML provides multiple input types for selecting date and time, which are used to verify the input date and specificity.
Date: select day, month, year
Month: Select the month and year
Week: select week, year
Time: Select time (hours and minutes)
Datetime: select time, day, month, year (UTC time)
datetime-local: select time, day, month, year (local time)
UTC is the English abbreviation of Universal Time Coordinated, that is, "Coordinated Universal Time", also known as Universal Time. Simply put, UTC time is the time in time zone 0. For example, if Beijing time is 8 am, UTC time is 0:00, that is, UC time is 8 hours later than Beijing time.
other
For markup input types that are not supported by browsers, they will be displayed as a normal input box (text) in the web page