Form labels and form labels

form

Form creation

What is a form

• Forms are used to collect information, such as registration, login, sending comments and feedback, purchasing goods, and so on

Created form

• <form action="save.php" method="post"></form>
• Start with the < form > element
• The action attribute indicates the web address of the daemon to which the form is to be submitted
• The method attribute indicates the form submission method, including get or post

Basic control 1

Single line text box

• <input type="text" value="123">
• Use the < input > element whose value of the type attribute is set to text to create a single line text box, which is a single label
• The value attribute indicates the filled in value
• < input type = "text" placehold = "please enter name" >
• The placeholder property represents the prompt text, which will be written in light text in the text box, not the value in the text box
• <input type="text" disabled>
• The disabled attribute indicates that the user cannot interact with the element, that is, "locked"

radio button

<input type="radio" name="sex" value="male"> male
<input type="radio" name="sex" value="female" checked> female

• Radio buttons can be created using the < input > element whose type attribute value is set to radio
• Mutually exclusive radio buttons should have their name set to the same value
• The radio button must have the value attribute value, and the value value is submitted to the server
• If the checked attribute is added to the radio button, it means that it is selected by default

< label > label

• The label label is used to bind the text to the radio button. When the user clicks the text, it is also regarded as clicking the radio button

<label>
    <input type="radio" name="sex" value="male"> male
</label>
<label>
    <input type="radio" name="sex" value="female" checked> female
</label>

check box

• <input type="checkbox">
• Use the < input > element whose value of the type attribute is set to checkbox to create a checkbox
• The same group check boxes should have their name set to the same value
• The check box should have the value attribute value, and the value value is submitted to the server

Basic control 2

Password box

• <input type="password">
• A password box can be created using the < input > element whose value of the type attribute is set to password

drop-down menu

<select>
    <option value="alipay">Alipay</option>
    <option value="wx">WeChat</option>
    <option value="bank">Online banking</option>
</select>

• The < Select > tab represents a drop-down menu, and < option > is its internal option

Multiline text box

• < textarea > < / textarea > indicates a multiline text box
• The rows and cols attributes are used to define the number of rows and columns of a multiline text box

input type summary

type attribute value	control
text	Single line text box
radio	radio button
checkbox	Multi selection button
password	Password box
button	Normal button
submit	Submit button
reset	Reset button

New form controls in HTML5

Richer input types

type attribute value	control
color	Color selection control
date,time	Date and time selection control
email	Email input control
file	File selection control
number	Digital input control
range	Drag bar
search	Search box
url	URL input control

< datalist > control

• Control can provide some alternatives for the input box. When the user enters the same content as the alternative text, intelligent sensing will be displayed
• Change the < Select > tag to < datalist >, and add id after < datalist >
• Add < input type = "text" list = "id" > before < datalist >, and the id in the list corresponds to the value of id in < datalist >

<input type="text" list="pay">
<datalist id="pay">
    <option value="alipay">  <!-- Alipay</option> If no interpretation is required, it can be deleted-->
    <option value="wx">WeChat</option>
    <option value="bank">Online banking</option>
</select>

form

Table label

< Table >, < tr > and < td > tags

label	significance
table	form
tr	Table row table row
td	table data

border attribute of < Table >

• Table border
• <table border="1"></table>

caption attribute of < Table >

• The title of a table often appears as the first child element of the table

< th > label

• Is a "title cell", which can be used as an alternative, indicating the title cell

<table border="1">
    <caption>I'm the title</caption>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
    </tr>
</table>

Merging of cells

colspan property

• Used to set the column span of td or th

<table border="1">
    <caption>I'm the title</caption>
    <tr>
        <th colspan="2">1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>A</td>
        <td colspan="3">B</td>
    </tr>
    <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
    </tr>
</table>

rowspan property

• Used to set the line span of td or th

<table border="1">
   <caption>I'm the title</caption>
   <tr>
       <th>1</th>
       <th>2</th>
       <th>3</th>
       <th rowspan="3">4</th>
   </tr>
   <tr>
       <td>A</td>
       <td rowspan="2">B</td>
       <td>C</td>
   </tr>
   <tr>
       <td>E</td>
       <td>G</td>
   </tr>
</table>

Other properties of tables

< thead >, < tbody >, < tFoot > tags

• Function: make the code clearer
• < thead > label definition header
• < tbody > core content of label definition table
• The < tFoot > tag defines the footer, which is usually the summary row

<table border="1" width="400">
    <thead>
        <tr>
            <th colspan="2"></th>
            <th colspan="2">first quarter </th>
            <th colspan="2">Second quarter</th>
            <th colspan="2">Third quarter</th>
            <th colspan="2">Fourth quarter</th>
        </tr>
        <tr>
            <th colspan="2"></th>
            <th>domestic</th>
            <th>abroad</th>
            <th>domestic</th>
            <th>abroad</th>
            <th>domestic</th>
            <th>abroad</th>
            <th>domestic</th>
            <th>abroad</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="2">mobile phone</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <th colspan="2">agriculture products</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <th colspan="2">aquatic product</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2">Summary</th>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
            <td>369</td>
        </tr>
    </tfoot>
</table>