Basic introduction and use of html form tag

The form tag is an important part of HTML and is used to collect information entered by different types of users. The form tag starts with <form> and ends with </form>.

1.2 Related attributes of form tag

1.2.1 action attribute

The action attributedefines the action to be performed when the form is submitted.

The usual way to submit a form to the server is to use a submit button.

Typically, forms are submitted to a web page on a web server.

1.2.2 method attribute

The method attribute specifies the HTTP method to use when submitting the form (GET or POST):

get	post
Form data is appended to the URL as a value	Form data will not be appended to the URL and will be hidden.
For submitting non-sensitive data	Sensitive data can be submitted

Note: GET is best suited for submitting small amounts of data. Browsers will set capacity limits.

1.2.3 name attribute

There may be more than one form on a page. In order to distinguish these forms, the name attribute is needed to name the form, which is usually the same as the id attribute value. It should be noted that the form name cannot contain special characters and spaces.

2. Elements of the form tag

2.1 input element

The input element is the most important form element

The input element can be changed into multiple forms according to different type attributes.

2.1.1 text

<input type="text"> defines a single line input for text input Field:

Such as

username:

</form>

The above code looks like this in the browser:

2.1.2 password

<input type="password"> DefinitionPassword field:

Such as

password:

</form>

The above code looks like this in the browser:

2.1.3 submit

<input type="submit"> DefinitionSubmitform data to a>Form handler's button.

Such as

</form>

The above code looks like this in the browser:

Note: submit can change the content displayed on the browser through the value attribute

2.1.4 radio

<input type="radio"> defines a radio button.

Such as

<input type="radio" name="xingbie"vaule="男"checked>男

<input type="radio" name="xingbie"vaule="女">女

The above code looks like this in the browser:

2.1.5 checkbox

<input type="checkbox"> defines a checkbox.

Such as

<input type="checkbox">football

<input type="checkbox">Basketball

<input type="checkbox">lol

<input type="checkbox">Korean drama

<input type="checkbox">King of Glory

The above code looks like this in the browser:

2.1.6 button

<input type="button> 定义按钮。

Such as

<input type="button" οnclick="alert('Hello World!')" value="Click Me!">

2.1.7 New attributes added in html5

type	effect
number	Restrict input to numbers to take effect
email	Restrict input to email address to take effect
color	After getting focus, a color picker will pop up
date	The date picker will appear in the input box
range	Ability to display slider fields
month	Date picker (month)
week	Date picker (week)
time	time picker
datetime	time picker
datatime-clocle	date picker
tel	Phone input
url	Ability to automatically validate url fields on submission.
search	for search fields (search fields behave like regular text fields)

2.2 Other attributes of input elements

checked: Set radio buttons and check boxes. The initial state is checked, and the attribute value is only checked.

disabled: Set to disable the element when loading for the first time. The attribute value is only disabled, indicating that the element is disabled.

maxlength: Set the maximum number of characters entered in the text box.

readonly: Read-only, indicating that the content of the text box is not allowed to be modified directly by the user.

size: Set the width of the element.

src: Set the URL of the image displayed in the image field.

2.2 select element (drop-down list) and option element

<select> Element definitionDrop-down list: The <option> element defines the option to be selected.

The select element and the option element are usually used together.

The name attribute of select can specify the submission name, and the id can be used in conjunction with the for attribute of <labl> to achieve mouse click optimization.

Lists usually display the first option as the selected option.

You can define predefined options by adding the selected attribute.

You can display it in list form through the multiple="multiple" attribute -------

Such as

</select>

The above code looks like this in the browser:

2.3 textarea element

<textarea> Element fixed 义multiline input column (Text area):

textarea represents a multi-line plain text editor that can be used by users. You can set the id attribute and <lable> to implement mouse click optimization, the cols and rows attributes can set the editor display size, and the name attribute is used to specify the submission name.

Listed as

</textarea><br>

The above code looks like this in the browser:

Summarize

The form form is an important part of HTML. The above is some basic introduction to the form tag.