The form in real life is similar to the form we fill out when we go to the bank to apply for a credit card. The following figure

1. :

The purpose of the form is to collect user information.

In our web pages, we also need to interact with users and collect user data, and we also need forms.

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

2. Form controls:

Contains specific form function items, such as single-line text entry box, password entry box, check box, submit button, reset button, etc.

3. Prompt message:

A form also usually contains some descriptive text that prompts the user to fill in and do something about it.

4. Form fields:

It acts as a container for all form controls and prompts, and defines the URL address of the application used to process the form data, as well as the method of submitting the data to the server. If you do not define a form field, the data in the form cannot be sent to the backend server.

5. Input control

5.1. Grammar:

<input type=" attribute value "value=" hello ">Copy the code
  • Input Meaning of input
  • The tag is a single tag
  • The type property sets different property values to specify different control types
  • There are other attributes besides the Type attribute

5.2. Common Attributes:

attribute Attribute values describe
type text A single-line text input box
password Password input box
radio The radio button
checkbox Check box
button Ordinary button
submit The submit button
reset The reset button
image Submit button in image form
file File domain
email(H5) Restrict user input to Email
url(H5) Restrict user input to URL type
date(H5) Restrict user input to a date type
time(H5) Restrict user input to time type
month(H5) Restricted user input must be a month type
week(H5) Restrict user input must be weekly
number(H5) Restrict user input to be numeric
tel(H5) Mobile phone number
search(H5) The search box
color(H5) Generate a color selection form
name This parameter is user-defined Control name
value This parameter is user-defined The default text value in the INPUT control
size Positive integer The display width of the Input control on the page
checkbox checked Defines the items selected by default for the selection control
maxlength Positive integer Control allows the maximum number of characters to be entered
required(H5) required Having this property means that the form cannot be empty and must be filled in
placeholder(H5) Tooltip text The prompt message of the form will not be displayed if there is a default value
autofocus(H5) autofocus Autofocus property, which automatically focuses the page to the specified form after loading
autocomplete(H5) off / on When the user starts typing in the field, the browser should display the options to fill in the field based on the values you typed earlier. By default, autoComplete = “on” and autoComplete = “off” have been opened. ① Add the name attribute and ② submit successfully at the same time
multiple(H5) multiple You can select multiple file submissions

5.2.1. The type attribute

  • This property determines which input form you belong to by changing its value.
  • For example, type = ‘text’ indicates that the text box can be used as a user name, nickname, etc.
  • For example, type = ‘password’ indicates that the user’s input in the password field is invisible.
User name: <input type="text" /> password: <input type="password" />Copy the code

5.2.2. Value Value of an attribute

<input type="text" name="username" value=" please enter username" >Copy the code
  • Value Indicates the default text value. Some forms want to display a few text by default when the page is opened.

5.2.3 requires. The name attribute

<input type="text" name= "username" />Copy the code

Name Specifies the name of the form, so that the background can find the form using the name attribute. There are many forms on the page, and the main purpose of name is to distinguish between different forms.

  • The value after the name property is our own definition.
  • Radio if it’s a group, we have to give them the same name name so we can pick one of them
<input type="radio" name="sex" /> male <input type="radio" name="sex" /> femaleCopy the code
  • The name property, which we don’t use much right now, is a must as we learn about Ajax and the background.

5.2.4. Checked attribute

  • It is selected by default. More commonly seen in radio buttons and check buttons.
Sex gender: <input type="radio" name="sex" value=" male "checked ="checked" /> male <input type="radio" name="sex" value=" female "/> femaleCopy the code

This one above means that the male radio button is selected by default

5.2.5. Summary of input attributes

attribute instructions role
type Form type Used to specify different control types
value Form values The default text displayed in the form
name The form name There are many forms on the page, and the main purpose of name is to distinguish between different forms.
checked Selected by default Indicates that the radio or check button is initially selected

6. The label tag

6.1. The target:

Label The label is used to improve user experience. Improve the best service for users.

Concept: 6.2.

The label tag defines the annotation (label) for the input element.

6.3. :

Use to bind a form element that gets input focus when the label label is clicked.

6.4. How do you bind elements?

  1. The first use is to include the input form directly with a label.
<label> user name: <input type="radio" name="usename" value=" Please input user name" > </label>Copy the code

Suitable for a single form selection 2. The second use of the for attribute specifies which form element label is bound to.

<label for="sex"> Male </label> <input type=" name "="sex" id="sex">Copy the code

When we click the text inside the label label, the cursor is positioned inside the specified form

7. Textarea control (text field)

7.1. Grammar:

<textarea > Text content </textarea>Copy the code

7.2. :

You can easily create a multi-line text input box with the Textarea control.

Cols =” number of characters per row “rows=” number of rows displayed” which we don’t actually use

Text fields and text fields

The form The name of the The difference between Default display Used in the scene
input type=”text” The text box Only one line of text can be displayed Single label, with default values displayed by value User name, nickname, and password
textarea Text field Multiple lines of text can be displayed Double label, the default value is written in the middle of the label Message board

8. Select the drop-down list

8.1 purpose:

If there are multiple options for the user to choose from, we can use the Select control to define a drop-down list to save space.

8.2. Grammar:

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>.</select>
Copy the code
  • Note:
  2. When option is defined as selected =” selected “, the current item is selected by default.
  3. But our actual development will use less

9. Form field

9.1. How is collected user information transferred to the server?

Through the Form field

9.2 purpose:

In HTML, the form tag is used to define the form field to collect and deliver user information, and all content in the form is submitted to the server.

9.3. Grammar:

<form action="url "method=" submit method" name=" form name "> various forms </form>Copy the code

9.4. Common Attributes:

attribute Attribute values role
action The url address Used to specify the URL of the server program that receives and processes the form data.
method get/post Used to set the submission method of form data. The value can be GET or POST.
name The name of the Use to specify the name of the form to distinguish multiple forms on the same page.

9.5. Note:

Each form should have its own form field. We now do the page, do not write to see the effect, but if later learning ajax background interaction, you must need the form field.

10. Team appointments

10.1. Element attributes

  • Element attribute values use double quotation marks
  • Whatever the element attribute values can be

Recommendation:

<input type="text" />	
<input type="radio" name="name" checked="checked" />
Copy the code

Is not recommended:

<input type=text  />	
<input type='text' />	
<input type="radio" name="name" checked />
Copy the code