0
0

第三章 表格布局与表单交互

3.1 表格概述

在数据处理和展示中，表格是一种非常实用的工具，它能清晰地组织和呈现信息，使数据更易于理解和分析。

3.1.1 表格的结构

一个标准的表格通常由以下几部分组成：

  • 标题（Caption）：位于表格上方，简要描述表格内容。
  • 表头（Header）：包含列标题，说明每列数据的含义。
  • 行（Row）：表格中的一条记录，由多个单元格组成，展示同一主题或对象的数据。
  • 列（Column）：表格中的垂直部分，由多个单元格组成，展示同一属性的数据。
  • 单元格（Cell）：行与列的交叉点，存放具体数据。

3.1.2 表格的基本语法

以HTML为例，创建一个基本表格的语法如下：

<table>
    <caption>标题</caption>
    <thead>
        <tr>
            <th>列1标题</th>
            <th>列2标题</th>
            <th>列3标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>行1列1数据</td>
            <td>行1列2数据</td>
            <td>行1列3数据</td>
        </tr>
        <tr>
            <td>行2列1数据</td>
            <td>行2列2数据</td>
            <td>行2列3数据</td>
        </tr>
    </tbody>
</table>
  • ：定义表格开始。
    • ：定义表格头部。
    • ：定义行。
    • ：定义表格主体。
    • ：定义表格标题。
    • ：定义表头单元格，通常用于列标题。
    • ：定义标准单元格，用于存放数据。

    通过这些基本元素，可以构建出结构清晰、内容丰富的表格。

    3.2 表格属性的设置

    表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。

    表格标记的属性如表

    3.2.1 表格边框属性

    设置表格标记中的边框属性可以改变表格的外观。

    表格边框属性如表

    表格中的属性同样适用于单元格。

    3.2.2 表格的宽度和高度属性

    在HTML中，您可以通过设置width和height属性来直接指定表格的尺寸。这些属性可以应用于

    标签本身，以及和
    标签，以便更精细地控制表格中行和单元格的大小。

    • width属性：设置表格宽度。接受像素（如100px）或百分比（如50%），后者基于父元素宽度。表格宽度可能因内容超出而自动扩展。
    • height属性：设定表格高度。同样接受像素或百分比。表格高度被视为最小值，内容超出时，表格会自动增长，不会强行拉伸未填满的空间。

    这些属性可应用于

    , ,
    ，通过CSS控制更灵活。

    3.2.3 表格背景颜色与表格图像属性

    设置表格的bgaolor 属性可以改变表格的背景颜色，设置表格的bakgound属性可以为表格增添背景图像效果，使表格更加美观。

    (1) bgcolor 可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。

    (2) background 设置背景图像，图像的路径可以是绝对路径或相对路径。

    (3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。

    [例]设置表格边框属性。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格样式示例</title>
    <style>
        /* 第一个表格：使用box-shadow模拟亮边和暗边效果 */
        table.first-table {
            background-color: #f2f2f2;
            border-collapse: collapse;
            width: 50%; 
            margin: 0 auto;
            box-shadow: 2px 2px 4px rgba(0,0,0,0.5), -2px -2px 4px rgba(255,255,255,0.5);
        }
        
        /* 表格单元格样式 */
        .first-table th, .first-table td {
            border: 1px solid #000;
            padding: 10px;
            text-align: left;
        }
        
        /* 第二个表格：同时显示背景颜色和背景图像 */
        table.second-table {
            background-color: #f2f2f2;
            background-image: url(img/1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            border-collapse: collapse;
            width: 50%;
            margin: 50px auto;
        }
        
        /* 表格单元格样式 */
        .second-table th, .second-table td {
            border: 1px solid #000;
            padding: 10px;
            text-align: left;
        }
    </style>
</head>
<body>
    <!-- 使用box-shadow模拟亮边和暗边效果的表格 -->
    <table class="first-table">
        <tr>
            <th>标题1</th>
            <th>标题2</th>
        </tr>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </table>

    <!-- 使用背景颜色和背景图像的表格 -->
    <table class="second-table">
        <tr>
            <th>标题3</th>
            <th>标题4</th>
        </tr>
        <tr>
            <td>数据3</td>
            <td>数据4</td>
        </tr>
    </table>
</body>
</html>

    结果

    3.2.4 表格边框样式属性

    设置表格标记中的fame属性可以改变表格边框的样式;设置表格标记中的rules属性可以改变表格内部边框的样式。

    说明: frame和rules属性值及说明如表：

    例：

    <!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 15px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>
</head>
<body>

<h2>带边框样式的表格</h2>

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <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>

</body>
</html>

    运行结果

    3.2.5 表格单元格间距、单元格边距属性

    设置表格标记中的cllpacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。 设置表格标记中的ellpadding属性可以增加表格单元格的内容与内部边框之间的距离。

    (1) cellspacing 值的单位为像素或百分比，默认值为2px。

    (2) cellpadding 值的单位为像素或百分比。

    例：

    <!DOCTYPE html>
<html>
<head>
    <title>单元格间距与边距示例</title>
</head>
<body>

<h2>使用cellspacing和cellpadding的表格</h2>

<!-- 注意：cellspacing和cellpadding属性已过时，但在此示例中用于展示 -->
<table border="1" cellspacing="10" cellpadding="15">
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>

</body>
</html>

    运行结果

    3.2.6 表格水平对齐属性

    通过设置表格标记的align 属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左、居中、居右3种。

    说明: align 属性的取值可以为left (默认居左)、center (居中)和right (居右)。

    例：

    <!DOCTYPE html>
<html>
<head>
<style>
.left-align {
  text-align: left;
}

.center-align {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

table {
  display: inline-table;
  border-collapse: collapse;
  width: 50%;
}

table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 15px;
  text-align: left;
}
</style>
</head>
<body>

<div class="left-align">
  <h2>左对齐的表格</h2>
  <table>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
  </table>
</div>

<div class="center-align">
  <h2>居中对齐的表格</h2>
  <table>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
  </table>
</div>

</body>
</html>

    运行结果

    3.2.7 设置表格的（tr）标记行的属性

    表格行tr标记的属性用于设置表格某一行的样式，其属性设置如表所示：

    通过tr标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。

    说明： left 表示设置行内容居左对齐; center 表示设置行内容居中对齐; right 表示设置行内容居右对齐。top 表示设置行内容顶部对齐; middle 表示设置行内容居中对齐；bottom表示设置行内容底部对齐。其中行垂直居中对齐属性值与行水平居中对齐属性值不同。

    例：

    <!DOCTYPE html>
<html>
<head>
    <title>废弃属性示例</title>
    <!-- 注意：align, valign 和 bgcolor 属性已被废弃 -->
</head>
<body>

<table width="100%" border="1" cellspacing="0" cellpadding="5">
  <tr align="center" valign="middle" bgcolor="#f2f2f2">
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr align="left" valign="top" bgcolor="#ffffff">
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr align="left" valign="bottom" bgcolor="#f2f2f2">
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>

</body>
</html>

    在这个示例中：

    • align 属性用于设置水平对齐方式，center是居中对齐，left是左对齐。
    • valign 属性用于设置垂直对齐方式，middle是垂直居中，top是顶部对齐，bottom是底部对齐。
    • bgcolor 属性用于设置背景颜色。

    但更推荐使用CSS来达到同样的效果，因为CSS提供了更强大的控制和更现代的布局选项。以下是使用CSS来实现相同功能的代码：

    <!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}

tr {
  text-align: left;
  vertical-align: top;
}

th {
  background-color: #f2f2f2;
  text-align: center;
  vertical-align: middle;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

td, th {
  padding: 5px;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>

</body>
</html>

    运行结果

    3.2.8 设置单元格的属性

    表格的列(td)标记的属性可以设置表格单元格的显示风格。

    td标记常用的属性如表：

    3.2.9 表格单元格跨行、跨列属性

    3.2.9.1 单元格跨行

    使用单元格td标记的rowspan 属性可以设置单元格跨行合并。

    说明: rowspan 属性可以设置单元格跨行。通过rowspan=" n" (n是正整数)，可以设置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个td标记。

    3.2.9.2 单元格跨列

    使用单元格td标记的colspan属性可以设置单元格跨列合并。

    说明： colspan 属性可以设置单元格跨列。通过colspan=" n" (n是正整数)，可以设置某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个td标记。

    例：

    <!DOCTYPE html>
<html>
<head>
    <title>单元格合并示例</title>
</head>
<body>

<table border="1">
  <tr>
    <th colspan="2">标题行</th> <!-- 合并两列 -->
  </tr>
  <tr>
    <th>左列</th>
    <th>右列</th>
  </tr>
  <tr>
    <td rowspan="2">合并行，跨越两行</td> <!-- 合并两行 -->
    <td>数据1</td>
  </tr>
  <tr>
    <td>数据2</td>
  </tr>
</table>

</body>
</html>

    运行结果

    3.3 表格嵌套

    表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。

    例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套表格布局示例</title>
    <style>
        body, table {
            margin: 0;
            padding: 0;
        }
        table.outer-table {
            width: 100%;
            border-collapse: collapse;
        }
        table.title-bar, table.content, table.footer {
            width: 100%;
            border: 1px solid #000;
            background: #f0f0f0;
            text-align: center;
        }
        table.content td {
            border: 1px solid #000;
            padding: 10px;
        }
        table.footer {
            background: #e0e0e0;
            padding: 10px 0;
        }
    </style>
</head>
<body>
    <table class="outer-table">
        <tr>
            <!-- 顶部标题栏 -->
            <td>
                <table class="title-bar">
                    <tr>
                        <td>标题栏</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <!-- 主体内容 -->
            <td>
                <table class="content">
                    <tr>
                        <td>
                            <!-- 左侧内容 -->
                            <table>
                                <tr>
                                    <td>左侧内容</td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <!-- 右侧内容 -->
                            <table>
                                <tr>
                                    <td>右侧内容</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <!-- 底部版权信息 -->
            <td>
                <table class="footer">
                    <tr>
                        <td>版权所有 © 2024</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

    结果

    3.4 表单

    HTML中的表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。一个完整的交互表单由两部分组成:一是客 户端包含的表单页面，用于填写浏览者进行交互的信息;另一个是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输入信息，然后将这些信息提交给服务器;服务器中的应用程序会对这些信息进行处理响应，这样就完成了浏览者和服务器之间的交互。

    3.4.1 表单标记

    表单form标记为成对标记，以<form>开始和<form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。

    说明: <form> 和</form>之间可包含各种表单信息输人标记。表单标记的属性主要有name, action, method 和enctype等，其属性、取值及说明如表所示

    例：

    <!DOCTYPE html>
<html>
<head>
    <title>简单表单示例</title>
</head>
<body>

<h2>联系信息表单</h2>

<form name="contactForm" action="/submit_form.php" method="post" enctype="multipart/form-data">
  <label for="fname">名字:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">姓氏:</label><br>
  <input type="text" id="lname" name="lname"><br>
  <label for="email">电子邮件:</label><br>
  <input type="email" id="email" name="email"><br>
  <label for="file">上传文件:</label><br>
  <input type="file" id="file" name="file"><br>
  <input type="submit" value="提交">
</form> 

</body>
</html>

    运行结果

    3.4.2 定义域和域标题

    利用fieldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset 标记将表单内容的一部分打包，生成一-组相关表单的字段。当-组表单元素放到feldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。legend标记为feldset标记定义域标题。

    说明：fieldset标记没有属性，是成对标记。legend标记必须位于fieldset标记内，也是成对标记:有一个对齐align属性，属性值分别为left, center 和right。

    例：

    <!DOCTYPE html>
<html>
<head>
    <title>域和域标题示例</title>
</head>
<body>

<h2>注册信息</h2>

<form action="/submit_form.php" method="post">
  <fieldset>
    <legend>个人信息:</legend>
    <label for="fname">名字:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">姓氏:</label><br>
    <input type="text" id="lname" name="lname"><br>
    <label for="email">电子邮件:</label><br>
    <input type="email" id="email" name="email"><br>
  </fieldset>
  
  <fieldset>
    <legend>账号设置:</legend>
    <label for="username">用户名:</label><br>
    <input type="text" id="username" name="username"><br>
    <label for="password">密码:</label><br>
    <input type="password" id="password" name="password"><br>
  </fieldset>
  
  <input type="submit" value="注册">
</form>

</body>
</html>

    运行结果

    3.4.3 表单信息输入

    表单的主要功能是为用户提供输入信息的接口，将输人信息发送到服务器并等待服务器响应。表单中输入信息的标记是input标记，可以输入一行信息。input 标记是单个标记。

    说明: input标记的属性主要有name和type等，输人类型是由类型type属性定义的，type属性有很多不同的值，设置属性值不同，就会产生不同界面效果。input 标记的属性、取值及说明如表所示。

    3.4.3.1 单行文本输入框

    设置input标记的type属性值为text,可以实现向表单中插入一个单行文本框。在单行文本框中可以输人任意类型的数据，但是输人的数据只能单行显示，不能换行。

    说明：单行文本输人框的主要属性有name, maxlength, size, value 和readonly,其属性及取值说明如表所示

    3.4.3.2 密码输入框

    设置input标记的type属性值为password, 可以实现向表单中插入一个密码输人框。密码输人框中可以输入任意类型的数据，与单行文本输人框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“.”所取代，这样设计可以保障用户输人的密码不被泄露。

    说明:密码输人框的主要属性有name，maxlenth 和size,取值及说明与单行文本输人框相同。

    例：

    <!DOCTYPE html>
<html>
<head>
    <title>用户信息输入表单</title>
</head>
<body>

<h2>用户信息表单</h2>

<form action="/submit_form.php" method="post">
  <!-- 单行文本输入框 -->
  <label for="username">用户名:</label><br>
  <input type="text" id="username" name="username" size="20" maxlength="20" value="示例用户名" readonly><br>
  
  <!-- 密码输入框 -->
  <label for="password">密码:</label><br>
  <input type="password" id="password" name="password" size="20" maxlength="20"><br>
  
  <input type="submit" value="提交">
</form>

</body>
</html>

    运行结果

    3.4.3.3 复选框

    设置input标记的type属性值为checkbox,可以实现向表单中插人一个复选框，用户利用复选框在网页上设置多项选择。

    说明:复选框的主要属性有name, value 和checked,其中checked属性用于设置初始预选项。复选框的属性、取值及说明如表所示

    由于复选择框可以支持多选，每一个复选框都是不同的，一组复选框的所有name属性应该不同，value 属性值也应该不同。

    3.4.3.4 单选按钮

    设置input标记的type属性值为radio, 可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。

    说明:单选按钮的属性有name, vale 和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的， 在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value 属性取值应该不同。

    例：

    <!DOCTYPE html>
<html>
<head>
    <title>复选框与单元按钮示例</title>
</head>
<body>

<h2>兴趣爱好</h2>
<form action="/submit_form.php" method="post">
  <input type="checkbox" id="hobby1" name="hobbies" value="Reading">
  <label for="hobby1">阅读</label><br>
  <input type="checkbox" id="hobby2" name="hobbies" value="Sports" checked>
  <label for="hobby2">运动</label><br>
  <input type="checkbox" id="hobby3" name="hobbies" value="Music">
  <label for="hobby3">音乐</label><br>
</form>

<h2>性别</h2>
<form action="/submit_form.php" method="post">
  <input type="radio" id="gender1" name="gender" value="Male" checked>
  <label for="gender1">男</label><br>
  <input type="radio" id="gender2" name="gender" value="Female">
  <label for="gender2">女</label><br>
</form>

</body>
</html>

    运行结果

    3.4.3.5 图像按钮

    设置input 标记的type属性值为image,可以实现向表单中插人-一个图像按钮，用户可利用图像按钮在网页中插人一张图像， 通过src属性加载图像。

    说明:图像按钮主要属性有name, sre, width 和height。其属性、取值及说明如表所示

    例：

    <!DOCTYPE html>
<html>
<head>
    <title>图像按钮示例</title>
</head>
<body>

<h2>使用图像按钮提交表单</h2>

<form action="/submit_form.php" method="post">
  <!-- 输入字段 -->
  <label for="username">用户名:</label><br>
  <input type="text" id="username" name="username"><br>
  
  <!-- 图像按钮 -->
  <input type="image" src="img/1.jpg" name="submit" width="100" height="50" alt="提交">
</form>

</body>
</html>

    运行结果

    3.4.3.6 提交按钮

    设置input标记的type属性值为submit,可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。

    说明:提交按钮的属性主要有name和value,其属性、取值及说明如表所示

    3.4.3.7 重置按钮

    设置input标记的type属性值为reset,可以实现向表单中插入一个重置按钮，重置按钮用于将表单中所有的输人信息清空，然后让用户可以重新填写。

    说明:重置按钮的属性主要有name和value,其属性、取值及说明与提交按钮的相同。

    3.4.3.8 普通按钮

    设置input标记的type属性值为button,可以实现向表单中插入一个普通按钮。普通按钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。

    说明:普通按钮的属性有name, value 和onclick,其属性、取值及说明如表所示

    例：

    <!DOCTYPE html>
<html>
<head>
    <title>按钮应用示例</title>
    <script>
        // JavaScript函数，当普通按钮被点击时调用
        function doSomething() {
            alert("普通按钮被点击了！");
        }
    </script>
</head>
<body>

<h2>按钮应用示例</h2>

<!-- 使用<form>标签创建一个表单 -->
<form action="/submit_form.php" method="post">
  <!-- 提交按钮 -->
  <input type="submit" name="submit_button" value="提交表单">
  
  <!-- 重置按钮 -->
  <input type="reset" name="reset_button" value="重置表单">
  
  <!-- 普通按钮，绑定onclick事件 -->
  <button type="button" name="action_button" value="执行动作" onclick="doSomething()">执行动作</button>
</form>

</body>
</html>

    运行结果

    3.4.3.9 文件选择框

    设置input标记的type属性值为fle,可以实现向表单中插人一 个文件选择框。

    说明:

    name，定义input 标记的名称。页面上会自动添加一个文本输人框和一个“浏览.....按钮。单击“浏...”按钮可以从“选择要加载的文件”对话框选择某一个文件，然后自动将文件名称回填到文本输人框中。

    3.4.3.10 隐藏框

    设置input标记的type属性值为hidden,可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。

    说明:隐藏框的属性有name和value,其属性、取值及说明如表所示

    例:

    <!DOCTYPE html>
<html>
<head>
    <title>文件上传与隐藏数据示例</title>
</head>
<body>

<h2>文件上传与隐藏数据</h2>

<form action="/upload_handler.php" method="post" enctype="multipart/form-data">
  <!-- 文件选择框 -->
  <label for="fileInput">请选择文件:</label>
  <input type="file" id="fileInput" name="userFile"><br>
  
  <!-- 隐藏框 -->
  <input type="hidden" name="secretData" value="hiddenValue">
  
  <!-- 提交按钮 -->
  <input type="submit" value="上传文件">
</form>

</body>
</html>

    运行结果

    3.4.4 多行文本输入框

    textarea标记可以向表单中插人多行文本输人框。多行文本输人框可以用来输人较多的文字信息，而且可以换行，并将这些信息提交到服务器。

    说明:多行文本输人框textarea标记是成对标记，其主要属性有name, rows, cols 和wrap等，其属性、取值及说明如表所示

    默认情况下，当用户在文本区域中输人文本后，浏览器会将它们按照输人时的状态发送给服务器。只有在用户按下Enter键的地方生成换行。

    <!DOCTYPE html>
<html>
<head>
    <title>用户反馈表</title>
</head>
<body>

<h2>我们非常重视您的反馈</h2>

<form action="/submit_feedback.php" method="post">
  <!-- 用户名输入框 -->
  <label for="username">姓名:</label><br>
  <input type="text" id="username" name="username"><br>
  
  <!-- 多行文本输入框 -->
  <label for="userComments">意见与建议:</label><br>
  <textarea id="userComments" name="userComments" rows="10" cols="50" wrap="soft">
  </textarea><br>
  
  <!-- 提交按钮 -->
  <input type="submit" value="提交反馈">
</form>

</body>
</html>

    运行结果

    3.4.5 下拉列表框

    下拉列表可以在表单中接收用户的输人。下拉列表通常需要同时使用sele和option标记来在表单中插人下拉菜单和列表项。

    说明: seleet 标记是成对标记，option 标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有name, size 和multiple等属性。option 标记有value 和selected等属性。selet 标记与option标记必须配合使用。每一选项必须指定一个显示的文本和一个value值，显示文本通常附在option标记后面。它们的属性、取值及说明如表所示

    例：

    <!DOCTYPE html>
<html>
<head>
    <title>多选下拉列表框示例</title>
</head>
<body>

<h2>请选择您喜欢的水果（可多选）</h2>

<form action="/submit_fruits.php" method="post">
  <!-- 多选下拉列表框 -->
  <label for="fruitSelect">选择水果:</label>
  <select id="fruitSelect" name="favoriteFruits[]" multiple size="5">
    <option value="apple" selected>苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
    <option value="grape">葡萄</option>
    <option value="watermelon">西瓜</option>
  </select><br>
  
  <!-- 提交按钮 -->
  <input type="submit" value="提交选择">
</form>

</body>
</html>

    运行结果

    3.5 综合案例——表格与表单

    案例1——达尔维工作室“联系我们”子页

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>达维工作室————联系我们</title>
        <style type="text/css">
            .chu{
                font-weight:bold;
            }
            .zi1{
                font-family:"微软雅黑";
                font-size:20px;
                font-weight:bold;
                color:#ED630A;
            }
            .zi2{
                font-family:"微软雅黑";
                font-weight:bold;
                color:#F60;
                text-decoration:underline;
            }
            .zibai{
                font-family:"微软雅黑";
                color:#FFF;
            }
            body{
                background-image:url(img/3.jpg);
            }
        </style>
    </head>
    <body>
        <table width="1190" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table width="1190" border="0" align="center" cellpadding="0" cellspacing="5">
                        <tr>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF">
                                <img src="img/5.jpg" alt=" " width="100" height="63"/>
                            </td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">网页网站</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">关于我们</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">团队合作</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">设计理念</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">联系我们</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table width="100%" border="0" cellspacing="20" cellpadding="0">
                        <tr>
                            <td height="318">&nbsp;</td>
                            <td width="280" valign="top">
                                <table width="100%" border="0" cellspacing="0" cellpadding="20">
                                    <tr>
                                        <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
                                    </tr>
                                    <tr>
                                        <td height="196" bgcolor="#FFAF03">
                                            <p class="zibai">地址：广东省江门市XXXXXXXXX<br/>
                                            电话：0750-XXXXXX<br/>
                                            传真：0705-XXXXXX<br/>
                                            QQ:12345678<br/>
                                            电子邮箱：<br/>
                                            [email protected]<br/>
                                            工作室网站：<br/>
                                            www.XXXX.com</p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="280" valign="top">
                                <table width="100%" border="0"cellspacing="0" cellpadding="20">
                                    <tr>
                                        <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">关于我们</td>
                                    </tr>
                                    <tr>
                                        <td height="278" valign="top" bgcolor="#FC880D">
                                            <p class="zibai">达维工作室是专业从事互联网相关开发的公司。<br/>
                                            专门提供全方们的优质服务和最专业的网站建设方案力企业打造全新电子商务平台。<br/>
                                            达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程⋯⋯
                                            </p>
                                            <p class="zibai">&bsp;</p >
                                            <p class="zibai chu"><a href="#">更多 &gt；&gt；</a></p >
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="280">
                            <table width="100%" border="0" cellspacing="0" cellpadding="20">
                                <tr>
                                    <td height = "30" align = "center" bgcolor= "#FFFFFF" class = "zi1" >团队合作</td>
                                </tr>
                                <tr>
                                    <td height="332" valign="top" bgcolor="#66A00E"><p class="zi2">我们的团队：</p>
                                    <p class="zibai">成员都具有多年的实际设计工作经验，满足客户的国际化需求。
                                    设计师创意的思维模式，提供最适合的设计方案。</p>
                                    <p class="zi2">我们的承诺：</p>
                                    <p class="zibai">本工作室设计与制作的网站均属原创、不套用网上的任何模板，
                                    根据每个公司特点，设计出属于容户……</p>
                                    <p class = "zibai" >&nbsp; </p>
                                    <p class = "zibai chu"><a href="#">更多 &gt;&gt;</a></p>
                                    </td>
                                </tr>
                            </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

    **运行结果**

    案例2——用户注册信息

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户注册信息</title>
        <style type="text/css">
            fieldset{
                width: 700px;
            }
        </style>
    </head>
    <body>
        <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
            <fieldset>
                <legend>用户注册信息</legend>
                <table witdh="600" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="200" align="right">用户名:</td>
                        <td><input type="text" name="textfield" id="textfield"/></td>
                    </tr>
                    <tr>
                        <td width="200" align="right">密码:</td>
                        <td><input type="passwprd" name="textfield2" id="textfield2"/></td>
                    </tr>
                    <tr>
                        <td width="200" align="right">确认密码:</td>
                        <td><input type="password" name="textfield3" id="textfield3"/></td>
                    </tr>
                    <tr>
                        <td width="200" align="right">性别:</td>
                        <td><input name="radio" type="radio" id="radio" value="radio" checked="checked"/>
                        男<img src="img/6.gif" width="22" height="21" align="absmiddle"/>
                        <input type="radio" name="radio" id="radio2" value="radio2"/>
                        女<img src="img/4.gif" width="23" height="21" align="absmiddle"/></td>
                    </tr>
                    <tr>
                        <td width="200" align="right">出生年月:</td>
                        <td><input name="textfiled4" type="text" id="textfield4" size="12"/>年
                        <select name="select" id="select">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
                        </select>
                                月</td>
                    </tr>
                    <tr>
                        <td width="200" align="right">业余爱好:</td>
                        <td><input type="checkbox" name="checkbox" id="checkbox"/>看书
                        <input type="checkbox" name="checkbos2" id="checkbox2"/>上网
                        <input type="checkbox" name="checkbox3" id="checkbox3"/>打球
                        </td>
                    </tr>
                    <tr>
                        <td width ="200" align=" right">相片:</td>
                        <td height= "25" ><input type="file" name=" fileField" id="fileField" /></td>
                    </tr>
                    <tr>
                        <td width ="200" align =" right">意见或建议:</td>
                        <td>
                            <textarea name =" textarea" id=" textarea" cols="45" rows ="5"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align=" center">
                        <input type="submit" name="button" id="button" value="提交" />
                        <input type="reset" name="button2" id="button2"value="重置"/>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </body>
</html>

    运行结果

    标签： 交互 microsoft 前端
    本文转载自: https://blog.csdn.net/2302_80749847/article/details/142374103
    版权归原作者 开往春天的地铁504 所有， 如有侵权，请联系我们删除。
    登录后发布评论

    “第三章 表格布局与表单交互”的评论:

    还没有评论
    关于作者
    ...
    overfit同步小助手
    文章同步
    相关阅读

    linux 的 sed 命令的 使用学习

    Postman下载安装（Windows）

    Postman中的form-data 和 JSON 的区别

    【Navicat+MySQL】 在Navicat内创建管理数据库、数据库表。

    公司文件防止泄密的方式有哪些？记住这七个措施，保护文档安全！

    Selenium的下载及chrome环境搭建

    IDEA 2024.3 版本预览：这几个新特性吊炸天了都

    文章导航