This is the ninth 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:

7.1_ Understand forms

“Forms” may be unfamiliar to readers, but they are ubiquitous on the Internet. For example, the user name and password input on the registration page, gender selection, and the submit button are all defined with form-related tags. Simply put, a “form” is an area of a web page that is used to enter information and to interact with the user. Next, we’ll walk the reader through and create the form.

7.1.1_ Form composition

On a Web page, a complete form usually consists of three parts: form controls (also known as form elements), prompts, and form fields.

The form controls, prompts, and form fields are explained as follows:

  • Form control: contains specific form function items, such as single-line text input box, password input box, check box, submit button, search box, etc.
  • Prompts: A form usually also needs to contain some descriptive text to prompt the user to fill in and operate.
  • Form field: A container that holds all the form controls and prompts. It defines the URL of the application that handles the form data and how the data is submitted to the server. If the form fields are not defined, the data in the form cannot be passed to the backend server.

7.1.2_ Creating forms (< form> tag)

In HTML5, the < form> < /form> tag is used to define the form field, that is, to create a form for the collection and delivery of user information. All content in < form> < /form> is submitted to the server. The basic syntax for creating a form is as follows:

<form action="Url" method="Method of Submission" name="Form Name">
<! -- Various form controls -->
</form>
Copy the code

In the syntax above, the form controls between < form> and < /form> are user-defined. Action, Method, and name are the common properties of the < form> tag, which are used to define the URL address, submission mode, and form name, respectively.

Example: Demonstrate the creation of a form,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Create a form</title>
</head>
<body>

<form action="http://www.mysite.cn/index.asp" method="post">
<! -- Form field -->Account:<! -- Info -->
<input type="text" name="zhanghao" /> <! -- Form Control -->Password:<! -- Info -->
<input type="password" name="mima"/>  <! -- Form Control -->
<input type="submit" value="Submit"/>   <! -- Form Control -->
</form>

</body>
</html>
Copy the code

The result is a complete form structure, with form tags and tag attributes described later in this chapter.

7.2_ Form properties

In HTML5, the form has multiple attributes. By setting the attributes of the form, different form functions such as submission mode, auto completion and form validation can be realized.

The attributes of the form tag are described below.

1. The action attribute

_ After the form has collected information, it needs to be passed to the server for processing. The action property specifies the URL of the server program that receives and processes the form data. Such as:

<form action="form_action.asp">
Copy the code

Means that when the form is submitted, the form data is sent to a page named “form_action.asp” for processing.

The attribute value of the action can be either a relative or absolute path, or the E-mail address to which the data is received.

Such as:

<form action=mailto: htmlcss@163.com>
Copy the code

Indicates that form data is emailed when the form is submitted.

2. The method attribute

The _ method attribute is used to set how the form data should be submitted. The value can be GET or POST. In HTML5, you can use the Method attribute of the form tag to indicate how the form processing server processes the data. _

<form action="form_action.asp" method="get">
Copy the code

In the code above, get is the default value for the method attribute, and with GET, the browser establishes a connection to the form-processing server and sends all the form data directly in one transfer step.

If the POST method is used, the browser will send the data in the following two steps. First, the browser connects to the form-processing server specified in the Action property, and then the browser sends the data to the server in a piecework transmission.

In addition, the data submitted by the GET method is displayed in the address bar of the browser, with poor confidentiality and limited data volume. Using method= “post” allows a large amount of data to be submitted.

3. The name attribute

The _ name attribute is used to specify the name of the form to distinguish multiple forms on the same page.

4. The autocomplete attribute

The _ autoComplete property is used to specify whether the form has autocomplete. The so-called “autocomplete” is to record the input of the form control, and when you enter it again, the history of the input is displayed in a drop-down list to achieve auto-complete input. The _ autocomplete property has two values, which are explained as follows:

  • On: The form has auto-complete function.
  • “Of” : The form has no auto-complete function.

Example: Specify the autoComplete property for the < form> tag on the page and specify the value of the property as on,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The use of the autoComplete property</title>
</head>
<body>

<form id="forBox" autocomplete="on">User name:<input type="text" id="autofirst" name="autofirst"/><br/><br/>
昵&nbsp;&nbsp;Said:<input type="text" id="autosecond" name="autosecond" /><br/><br/>
<input type="submit" value="Submit"/>
</form>

</body>
</html>
Copy the code

Figure 7-4 shows the running effect.

At this point, enter “12221” in the text input box for “User name” and click the “Submit” button. Then, click the “User name” text input box, the effect looks like the following:

As you can see from the figure above, setting the autoComplete property to “on” enables the form control to have auto-complete. It is worth mentioning that the AutoComplete property can be used not only for form elements, but also for input elements of all input types.

5. Novalidate properties

The novalidate property specifies that the form is not checked for validity when it is submitted. When you set this property for the form, you can turn off validation for the entire form, so that all form controls within the form are not validated.

Example: To demonstrate the use of the novalidate property,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The novalidate property cancels form validation</title>
</head>
<body>

<form action="form_action.asp" method="get" novalidate="true">Please enter email address:<input type="email" name="user_email"/>
<input type="submit" value="Submit"/>
</form>

</body>
</html>
Copy the code

In the code above, apply the “novalidate =” true “style to the form tag to cancel form validation.

Run the example above and enter the email address “123456” in the text box. At this point, click the “Submit” button. The form will not validate the entered form data. — — — — — — — — — — — — – note:

The properties of the < form> tag do not directly affect the display of the form. For a form to make sense, you must add a corresponding form control between < form> and < /form>.

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

🌊🌈 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 ❤