How to use HTML form with multiple examples

Nine simple examples analyze the use of HTML form for your reference. The specific contents are as follows

1 form tag

How does the website interact with users? The answer is to use an HTML form. The form can transmit the data entered by the browser to the server, so that the server-side program can process the data passed by the form.
grammar:

<form method="Transmission method" action="Server file">

•<form>: <form> tags appear in pairs, starting with <form> and ending with </form>.
•action: The place where the data entered by the browser is sent, such as a PHP page (save.php).
•method: The method of data transmission (get/post).

All form controls (text boxes, text fields, buttons, radio buttons, check boxes, etc.) must be placed between the <form></form> tags (otherwise the information entered by the user cannot be submitted to the server!).
Method: The difference between post/get is a question that backend programmers need to consider. Interested friends can check out the wiki of this section, which contains detailed introduction.

2 input/text/password text and password input box

A text input box is used when users want to type letters, numbers, etc. into a form. Text boxes can also be converted into password input boxes.
grammar:

When type="text", the input box is a text input box;
When type="password", the input box is a password input box.
name: Name the text box for use by background programs ASP and PHP.
value: Set a default value for the text input box. (Usually serves as a reminder)

Test code:

Browser effect:

3 textarea text field, supports multi-line text input

When users need to enter long text in a form, a text input field is required.
grammar:

<textarea rows="rows" cols="columns">Default value of text</textarea>

1. The <textarea> tag appears in pairs, starting with <textarea> and ending with </textarea>.
2. cols: The number of columns in a multi-line input field.
3. rows: The number of rows in a multi-line input field.
4. You can enter default values ​​between labels.

Browser effect:

4 radio/checkbox radio button and checkbox

When using forms to design surveys, it is a good idea to use selection boxes to reduce user operations. There are two types of selection boxes in HTML, radio buttons and check boxes. The difference between the two is that users can only select one option in a radio button, while users can select multiple options or even all of them in a check box.
grammar:

<input type="radio/checkbox" value="value" name="name" checked="checked"/>

1. When type="radio", the control is a radio button
2. When type="checkbox", the control is a checkbox
3.value: The value of the data submitted to the server (used by the background program PHP)
4.name: Name the control for use by background programs ASP and PHP
5. checked: When setting checked="checked", this option is selected by default
6. Note: For radio buttons in the same group, the name value must be consistent. For example, in the above example, the same name is "radioLove", so that the radio buttons in the same group can play the role of single selection.

The browser effect is:

This demo code implements a radio button with 3 options and a check box with 4 options.

The name value of the same selection box must be consistent, otherwise the single selection and multiple selection functions cannot be implemented. The value in the same selection box must be different, otherwise the data passed to the background will be incorrect.

5 select/option using a drop-down list box

Drop-down lists are also often used on web pages, and they can effectively save web page space. You can select either single or multiple options.

grammar:

<option value=”name” selected=”selected”>Run</option>

Value is the value submitted to the server;

If you set the selected="selected" attribute, the option will be selected by default.

Browser effect:

6 select/multiple/option using drop-down box to select multiple options

The drop-down list can also perform multiple selection operations. You can set the multiple="multiple" attribute in the tag to achieve the multiple selection function. Under the widows operating system, press the Ctrl key and click at the same time (use Command + click on Mac) to select multiple options.

Browser effect:

7 input/submit uses the submit button to submit data

Syntax: <input type="submit" value="Submit">

type: The button will only have a submit function when the type value is set to submit
value: the text displayed on the button

Browser effect:

8 input/reset Use the reset button to reset the form information

When the user needs to reset the form information to its initial state, for example, if the user enters the "user name" and finds that the writing is incorrect, the reset button can be used to restore the input box to its initial state. Just set type to "reset".
grammar:

<input type="reset" value="Reset">1

type: The button will reset only when the type value is set to reset
value: the text displayed on the button

Browser effect:

9 Label tag in the form

The label does not present any special effect to the user; its purpose is to improve usability for mouse users. If you click on the text inside the label tag, this control will be triggered. That is, when the user clicks to select the label tag, the browser will automatically shift the focus to the form control associated with the label (automatically select the form control associated with the label tag).
grammar:

<label for="Control id name">

Note: The value in the for attribute of the label must be the same as the id attribute value of the related control.

Browser effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study.