1. Interview questions in this chapter
1.1 What are the basic labels of tables?
1.2 What are the commonly used form elements?
2. Knowledge points
2.1 Review of the previous chapter
In the previous chapter, we learned the concept of HTML language and some commonly used tags, including title tags, paragraph tags, line break tags, formatting tags, font shape tags, font tags, image tags, hyperlink tags, and web document structure tags. Commonly used tags such as video tags and audio tags.
2.2 In this chapter we will learn about tables and forms on web pages
3.Specific content
3.1 Basic structure of the table
In daily life, we are already familiar with tabular data. This data comes in many forms, such as financial data, survey data, event calendars, bus timetables, TV schedules, etc. In most cases, this information consists of column or row headers plus the data itself. The following is the basic structure of a table:
Figure 3-1 Schematic diagram of the table
The most commonly used tags for a basic HTML table are shown in Table 3-1. They are the most commonly used tags for creating tables. When used together, the simplest table can be generated.
3.2 Basic syntax of tables
| mark | illustrate |
|---|---|
<table> |
tableIs the outermost mark of the table, a table from <table>start to </table>end |
<tr> |
The table on the web page is drawn according to rows, and each pair <tr></tr>represents a row. <tr>The parent tag of is<table> |
<td> |
tdThe element represents the data in the table, used in the table to contain the actual contents of the cell, <td>to </td>represents a cell in the row. <td>The content in and </td>is the content of the cell. <td>The parent tag of is <tr>. |
<th> |
thand tdrepresent cells, but the content in the th element will be centered and bold by default. thOften used in table header cells. |
<caption> |
The text in <caption>the markup serves as the table title and is usually centered above the table. <caption>The tag must be placed directly <table>after the tag, and only one title can be set per table. |
Table 3-1 Basic labels of tables
<table> <!--表格开始-->
<caption>...</caption> <!--表格标题-->
<tr> <!--行开始-->
<th>...</th> <!--单元格，内容默认居中加粗-->
</tr> <!--行结束-->
<tr> <!--行开始-->
<td>…</td> <!--单元格-->
</tr> <!--行结束-->
</table> <!--表格结束--><!DOCTYPE html>
<html>
<head>
<title>基本表格</title>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>201107235</td>
<td>张明</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>201107421</td>
<td>夏静</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>201107616</td>
<td>刘洋</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>201107311</td>
<td>李明浩</td>
<td>男</td>
<td>21</td>
</tr>
</table>
</body>
</html>
3.3 Table border properties
Attributeborder , indicating whether to display the border of the table, only use the value "1" or "0"; if the border attribute value is modified to "0", it means no border, the same as the default effect.
Basic syntax:
<table border="属性值"><!DOCTYPE html>
<html>
<head>
<title>带边框的表格</title>
</head>
<body>
<table border="1" >
<caption>课程表</caption>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr>
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr>
<td>政治</td>
<td>英语</td>
<td>体育</td>
<td>地理</td>
<td>历史</td>
<td>计算机</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>
3.4 Display pictures in cells
For HTML tables, you can also add images to their cells. Put pictures into cells to arrange them neatly on the web page.
<!DOCTYPE html>
<html>
<head>
<title>带图片的表格</title>
</head>
<body>
<table>
<caption>卡通头像</caption>
<tr>
<td><img src="images/1.jpg" width="100" height="100"/></td>
<td><img src="images/2.jpg" width="100" height="100"/></td>
<td><img src="images/3.jpg" width="100" height="100"/></td>
</tr>
<tr>
<td><img src="images/4.jpg" width="100" height="100"/></td>
<td><img src="images/5.jpg" width="100" height="100"/></td>
<td><img src="images/6.jpg" width="100" height="100"/></td>
</tr>
</table>
</body>
</html>
3.5 Merge cells
You can use the colspan and rowspan properties to make <th>the OR <td>span more than one column or row. The number specified for this property represents the number of cells spanned. This way we can create more irregular tables.
3.5.1 Column merging
If you want to use column merging on the table, that is, to merge cells in different columns on the same row into one cell, then you need to find the leftmost cell among the merged cells and add On the colspan attribute, the tags of other cells in the same row are to be removed.
Basic syntax:
<td colspan="#"> <!DOCTYPE html>
<html>
<head>
<title>列合并表格</title>
</head>
<body>
<table border="1">
<caption>列合并</caption>
<tr>
<td> A00</td>
<td colspan="2">A01A02</td>
<td>A03</td>
</tr>
<tr>
<td>B10</td>
<td>B11</td>
<td>B12</td>
<td>B13</td>
</tr>
<tr>
<td>C20</td>
<td>C21</td>
<td>C22</td>
<td>C23</td>
</tr>
</table>
</body>
</html>
3.5.2 Row merging
If you want to use row merging on the table, that is, to merge several cells on different rows in the same column into one cell, then you need to find the top cell among the merged cells, and Add the rowspan attribute, and then delete the corresponding markers of other cells in other rows.
Basic syntax:
<td rowspan="#"><!DOCTYPE html>
<html>
<head>
<title>行合并表格</title>
</head>
<body>
<table border="1">
<caption>行合并</caption>
<tr>
<td rowspan="2"> A00B10</td>
<td>A01</td>
<td>A02</td>
<td>A03</td>
</tr>
<tr>
<td>B11</td>
<td>B12</td>
<td>B13</td>
</tr>
<tr>
<td>C20</td>
<td>C21</td>
<td>C22</td>
<td>C23</td>
</tr>
</table>
</body>
</html>
3.5.3 Merge rows and columns
<!DOCTYPE html>
<html>
<head>
<title>行列合并表格</title>
</head>
<body>
<table border="1">
<caption>行列合并</caption>
<tr>
<td> A00</td>
<td>A01</td>
<td>A02</td>
<td>A03</td>
</tr>
<tr>
<td>B10</td>
<td>B11</td>
<td rowspan="2" colspan="2">B12B13<br/>C22C23</td>
</tr>
<tr>
<td>C20</td>
<td>C21</td>
</tr>
</table>
</body>
</html>3.6 Nested tables
Nested tables are one or several small tables embedded in a large table. That is, a table inserted into a table cell. If you use a table to lay out your page and want to use another table to organize the information, you can insert a nested table.
<!DOCTYPE HTML>
<html>
<head>
<title>表格的嵌套</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td rowspan=2>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td rowspan="2" colspan="2">10<br/>
<table border=1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td colspan="2">15</td>
</tr>
</table>
</body>
</html>
3.7 The table is displayed in groups by rows<thead>/<tfoot>/<tbody>
<thead>, <tfoot>and <tbody>elements give you the ability to group rows in a table. <tfoot>Tag defines the footer (footnote or table note) of the table. This tag is used to combine table annotation content in HTML tables. <tfoot>element should be used in conjunction with <thead>the and elements. Elements are used to group header content in HTML tables, while elements are used to group body content in HTML tables. By default these elements do not affect the layout of the table.<tbody><thead>tbody
<!DOCTYPE HTML>
<html>
<head>
<title>表格的分组</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>月份</th>
<th>收入（￥）</th>
</tr>
</thead>
<tfoot>
<tr>
<td>总计</td>
<td>5800</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>一月</td>
<td>1800</td>
</tr>
<tr>
<td>二月</td>
<td>2000</td>
</tr>
<tr>
<td>三月</td>
<td>2000</td>
</tr>
</tbody>
</table>
</body>
</html>
3.8 Use of forms
Forms play an important role in web pages and are the main means of interacting with users. For example, our commonly used user registration, online contact, online questionnaire, etc. are all specific application forms of forms.
In HTML, you can easily insert a form by inserting a pair of <form>tags where you need to use the form.</form>
Basic syntax:
<form name=" " method=" " action=" " >
……
表单元素（如文本框、单选按钮、复选框、列表框、文本区域等）
……
</form>
Grammar description:
-
name: This attribute represents the name of the form. -
method: This attribute is used to define the way to submit information. The value is post or get, and the default is get. -
action: This attribute is used to specify the location of the program file that processes form data. When the submit button is clicked, the form information is submitted to the file for processing.The following is a basic statement to create a form:
<form name="form1" method="post" action=" login.html" > </form>
3.9 Basic elements of forms
There are two important components of a form: form fields and form buttons. Form fields include text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, radio button boxes, drop-down selection boxes, file upload boxes, etc. Form buttons include submit button, reset button and general button.
3.9.1 <input>Elements
This tag can define form elements such as single-line text boxes, radio buttons, and check boxes in the form.
Basic syntax:
<input name=" " type=" " />The following is <input>the attribute description of the element:
| Attributes | Function |
|---|---|
| type | The element type inserted into the form. The specific values are shown in Table 3-3. |
| name | The name of the form element |
| size | The length of the single-line text box, the value is a number, indicating how many characters are long |
| maxlength | The maximum number of characters that can be entered in a single-line text box. The value is a number, indicating how many characters there are. When it is greater than the size attribute value, the user can move the cursor to view the entire input content. |
| value | For a single-line text box, it indicates the default value of the input text box. The optional attribute. For a radio button or check box, it specifies the actual value sent to the server after the radio button is selected. It is a required attribute. For buttons, specifies the text on the button surface, optional. |
| checked | If added, it will be selected by default |
Table 3-2 Basic attributes of input elements
| attribute value | illustrate |
|---|---|
| text | Represents a single line text box |
| password | Indicates that the characters entered in the password box are displayed with "*" or "·" |
| radio | single button |
| checkbox | Represents a check box |
| submit | Indicates submit button |
| reset | Indicates reset button |
| button | Indicates creating a button. The specific function of the button requires additional programming. |
| image | Represents the image domain. At this time, the input tag also has an important attribute: src, which is used to specify the source of the image domain. |
| file | Represents the file domain |
| hidden | Hidden text box field, similar to text, but invisible, often used to convey information. |
3.9.2 Text box and password box
Text box and password box are the two most commonly used form elements in form design. For example, login, registration and other page designs will use these two form elements.
Basic syntax:
<input type="类型" name="名称" readonly="只读" size="宽度" maxlength="可输入字符数" value=”默认值”/><!DOCTYPE HTML>
<html>
<head>
<title>文本框和密码框</title>
</head>
<body>
<form>
用户名：<input type="text" name="uname" value="Mary"/>
<br /><br />
密码：<input type="password" name="upass" />
<br /><br />
年龄:<input type="text" name="uage" size="3" maxlength="3"/>
</form>
</body>
</html>
3.9.3 Button
There are four commonly used buttons in forms, namely submit button, reset button, normal button and picture button.
-
typeThe attribute value of the submit button issubmit. -
The reset button restores all form data to its initial values.
-
An ordinary button is a shape that can generate a button, but clicking the button will not cause any operation. You need to cooperate with the relevant code to support functional operations.
-
<input>When the attribute value of the mark is , the image buttonimagebecomes an image field. The image field is equivalent to a picture-style submit button.
Basic syntax:
<input type="image" src="图片的位置" width="图片宽度" height="图片的高度" />Create submit button, reset button and normal button:
<!DOCTYPE HTML>
<html>
<head>
<title>按钮</title>
</head>
<body>
<form>
用户名：<input type="text" name="uname" value="Mary"/>
<br /><br />
密码：<input type="password" name="upass" />
<br /><br />
年龄:<input type="text" name="uage" size="3" maxlength="3"/>
<br /><br />
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="button" value="普通按钮" onClick="window.alert('请输入用户信息')"/>
</form>
</body>
</html>
Create an image button:
<!DOCTYPE HTML>
<html>
<head>
<title>图片按钮</title>
</head>
<body>
<form>
用户名：<input type="text" name="uname" />
<br /><br />
密码：<input type="password" name="upass" />
<br /><br />
年龄:<input type="text" name="uage" size="3" maxlength="3"/>
<br /><br />
<input type="image" src="images/submit.jpg" width="120"/>
</form>
</body>
</html>
3.9.4 Radio buttons
Radio buttons are smaller, round buttons that allow the user to select a single option from a list of options. You can create radio buttons simply by using an input element and setting the type attribute to radio.
When defining options, you must ensure that the name attribute values of the radio button boxes in the same group are the same, so that a selection can be made among a group of options.
<!DOCTYPE html>
<html>
<head>
<title>单选按钮</title>
</head>
<body>
<form>
<br /><br />
性别<br /><br />
<input type="radio" name="radio1" value="男生" checked="checked"/>男生<br /><br />
<input type="radio" name="radio1" value="女生" />女生
</form>
</body>
</html>
3.9.5 Checkbox
Checkboxes allow multiple options to be selected from a list of options. inputSet typethe attribute value in the tag to checkbox. When defining options, please note that if namethe values are the same, all the user's options will be combined into one data for submission.
<!DOCTYPE html>
<html>
<head>
<title>复选框</title>
</head>
<body>
<form>
<br /><br />
个人爱好<br/><br />
<input type="checkbox" name="checkgroup" value="跳舞" />跳舞<br /><br />
<input type="checkbox" name=" checkgroup " value="唱歌" />唱歌<br /><br />
<input type="checkbox" name=" checkgroup " value="羽毛球" />羽毛球<br /><br />
<input type="checkbox" name=" checkgroup " value="乒乓球" />乒乓球<br /><br />
</form>
</body>
</html>
3.9.6 File domain
The file field type is used for file uploads. When designing a website, sometimes users are required to upload some files on their local computer. At this time, using the file field will be very convenient, allowing users to choose the files to upload.
<!DOCTYPE html>
<html>
<head>
<title>文件域</title>
</head>
<body>
<form>
<input type="file" name="user_file" />
</form>
</body>
</html>
3.9.7 hidden type
The hidden type can define a hidden form control. In the browser, this hidden item is not visible to users. Normally, designers can use hidden form controls to store some data, which can be used as page variables.
Code:
<input type="hidden" name="hiddenText" value="1000" /> 3.9.8 Multi-line text box<textarea>
<textarea>The and </textarea>tags are used to define a multi-line text field, often used where a large amount of text needs to be entered, such as messages, self-introductions, etc. The text field created <textarea>does not have any limit on the length of the entered text, and the area can have scroll bars both vertically and horizontally.
Basic syntax:
<textarea rows="行数" cols="列数">
这是多行文字框
</textarea><!DOCTYPE html>
<html>
<head>
<title>多行文字框</title>
</head>
<body>
<form>
个人简介：
<textarea rows="10" cols="30" name="txtarea">
简介：
</textarea>
</form>
</body>
</html>
3.9.9 List<select> <option> <datalist>
3.9.1 selectTags
Tags<select> are <option>used in conjunction with tags. A <option>tag is an item in the drop-down menu. <select>Tags and <option>their attributes are as shown in the following table.
Sample code:
<select>
<option value="列表项的值1">列表项的说明1</option>
……
<option value="列表项的值n">列表项的说明n</option>
</select><!DOCTYPE html>
<html>
<head>
<title>列表</title>
</head>
<body>
<form>
select：
<select>
<option value="C++">C++</option>
<option value="Java">Java</option>
<option value="Html">Html</option>
</select>
</form>
</body>
</html>
3.9.2 <datalist>Tags
Although< datalist> lists can also be generated, this form cannot be used independently. <datalist>The tag must be used with an enterable text box type.
Basic syntax:
<input type="text" list="要绑定的datalist的id" name="名称" />
<datalist id=列表id >
<option label="列表项的说明1 " value="列表项的值1" />
……
<option label="列表项的说明n" value="列表项的值n" />
</datalist><!DOCTYPE html>
<html>
<head>
<title>列表</title>
</head>
<body>
<form>
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
</form>
</body>
</html>
3.9.10 <input>Label advanced properties
HTML5 <input>defines many new form input types. These new form types greatly simplify programmers' programming complexity and provide good control and convenient verification methods.
3.9.10.1Type url_
To define an input form of url type, set the type attribute value to url in the input tag. When submitting data, the form will automatically verify the entered path value. If an illegal path is entered, a prompt will appear.
Basic syntax:
<input type="url" name="名称"/>
<!DOCTYPE html>
<html>
<head>
<title>url</title>
</head>
<body>
<form>
请输入个人主页地址:
<input type="url" name="user_url" />
<input type="submit"/>
</form>
</body>
</html>
3.9.10.2Type email_
To define an input form of email type, set the type attribute value to email in the input tag. When submitting data, the form will automatically verify the entered email address value, and will prompt the user if the input does not meet the format.
Basic syntax:
<input type="email" name="名称" />
<!DOCTYPE html>
<html>
<head>
<title>email</title>
</head>
<body>
<form>
请输入邮箱地址：
<input type="email" name="Uemail" />
<input type="submit" value="提交"/>
</form>
</body>
</html
3.9.10.3 Date and time
Before HTML5, date and time required additional programming to insert controls that could select date and time. Now HTML5 provides a variety of new date and time input forms, and users can easily select date and time with the mouse.
Basic syntax:
<input type="时间日期关键字" name="名称" />
<!DOCTYPE html>
<html>
<head>
<title>分类展示不同形式的选择日期</title>
</head>
<body>
<form>
日期与时间类型输入框：<br/><br/>
<input name="txtDate_1" type="date"/><br/><br/>
<input name="txtDate_2" type="time"><br/><br/>
月份与星期类型输入框：<br/><br/>
<input name="txtDate_3" type="month"/><br/><br/>
<input name="txtDate_4" type="week"/><br/><br/>
日期时间型输入框：<br/><br/>
<input name="txtDate_5" type="datetime"/><br/><br/>
<input name="txtDate_6" type="datetime-local"/><br/><br/>
</form>
</body>
</html>
3.9.10.4 Numeric types
If you want to enter integers in HTML5, there are two number types that can implement number and range. The attributes of these two types are the same, and the only difference is the display form on the page.
Basic syntax:
<input type="range或者number" name="名称" min="最小值" max="最大值" step="步长" value="初始值" />
<!DOCTYPE html>
<html>
<head>
<title>数字表单</title>
</head>
<body>
<form>
输入0—100之间的数字：
<input type="range" name="inputNum3" min="1" max="100" value="30"/>
<br/><br/>
输入10-50之间的数字(步长为2)：
<input type="number" name="inputNum2" min="10" max="50" step="2" />
</form>
</body>
</html>
3.9.10.5Type color_
HTML5 provides an input form of type color, which breaks the previous rule that when designing a web page, if you want to choose a color arbitrarily, you must rely on the help of editing tools. Users can use the new color form control to freely select colors on the palette with the mouse.
Basic syntax:
<input type="color" name="名称" />
<!DOCTYPE html>
<html>
<head>
<title>color</title>
</head>
<body>
<form>
选择颜色：
<input type="color" name="select_color" />
<input type="submit"/>
</form>
</body>
</html>
3.9.10.6 filedsetControl group
Tags<fieldset> are used to group controls in the same form, or to group different forms on a web page. <legend>Tags <fieldset>are used in conjunction with tags. <legend>Tags can define a title for the control group.
Basic syntax:
<form>
<fieldset>
<legend>控件组的标题</legend>
……
</fieldset>
</form>
<!DOCTYPE HTML>
<html>
<head>
<title>控件组</title>
</head>
<body>
<form>
<fieldset>
<legend>用户登录</legend><br/>
用户名：<input type="text" name="uname" />
<br /><br />
密 码：<input type="password" name="upass" />
<br /><br />
<input type="submit" value="提交"/>
</fieldset>
</form>
</body>
</html>
3.9.11 Common form properties
In the previous section, we have talked about many new commonly used form elements and attributes in HTML5. In this section, we will continue to learn about several distinctive new attributes. These new attributes are commonly used public attributes of input tags. As shown in the table below.
3.9.11.1 autofocusProperties
Attributesautofocus allow a form element on the page to automatically gain focus after the page is loaded.
Basic syntax:
<input autofocus="autofocus" />
<!DOCTYPE HTML>
<html>
<head>
<title>控件组</title>
</head>
<body>
<form>
<fieldset>
<legend>用户登录</legend><br/>
用户名：<input type="text" name="uname" autofocus="autofocus"/>
<br /><br />
密 码：<input type="password" name="upass" />
<br /><br />
<input type="submit" value="提交"/>
</fieldset>
</form>
</body>
</html>
3.9.11.2 multipleProperties
Attributesmultiple apply to file type or select <input>tags. multipleThe attribute is set to allow multiple input values to be selected at the same time.
Basic syntax:
<input type="file" multiple="multiple" />
<!DOCTYPE HTML>
<html>
<head>
<title>多选下拉框</title>
</head>
<body>
<form action="get_form.asp" method="get" id="form1">
选择课程：
<select name="selectclass" multiple="multiple" size="5"/>
<option>语文</option>
<option>数学</option>
<option>音乐</option>
<option>英语</option>
<option>美术</option>
</select>
<input type="submit" />
</form>
</body>
</html>
3.9.11.3 placeholderProperties
<!DOCTYPE HTML>
<html>
<head>
<title>文本框提示语句</title>
</head>
<body>
<form>
邮箱地址：<input type="email" name="user_email" placeholder="请输入正确的邮箱地址" />
<input type="submit" value="提交"/>
</form>
</body>
</html>
3.9.11.4 requiredProperties
Attributerequired is a common attribute that can be used in various forms. The function of this attribute is to detect whether the input content is empty, but it is not responsible for verifying whether the data is legal.
Basic syntax:
<inpu required="required" />
<!DOCTYPE HTML>
<html>
<head>
<title>文本框提示语句</title>
</head>
<body>
<form>
邮箱地址：<input type="email" name="user_email" placeholder="请输入正确的邮箱地址" required="required" />
<input type="submit" value="提交"/>
</form>
</body>
</html>
3.9.11.5 patternProperties
patternThe function of the attribute When submitting, the content in the input box will be matched with the expression. If they do not match, an error message will be prompted.
Basic syntax:
<input pattern="正则表达式" />
<!DOCTYPE HTML>
<html>
<head>
<title>input元素中pattern属性的使用</title>
</head>
<body>
<form>
<fieldset>
<legend>pattern属性：</legend>输入用户名:
<input name="txtAge" type="text" pattern="^[a-zA-Z]\w{6,8}$" />
<input name="frmSubmit" type="submit" value="提交" />
<br/>以字母开头,包含字符或数字和下划线,长度在6~8之间
</fieldset>
</form>
</body>
</html>
4. Summary of this chapter
4.1 Summarize the knowledge points in this chapter
This chapter learned about tables and form-related tags
4.2 Answers to interview questions
4.2.1 Commonly used table labels
Commonly used table tags include table, tr, th, td, and caption.
4.2.2 Commonly used form tags
Commonly used form tags include form, input, select, and textarea.
4.3 Next chapter content
In the next chapter we will learn the basic use of CSS styles.
5.Exercise questions
5.1 Use tables to achieve the following effects
5.2 Complete the following student information form
5.3 Complete the following form effect
5.4 Form synthesis exercise
