This is the 11th day of my participation in the August More text Challenge. For details, see: August More Text Challenge
Thank you for meeting me. Hi, I’m Ken
Author: Please call me Ken link: juejin.cn/user/109118… Source: gold mining copyright belongs to the author. Commercial reprint please contact the author to obtain authorization, non-commercial reprint please indicate the source.
🌊🌈
Part of the content and pictures of this article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the homepage).
This blog is suitable for those who are new to HTML and those who want to review after a long time
🌊🌈 About:
Other attributes of the 7.3.2_input element
In addition to the type attribute, the < input/> tag can define many other attributes to implement different functions.
(1) autofocus attribute
When you visit the Google home page, the text input box on the page automatically gets cursor focus for typing keywords. In HTML5, the Autofocus attribute is used to specify whether the page automatically gets focus after loading.
Example: Demonstrating the use of the Autofocus property,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The use of the AutoFocus property</title>
</head>
<body>
<form action="#" method="get">Please enter search keywords:<input type="text" name="user_name" autocomplete="off" autofocus="autofocus"/>
<br/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Copy the code
In the above code, you first add a < input /> element to the form and then set autocomplete to off with “autoComplete =” off “. Also, set the AutoFocus property to AutoFocus to specify that the focus is automatically obtained after the page has loaded.
After running, you can see that the < input /> element input box automatically gets focus after the page loads, and autocomplete is turned off.
(2) the form properties
Before HTML5, if a user wanted to submit a form, the relevant control elements had to be placed inside the form, between the < form> and < /form> tags. Controls on the page that are not children of the form are simply ignored when the form is submitted.
The FORM attribute in HTML5 allows you to write a child element in a form anywhere on the page by specifying the form attribute for the element and setting the attribute value to the table ID. In addition, the Form property allows you to specify that a form control belongs to multiple forms.
Example: Demonstrate the use of the form attribute,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The use of the AutoFocus property</title>
</head>
<body>
<form action="#" method="get" id="user_form">Please enter your name:<input type="text" name="first_name"/>
<input type="submit" value="Submit" />
</form>
<p>The following input box is outside the form element, but because the form attribute is specified as the form ID, it is still part of the form.</p>Please enter your name:<input type="text" name="last_name" form="user_form"/><br/>
</body>
</html>
Copy the code
In the example above, two < input /> elements are added, and the second < input /> element is not in the < form> < /form> tag. Also, specify that the value of the form attribute for the second < input /> element is the id of the form.
At this point, if you enter a name and a nickname in the input box, first_name and last_name will be assigned to the input values, respectively. For example, enter “Zhang SAN” for name and “Xiao Zhang” for nickname
Then click the “submit” button, and in the browser address bar, you will see the words “first_name= threes &last_name= small sheets”, indicating that the server received “name=” threes “and” name= “small sheets”.
If the second < input/> tag has no form= “user_form”, repeat the previous step, and the server will only receive data with “name =” three “.
- Note: The _ form attribute applies to all input input types. When you use it, you simply refer to the ID of the form to which you belong.
(3) the list of attributes
In the previous section, you learned how to use the datalist element to achieve the drop-down effect of alist of data. The list attribute is used to specify the datalist element to which the input box is bound. Its value is the ID of a datalist element.
Example: to improve the use of the list attribute,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Use of the list attribute</title>
</head>
<body>
<form action="#" method="get">Please enter the url:<input type="url" list="url_list" name="weburl"/>
<datalist id="url_list">
<option label="Sina" value="http://www.sina.com.cn"></option>
<option label="Sohu" value="http://www.sohu.com"></option>
<option label="Ken's blog." value="https://blog.csdn.net/kenken_"></option>
</datalist>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Copy the code
In the above case, add the input and datalist elements to the form, respectively, and specify the list attribute of the < input /> element as the ID value of the datalist element.
Clicking on the input box will bring up a list of defined urls,
(4) multiple attributes
The Multiple attribute specifies that the input box can select multiple values. This attribute applies to input elements of type email and File. When the muliple attribute is used for the input element of the email type, it means that multiple E-mail addresses can be entered into the text box, separated by commas (,). The multiple attribute, when used for input elements of type File, indicates that multiple files can be selected.
Example: Demonstrate the use of the muliple attribute,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Use of the multiple attribute</title>
</head>
<body>
<form action="#" method="get">Email address:<input type="email" name="myemal1" multiple="multiple"/> (If you have multiple email addresses, separate them using commas)<br/><br/>Upload photos:<input type="file" name="selfile" multiple="multiple"/>
<br/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Copy the code
In the example above, add the email type and file type input elements, respectively, and use the mulitiple attribute to specify that the input field can select multiple values.
If you want to enter multiple e-mal addresses into the text box, you can separate the addresses by comma: If you want to select multiple photos, you can select multiple files by pressing the CTRL key,
(5) min, Max, and step attributes
The MIN, Max, and step attributes in HTML5 are used to specify limits for input types that contain numbers or dates. This means that input boxes of these types have a numeric constraint that applies to date, pickers, number, and range tags. The specific attributes are described as follows:
- Max: Specifies the maximum input value allowed in the input box.
- Min: specifies the minimum input value allowed by the input box.
- Step: Specifies a valid number interval for the input box. If this parameter is not set, the default value is 1.
Since the use of min, Max, and step attributes was shown earlier when we introduced the number type of the input element, we will not use them here.
(6) the pattern attribute
The pattern attribute is used to verify that the user input matches the defined regular expression in the input type input box. The pattern attribute applies to < input/> tags for text, search, URL, tel, email, and password.
Common regular table expressions and descriptions
| Regular expressions | instructions |
|---|---|
| ^ [0-9] * $ | digital |
| ^\d{ n }$ | N digits |
| ^\d{ n, }$ | At least n digits |
| ^\d( m,n )$ | M minus n digits |
| ^(0 vertical line [1-9] [0-9] *)$ | Numbers beginning with zero and non-zero |
| ^([1-9][0-9]*)+(.[0-9] {1,2}? $ | A non-zero – beginning digit with at most two decimal digits |
| ^ (vertical bar +)? \d+(.\d+)? $ | Positive, negative and decimal numbers |
| ^\d+ |
Non-negative integer |
| ^ – [1-9] \ d * vertical bar 0 |
A positive integer |
| ^ [\u4e00-\u9fa5] { 0, }$ | Chinese characters |
| ^ [A-Za-z0-9]+ |
English and Numbers |
| ^ [A-Za-z]+$ | A string of 26 English letters |
| ^ [A-Za-z0-9]+$ | A string of 26 letters and numbers |
| ^ \w+ |
A string of 26 letters, digits, or underscores (_) |
| ^\u4E00-\u9FA5A-Za-z0-9_ ]+$ | Chinese, English, and numbers including underscores |
| ^\w+([-+.]\w+)* @\w+([-.]\w+)* \ .\w+([-.])\w+)*$ | The E-mail address |
| (a-za-z]+://[^\s]* or ^http://([\w-]+.) +[\w-]+(/[\w-./?%&=]* )? $ | The URL address |
| ^\d{15} \d{18}$ | Id Card Number (15 digits, 18 digits) |
| ^([0-9]){7,18}(x vertical x)? |
A short id number ending in a number or letter X |
| ^ [a-za-z] [a-za-z0-9_]{4,15}$ | Indicates whether the account is valid. (The account starts with a letter and contains 5 to 16 bytes. The account can contain letters, digits and underscores.) |
| ^ \ w [a zA – Z] {5} in 2 $ | The password must start with a letter and contain 6 to 18 letters, digits, and underscores (_) |
Example: Demonstrate understanding the pattern attribute and common regular expressions,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The pattern attribute</title>
</head>
<body>
<form action="#" method="get">
帐 No. :<input type="text" name="username" pattern="^ [a-za-z] [a-za-z0-9_] {4,15}$" />(Starting with a letter, 5 to 16 bytes are allowed, and underscore (_) is allowed)<br/>
密 Code:<input type="paasword" name="pwd" pattern="^[a-za-z]\w{5,17}$" />(The name must start with a letter and contain 6 to 18 letters, digits, and underscores.)<br/>Id No. :<input type="text" name="mycard" pattern="^\d{ 15 }|\d{ 18 }$" />(15 digits, 18 digits)<br/>E-mail address:<input type="email" name="myemail" pattern="^\w+([-+.J]\w+)*@\w+([-.]\ W+)*\.\w+([-.]\w+)*$"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Copy the code
In the above cases, lines 9 to 12 are used to insert the input boxes for “account number”, “password”, “ID number”, and “E-mail address”, respectively, and the pattern attribute is used to verify that the input matches the defined regular expression.
When the input does not match the defined regular expression format, click the “Submit” button,
(7) placeholder attribute
The placeholder property is used to provide hints for input types to describe what the input box expects from the user. Appears explicitly when the input field is empty, and disappears when the input field gains focus.
Example: Placeholder property
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Placeholder attribute</title>
</head>
<body>
<form action="#" method="get">Please enter zip code:<input type="text" name="code" pattern="[0-9] {6}" placeholder="Please enter a 6-digit zip code."/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Copy the code
In the example above, the pattern attribute is used to verify that the input zip code is a 6-digit number, and the placeholder attribute is used to prompt the input box for what to enter.
- Note: the _ placeholder attribute applies to < input/> tags whose type attribute values are text, search, URL, tel, email, and password.
(8) the required attribute
The input type in HTML5 does not automatically determine whether the user has entered content in the input box. If the developer makes the input box mandatory, specify the required attribute for the input element. The required attribute is used to specify that the input field cannot be empty, otherwise the user is not allowed to submit the form.
Example: Demonstrates the use of the required attribute,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The required attribute</title>
</head>
<body>
<form action="#" method="get">Please enter name:<input type="text" name="user_name" required=" required"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Copy the code
In the above case, the required attribute was specified for the < input/> element. When the input cabinet is empty, click the “Submit button” and a prompt message will appear, indicating that the user is allowed to submit the form only after entering the content.
That’s the end of today’s introductory study
Peace
🌊🌈
Akken’s HTML, CSS guide for getting started (1)_HTML basics akken’s HTML, CSS guide for getting started (2)_HTML page elements and attributes Akken’s HTML, CSS guide for getting started (3)_ Text style attributes Aken’s HTML, CSS getting started guide (four)_CSS3 selector Aken’s HTML, CSS getting Started guide (five)_CSS box model Aken’s HTML, CSS getting Started guide (six)_CSS box model Aken’s HTML, CSS getting Started guide (seven)_CSS box model Akken’s HTML, CSS guide for getting started (eight)_CSS box model akken’s HTML, CSS guide for getting Started (nine)_ Floating and positioning Akken’s HTML, CSS guide for getting started (ten)_ Floating and positioning Akken’s HTML, CSS Guide for getting started (eleven)_ Floating and positioning Ken’s HTML, CSS guide for getting started (12)_ Form application
🌊🌈 About postscript:
Thank you for reading, I hope it can help you if there are flaws in the blog, please leave a message in the comment area or add contact information in the personal introduction of the home page
Original is not easy, “like” + “comment” thanks for supporting ❤