Tutorial on how to use HTML form tags

Forms are the most basic way to interact with user input and server-side data on a Web page. Here we focus on the most basic form content display and take a look at the HTML form form tag usage learning tutorial

In HTML Forms can be used to collect various types of input information from users. A form is actually an area containing 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, publishing articles, etc., which are all submitted to dynamic programs for processing through forms. This section mainly talks about forms and form elements. How to submit form information to dynamic programs will be discussed in future programming language lessons.
The area of ​​the form uses the

tag to define the scope of the form. The value of the element in

will be submitted to the corresponding address through this form.

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

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 moves the cursor to the box and clicks to move the cursor. Move into the frame. 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 tag

<form>  
文本域1:<input type=”text” name=”firstname” />  
文本域2:<input type=”text” name=”lastname” />  
</form>

The browser displays as follows:

Radio button
Radio button mostly appears in the options for users to enter information when registering. This type of multi-user only allows users to select one result.
The radio button is defined by setting the value of the type attribute to radio

<form>  
<input type=”radio” name=”sex” value=”male” /> 男生   
<input type=”radio” name=”sex” value=”female” /> 女生   
</form>

The display in the browser is:

Checkbox
Checkbox allows the user to check one or more corresponding options. A common one 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.
The check box is defined by setting the value of the type attribute to checkbox in the tag

<form>  
<input type=”checkbox” name=”val1″ />  
前端开拓者不错   
<input type=”checkbox” name=”val2″ />  
前端开拓者一般   
</form>

The browser displays as follows:

Drop-down menu
The drop-down menu is similar to the radio selection in information selection, but the drop-down menu can accommodate more information. And the dropdown menu can execute additional scripts after selecting the menu value.
The drop-down menu starts with , and each option tag in the select tag is a value in the drop-down menu.

<form>  
<select name=”cars”>  
<option value=”volvo”>Volvo</option>  
<option value=”saab”>Saab</option>  
<option value=”fiat”>Fiat</option>  
<option value=”audi”>Audi</option>  
</select>  
</form>

Browser display:

Submit button
The submit button is a necessary part of every form . After the user has entered the corresponding information, he needs to click the submit button to trigger the action and submit the form values ​​to the next page. When the action attribute in the

tag sets 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. The following is an example of the search box of the front-end developer, setting the submission address as the search page.

<form name=”input” action=”www.frontopen.com” method=”get”>  
关键字:   
<input type=”text” name=”s” id=”s” />  
<input type=”submit” value=”搜索” />  
</form>

The browser displays as follows:

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 more parameters and rules need to be set. 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 background programmer to complete website development.

For more HTML form tag usage learning tutorials and related articles, please pay attention to the PHP Chinese website!