1 form
1.1form tag
name attribute
There may be more than one form on a page, and each form tag is a form. In order to distinguish these forms, we can use the name attribute to name the form.
method attribute
In the form tag, the method attribute is used to specify which http submission method to use for form data. The method attribute has two values: one is "get" and the other is "post"
action attribute
In the form tag, the action attribute is used to specify the address to which the form data is submitted for processing.
id attribute
A unique name for the form, typically used for submission or styling
enctype attribute
In the form tag, the enctype attribute is used to specify the encoding method for form data submission.
1.2 Text input box
The text input box is specified using the input tag, and its type attribute is used to specify what type of input box it is. Its properties are described as follows:
name: used for form submission to submit data to the backend
id: Give this input box a unique value, generally used by JavaScript to obtain it.
value: It represents the value entered in this input box
size: used to specify the length of this input box. It is not recommended. CSS will be used to control it later.
maxlength: used to specify the maximum length of the value that can be entered in this input box
placeholder: used to specify prompt information when there is no value in the input box. It is an attribute of H5
1.3 Radio button
The radio button also uses the input tag, but the value of its type attribute is radio. It is generally used when only one value can be selected among multiple values. For example, the description of the last name attribute is as follows: name: Specify a group name for this radio button box, which is also the value that the backend can obtain the data after the data is submitted. Multiple radio button boxes will be the same group if they have the same name attribute. value: The value of the radio button checked: It is a Boolean value (true and false). If the value is true, it is selected, and if the value is false, it is not selected.
1.4 Multi-select
box The multi-select box also uses the input tag, but the value of its type attribute is checkbox. It is generally used for multiple selections. It has the following attributes:
name: Specify a group name for this radio button box, which is also the value that the backend can obtain the data after the data is submitted. Multiple radio button boxes will be in the same group if they have the same name attribute.
value: the value of the radio button
checked: It is a Boolean value (true and false). If the value is true, it is checked. If the value is false, it is unchecked. If no value is given, the default is true.
1.5 Text input field
The text input field is used to enter long text content, using the textarea tag, which has the following attributes:
name: used to get the value of the text field
rows: Specify the height of the text field (number of rows)
cols: Specify the width of the text field (number of columns)
1.6 Drop-down list
The drop-down list is used for selection. It can be single-select or multi-select. Use the select tag to specify the attributes as follows:
name: used to get the value of the drop-down box
multiple: Specify whether multiple selections are possible
size: used to specify the number of viewable options. The sub-tag is option, which is used to specify drop-down options. Its value attribute is used to specify the value of an option.
1.7 File upload
File upload still uses the input tag, but its type attribute is file, and the commonly used attribute is also name.
2 table labels
The table tag is used for data display, and it involves table, tr, td, th and other sub-tags.
To define a row, we need to use the tr subtag, and to define cells in a row, we also need to use the td subtag.
2.1table tag
The table tag has the following attributes:
width: used to specify the width of the table, the unit is pixels
border: used to define the border of the table. The value type is a number, but a positive number. The larger the value, the thicker the border.
cellpadding: used to define the inner margin of the cell, that is, the content in the cell and the distance between the sides of the cell cellspecing: used to define the outer margin of the cell, that is, the distance between cells
align: used to define the alignment of the table. The table also has the following sub-tags:
caption: used to define the title of the table
thead: used to define the header part
tbody: used to define the table body part
tfoot: used to define the footer of the table
tr: a row used to define the table
th: used to define a cell, which is characterized by the content being bold and centered.
td: used to define a cell. The td tag has several attributes that need to be explained: colspan: used to define cross-column operations, that is, merging multiple columns.
rowspan: used to define cross-row operations, that is, merging multiple rows
2.2
Table of contents
Example:
