HTML5简明教程系列之HTML5 表格与表单（二）

Thomas_Lbw

已于 2022-12-26 15:52:42 修改

阅读量1.9k

点赞数 9

分类专栏： HTML5 文章标签： html5 前端 html

于 2022-11-15 19:06:22 首次发布

本文链接：https://blog.csdn.net/weixin_44120785/article/details/127870150

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML的第二弹也来了，最近高产似母猪，状态也不错，代码来源为实验课。本期主要内容为：HTML表格与DIV应用、HTML表单。上期基础部分的传送门：

HTML5简明教程系列之HTML5基础（一）_Thomas_Lbw的博客-CSDN博客

一、HTML 表格与 DIV 应用

div 是网页制作中用于定位元素或者布局的一种重要技术。

1.1 创建表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

eg：

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

1. 为表格加边框：

<table border="1">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

2. caption 元素定义表格标题：

<table border="1" width="300px" height="150px">
  <caption>
    表格标题
  </caption>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

3. 给表格添加表头：

<table border="1" width="300px" height="150px">
  <caption>
    支出表
  </caption>
  <tr>
    <th>支出</th>
    <th>备注</th>
  </tr>
  <tr>
    <td>32</td>
    <td>买苹果</td>
  </tr>
  <tr>
    <td>24</td>
    <td>买饮料</td>
  </tr>
</table>

4. 表格与单元格的属性：

1.2 div设置

在网页中可以使用很多个 div，在网页制作中，使用 div 可以将网页中的任何元素布局到网页中的任何位置。

<div style="样式设置"><div></div></div>

table 元素布局：

优点：

理解比较简单。
不同的浏览器看到的效果一般相同。

缺点：

显示样式和数据绑定在一起。
布局的时候灵活度不高。
一个页面可能会有大量的 table 元素，代码冗余度高。
增加带宽。
搜索引擎不喜欢这样的布局。

div 元素布局：

优点：

符合 W3C 标准。
搜索引擎更加友好。
样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
节省代宽，代码冗余度低。
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

1.3 小节挑战-课程表绘制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>课程表</title>
  </head>
  <body>
    <table border="1" width="60%" bgcolor="pink" cellpadding="2">
      <caption>
        课程表
      </caption>
      <tr align="center">
        <td colspan="2">时间\日期</td>
        <td>一</td>
        <td>二</td>
        <td>三</td>
        <td>四</td>
        <td>五</td>
      </tr>

      <tr align="center">
        <td rowspan="2">上午</td>
        <td>9:30-10:15</td>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
        <td>音乐</td>
        <td>体育</td>
      </tr>

      <tr align="center">
        <td>10:25-11:10</td>
        <td>数学</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
      </tr>

      <tr>
        <td colspan="7">&nbsp;</td>
      </tr>

      <tr align="center">
        <td rowspan="2">下午</td>
        <td>14:30-15:15</td>
        <td>体育</td>
        <td>语文</td>
        <td>历史</td>
        <td>政治</td>
        <td>化学</td>
      </tr>

      <tr align="center">
        <td>15:25-16:10</td>
        <td>音乐</td>
        <td>语文</td>
        <td>数学</td>
        <td>美术</td>
        <td>语文</td>
      </tr>
    </table>
  </body>
</html>

效果：

二、HTML表单

网页中的表单由许多不同的表单元素组成，这些表单元素包括文字字段、单选按钮、复选框、按钮等。

2.1 插入表单对象

1. 文字字段：

该语法包含了许多参数，除了 type 参数以外，其他的参数都是可选的，大家可以自行选择。举个例子：

<form name="formBox" method="post" action="">
  姓名：<input type="text" name="name" size="20" /><br />
  年龄:<input type="text" name="age" size="40" value="10" maxlength="3" />
</form>

2. 密码输入框：

密码输入框是一种特殊的文字字段，他的各个属性和文字字段是相同的，但是输入进密码输入框的字符全部是“*”表示，保证周围人看不见输入的文本。

<input type="password" name="pwd" />

3. 单选按钮：

<form name="formBox" method="post" action="">
  <input type="radio" name="sex" value="male" checked />男<br />
  <input type="radio" name="sex" value="female" />女
</form>

4. 复选框：

<form name="formBox" method="post" action="">
  <input type="checkbox" name="music" checked />音乐<br />
  <input type="checkbox" name="art" />美术<br />
  <input type="checkbox" name="math" />数学<br />
</form>

5. 按钮：

HTML 表单中，有三种按钮：提交按钮，重置按钮，匿名按钮。我们可以使用 <button> 元素或者 <input> 元素来创建一个按钮。type 属性的值指定显示什么类型的按钮。

提交按钮（submit）：用于发送表单数据给服务器。

<form name="formBox" method="post" action="">
    <input type="text" value="输入的内容" />
    <button type="submit">This a submit button</button>
  
    <!--or-->
  
    <input type="submit" value="This is a submit button" />
  </form>

重置按钮（reset）：

重置按钮用来清除用户在页面中输入的信息。
<form name="formBox" method="post" action="">
  <input type="text" />
  <button type="reset">This a reset button</button>

  

  <input type="reset" value="This is a reset button" />
</form>

匿名按钮（button）：

没有自动生效的按钮，但是可以使用 JavaScript 代码进行定制。如果你省略了 type 属性，那么这就是默认值。
<button type="button">This a anonymous button</button>


<button>This a anonymous button</button>


<input type="button" value="This is a anonymous button" />

2.2 菜单和列表

菜单和列表主要是用来选择给定答案中的一种，这类选择中往往答案比较多。

1. 下拉菜单

下拉菜单能够节省页面空间，正常状态下显示一个选项，单击展开所以选项。

<form name="formBox" method="post" action="">
  <select name="select">
    <option value="成都">成都</option>
    <option value="广州">广州</option>
    <option value="四川">四川</option>
    <option value="上海">上海</option>
  </select>
</form>

2. 列表项

在页面中列表项可以显示出几条信息，一旦超出这个信息量，在列表项右侧会出现滚动条，拖动滚动条可以看到所有选项。size="2" 表示一次显示 2 条数据。

<form name="formBox" method="post" action="">
  <select name="select" size="2" multiple="multiple">
    <option value="成都">成都</option>
    <option value="广州">广州</option>
    <option value="四川">四川</option>
    <option value="上海">上海</option>
  </select>
</form>

2.3 文本域

当用户想要填入多行文本时，就应该使用文本域而不是文本字段。文本域使用 <textarea> 标记。cols 代表列数，rows 代表行数。

<form name="formBox" method="post" action="">
  留下您的联系方式：
  <textarea name="textarea" cols="35" rows="5"></textarea>
</form>

2.4 挑战-表单综合

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form action="" method="get">
      <p>姓名：<input type="text" name="username" /></p>

      <p>密码：<input type="password" name="password" /></p>

      <p>
        性别：
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
      </p>
      <p>
        爱好：
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swimming" /> 游泳
      </p>
      <p>
        照片：
        <input type="file" name="person_pic" />
      </p>
      <p>
        个人描述：
        <textarea name="about"></textarea>
      </p>
      <p>
        籍贯：
        <select name="select">
          <option value="成都">成都</option>
          <option value="广州">广州</option>
          <option value="四川">四川</option>
          <option value="上海">上海</option>
        </select>
      </p>
      <p>
        <input type="submit" name="" value="提交" />
        <input type="reset" name="" value="重置" />
      </p>
    </form>
  </body>
</html>