HTML form tag usage learning tutorial

Forms in HTML can be used to collect various types of input information from users. A form is actually an area that contains form elements. The input information of various elements in this area will eventually be submitted to the program script through the form. For example, common ones include user login, registration, article publishing, etc., which are all submitted to the dynamic program for processing through forms. This section mainly discusses forms and form elements. How to submit form information to dynamic programs will be discussed in future programming language courses.
The form area is defined by the <form> tag. The values ​​of the elements in <form></form> will be submitted to the corresponding address through this form.

Input information
Generally, the <input> tag is used in forms to collect user input information, and the input type is determined by type.
The form tag used in most cases is the input tag (<input>). The input type is defined by the type attribute (type). Common input types include text fields, radio buttons, check boxes, drop-down menus, and so on.

Text Field
The text field can provide users with the function of inputting text. The browser will interpret the text field as a rectangular box. The user can move the cursor to the box and click to move the cursor into the box. Users can type letters, numbers, etc. into the form.
The text field is defined by setting the text value for the type attribute in the <input> tag.

The browser displays the following:

Radio Button
Radio buttons mostly appear in the options when users enter information during registration. This type of button is used when users are only allowed to select one result.
A radio button is defined by setting the value of the type attribute in the <input> tag to radio.

The browser displays:

Checkbox
Checkboxes allow users to select one or more options. A common feature is to provide users with functions such as remembering their login account when they log in. You can also collect multiple opinions from users on the user survey page.
To define a checkbox, set the value of the type attribute in the <input> tag to checkbox.

The browser displays the following:

Drop-down menu
A drop-down menu is similar to a radio button in terms of information selection, but it can hold more information. And the drop-down menu can execute additional scripts after selecting the menu value.
The drop-down menu starts with the <select> tag, and each option tag in the select tag is a value in the drop-down menu.

The browser displays:

Submit Button
A submit button is an essential part of every form. After the user has entered the corresponding information, he needs to trigger the action by clicking the Submit button to submit the form value to the next page. When the action attribute in the <form> tag is set to the corresponding submission address, the submit button will submit all the data obtained in the form to the page at this address.
The submit button is defined by setting the value of type to submit in the input tag. Below, taking the search box of the front-end developer as an example, set the submission address to the search page.

The browser displays the following:

Conclusion: This section only provides a basic demonstration and explanation of commonly used form front-end layout elements. Real form applications are mostly used in server programming languages ​​and require setting more parameters and rules. In this lesson, you only need to understand how to arrange the elements of the form. In most cases, you can basically cooperate with the backend programmers to complete the website development.