初识HTML（三）表格、表单

最新推荐文章于 2022-03-15 16:29:12 发布

Simple子夜

最新推荐文章于 2022-03-15 16:29:12 发布

阅读量1.6k

点赞数 3

分类专栏： HTML 文章标签： HTML 表格表单

本文链接：https://blog.csdn.net/m0_46958731/article/details/114332171

版权

HTML 专栏收录该内容

7 篇文章 10 订阅

订阅专栏

文章目录

前言：

本章节将了解到HTML里较为重要的标签：表格与表单。说到表格，在早期时候的网页甚至整个页面都是表格来进行布局的，笔者也在刚学习HTML的时候，就曾整张页面都是使用表格完成的，其作用可见不一般。而表单的话则是前后端交互的一个接口，在成为一个动态页面上起到了作用，那下面来了解一下它们的使用方式吧！

HTML表格

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

表格实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Index表格练习</title>
  </head>
  <body border='1'>
      <table>
        <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>

        <tr>
          <td>3行1列</td>
          <td>3行2列</td>
          <td>3行3列</td>
        </tr>
      </table>
  </body>
</html>

浏览器打开后效果：
在这里插入图片描述
table的border属性表示：给表格以及每个单元格增加一个边框

table更多属性介绍：

cellspacing：单元格间距（每个单元格之间的距离，默认为1）
cellpadding：单元格内边距（单元格内的文字距离单元格边框的距离，默认为1）
width：表格的宽度
height：表格的高度
align：表格所处位置可以填3个参数（left默认、center相对页面居中、right相对页面居右）

那么再给我们的表格搭配这个属性看看效果

<table border="1" cellspacing='0' cellpadding='0' width='200' height='200' align="center">

此时这个页面就按着我们预想的样子呈现了出来。cellspacing为0相当于每个单元格之间的距离为0，等同于黏在一起了。
在这里插入图片描述
而tr行标签以及td列标签也有一些可供我们使用的属性。

tr标签属性介绍：

width：没有效果
height：设置整行的单元格高度
align：调整整行单元格文字水平位置（只有左中右）：3个参数（left默认,center,right）
valign：调整整行单元格文字垂直位置（只有上中下）：3个参数（top,center默认,bottom）
bgcolor：给整行单元格设置背景颜色：red、green、blue、white....

td标签属性介绍：

width：给当前列的所有单元格设置宽度
height：没有效果
align：设置当前单元格的文字水平位置
valign：设置当前单元格的文字垂直位置
bgcolor：设置当前单元格的背景颜色

实例：综合使用上序提到的属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Index表格练习</title>
  </head>
  <body>
      <table border="1" cellspacing='0' cellpadding='0' width='260' height='260' align="center">
        <tr>
          <td bgcolor='lightskyblue' valign='top'>1行1列</td>
          <td align='center' valign='bottom'>1行2列</td>
          <td  bgcolor='lightskyblue' align='right' valign='top'>1行3列</td>
        </tr>

        <tr height='100'>
          <td align="right">2行1列</td>
          <td width='100' bgcolor='lightskyblue' align='center'>2行2列</td>
          <td>2行3列</td>
        </tr>

        <tr>
          <td bgcolor='lightskyblue' valign="bottom">3行1列</td>
          <td align='center' valign='top'>3行2列</td>
          <td bgcolor='lightskyblue' align='right' valign='bottom'>3行3列</td>
        </tr>
      </table>
  </body>
</html>

在这里插入图片描述

表格规范

我们通常会将表结构划分3类：表头（通常在开头第一行）、主要信息、表尾（通常在结尾最后一行）

实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Index表格练习</title>
  </head>
  <body>
    <table border="1px" width="300" height="300" cellspacing='0' align='center'>
      <caption>学生成绩表</caption> <!-- 表的标题（在表的中间正上方） -->
      <thead> <!-- 表头信息 -->
        <tr>
            <th>姓名</th> <!-- th内的文字加粗且居中显示 -->
            <th>年龄</th>
            <th>成绩</th>
        </tr>
      </thead>

      <tbody> <!-- 该标签内都是主要信息 -->
        <tr align='center'>
            <td>jack</td>
            <td>18</td>
            <td>100</td>
        </tr>
      

        <tr align='center'>
            <td>tom</td>
            <td>19</td>
            <td>85</td>
        </tr>
      </tbody>

      <tfoot> <!-- 表尾信息 -->
          <tr align='center'>
            <td>总人数：2</td>
            <td></td>
            <td>总成绩：185</td>
          </tr>
      </tfoot>
  	</table>
  </body>
</html>

浏览器打开效果：
在这里插入图片描述

单元格合并

就是通过一个单元格，吃掉了其它单元格（合并了）变成了一个大的单元格。单元合并分为两种：列合并(colspan)、行合并(rowspan)

实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Index表格练习</title>
  </head>
  <body>
    <table border="1px" cellspacing='0' width='200' height='200' align='center'>
      <caption>表格合并练习</caption>
      <thead>
        <tr align='center'>
            <td rowspan="2" align="center">素菜</td>
            <td>白菜</td>
            <td>青菜</td>
        </tr>

        <tr align='center'>
          <td>土豆丝</td>
          <td>豆芽</td>
      </tr>

      </thead>

      <tbody>
        <tr align='center'>
          <td rowspan="2">荤菜</td>
          <td>辣子鸡</td>
          <td rowspan = 2>烤全羊</td>
        </tr>

        <tr align='center'>
          <td>红烧肉</td>
        </tr>
      </tbody>

      <tfoot> <!-- 表尾信息 -->
        <tr align='center'>
            <td>汤类</td>
            <td colspan="2">番茄蛋汤</td>
          </tr>
      </tfoot>
  	</table>
  </body>
</html>

当使用合并属性后，相应的行或者列就要减少td标签，从而达到合并效果，比如：1行1列单元格合并了2行1列的单元格，那么就应该删掉2行1列的td，给1行1列的td加上rowspan=‘2’。
在这里插入图片描述

HTML表单

HTML 表单用于收集不同类型的用户输入。

表单是一个包含表单元素(控件)的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form>
	表单控件....
</form>

表单可以采集用户在页面输入的信息，最后点击提交按钮后将这些信息发送到后端进行处理。form表单的主要属性我们留到提交按钮部分讲解。

表单控件

表单控件是帮助我们的页面与用户交互，采集用户输入信息，如登录、注册等等就是通过表单控件来操作的：
在这里插入图片描述

表单-输入元素

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本框

文本框通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本框。

<input type='text' name='username' />

通常文本框内会基于用户一些提示，如上面截图里面的：会告诉用户可以输入一些什么内容，我们可以通过input内的一些属性来达到这一效果

账号：<input type='text' name='username' placeholder='请输入用户名或手机号' />

在这里插入图片描述

密码框

密码框通过标签<input type=“password”> 来定义，当我们在密码框内输入内容会自动转换成小圆点显示。

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

注意：我们在input内定义name属性的作用如下：

name属性规定input元素的名称。
name属性用于对提交到服务器后的表单数据进行标识，或者通过JavaScript引用表单数据。
只有设置了name属性的表单元素才能在提交表单时传递它们的值。

所以目前我们不了解这些作用的话，也要给每个input加上name

单选按钮

单选按钮通过标签<input type=“radio”> 定义的，单选按钮可以有多个，在诸多内容中选取一个内容，并且每个单选按钮的name都是相同的，因为它们属于一类。

男：<input type='radio' name='gender' value='男' />
女：<input type='radio' name='gender' value='女' />

提交到后端的话，后端可以通过name知道这是性别，通过value知道用户选择了哪一个。

注意：多个单选按钮只有name属性相同才有单选的效果

复选框

复选框定义：<input type=‘checkbox’> 复选框相当于多选按钮，用户可以通过开发者给出的多个复选框选择相应的内容。

打篮球：<input type="checkbox" name='hobby' value="篮球" />
踢足球：<input type="checkbox" name='hobby' value="足球" />
唱歌：<input type="checkbox" name='hobby' value="唱歌" />
游泳：<input type="checkbox" name='hobby' value="游泳" />

到了这里，我们不难发现一个问题，就是每次点击都要点到框框里面才能选中，这种体验绝对不是很好，包括单选按钮。那么我们需要一种点击文字就能选中按钮的方式：可以通过label标签来解决这个问题！

label标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

定义方法：

<label for='male'>男</label><input type='radio' name='gender' value='男' id='male' />
    
<label for='female'>女</label><input type='radio' name='gender' value='男' id='female' />

点击label内的元素相当于点击了它for关联的表单控件

提交按钮

通过：<input type=‘submit’> 定义提交按钮。

当用户点击提交按钮后，它在表单内所选的内容都会被提交到web开发者指定的地方，那么我们这里先来了解一下from标签可以定义的属性：

<form action='.' method='get'>
	表单控件...
</form>

action：表单数据提交的地址
method：表单数据提交的方式，可以有两种：get、post

而两种提交方式大有讲究，这将会关系到我们的数据是否安全，或者传输效率更快些

我们先尝试通过get方式提交表单数据：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>表单练习</title>
  </head>
  <body>
    <form action="abc" method="GET">
      账号：<input type="text" name='account' placeholder="请输入您的账号：" /><br/>
      密码：<input type="password" name='pwd' placeholder="请输入您的密码：" /><br/>
      <input type="submit" value="登录" />
    </form>
  </body>
</html>

action随便填写一个地址，下面是get提交结果：

在这里插入图片描述

post提交结果:

在这里插入图片描述那么就是我们初期了解HTML的话：

最直观的区别就是GET把参数包含在URL中
POST提交的话，数据更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）

文本域

通过textarea标签定义：它也可以叫多行文本框

可以用于输入多行文本内容，而上面的text文本框只支持一行输入。通常作用与需要输入多行内容的场景，如：评论区、个人信息填写等等
在这里插入图片描述
定义方法：

<textarea name="comment" cols="20" rows="10" placeholder="请输入您的对此文章意见："></textarea>

其属性介绍：

cols：表示文本域的可见宽度
rows：表示文本域的可见高度
placeholder：给用户的提示信息
name：给该文本域定义一个名字

浏览器打开效果：
在这里插入图片描述

可以发现一个问题，这个多行文本框居然是可以拉伸的，很显然这与实际效果不符，如果去掉这个功能的话，我们需要再增加一个属性：

<textarea style="resize: none;"></textarea>

这个style其实就是给这个标签去掉了某些样式，后续我们使用css就明白了。这里先了解这种方式可以去掉多行文本框拉伸。
在这里插入图片描述

下拉框

下拉框常见于选择某个地区、语言等等

定义方式：

<select name="language">
   <option value="Chinese">Chinese</option>
   <option value="English">English</option>
   <option value="Australia">Australia</option>
   <option value="Spain">Spain</option>
   <option value="French">French</option>
</select>

浏览器打开效果：
在这里插入图片描述
介绍select的一些属性：

name：定义下拉框的名称
disabled：禁用下拉框
multiple：规定可选择多个选项
size：下拉列表中可见选项的数目

option的一些属性：

selected：设置下拉框默认选中的项目
value：该项目进行表单提交时的值

通过optgroup定义一个选项组，用于分类不同的项目：

<select>
      <optgroup label="湖北">
        <option label="黄冈">黄冈</option>
        <option label="武汉">武汉</option>
      </optgroup>

      <optgroup label="湖南">
        <option label="长沙">长沙</option>
      </optgroup>

      <option label="上海">上海</option>
</select>

浏览器打开效果：
在这里插入图片描述

button按钮

通过<button>按钮</button>定义按钮

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件与 <input type=“button”> 相比，提供了更为强大的功能和更丰富的内容。与标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

并且我们也可以把button当做提交按钮使用。

<button type="submit">点我提交</button>

关于input的type属性还有很多可以选择的功能，可以到后续再实际中慢慢应用，不必要一次性全部记住。

带边框的表单

我们可以为表单加上边框，以及携带标题，但是通常这种方式在实际应用中不多，这里了解即可

<form action="abc" method="POST">
    <fieldset>
      <legend>Login</legend>
      Account：<input type="text" name="account" /><br/>
      Password：<input type="password" name="wd" /><br/>
      Email：<input type="email" name="email" /><br/>
      <button type="submit">登录</button>
    </fieldset>
</form>

浏览器打开效果：
在这里插入图片描述
默认按照父标签的宽度显示，这里由于它是放在body里面下，而body默认宽度就是整个页面大小。我们也可以将其放在一个固定宽度的标签内，那么它就是按照父标签的宽度来显示。

input标签的一些通用属性

属性	作用
checked	单选框或者复选框，在网页加载后加上checked属性的会被默认选中。
disabled	任意表单控件加上以后都会被禁用掉，无法选中和输入值。
value	用于定义文本框的初始值
readonly	规定了文本框只能读，不能修改内容（建议先设置一个初始值）
size	规定了文本框的长度
maxlength	限制文本框的最大输入长度，超过后将不能输入内容
placeholder	用于对文本框进行提示信息，当光标选中文本框后，提示信息就会消失

如果本文对您有帮助，别忘一键3连，感谢支持！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请点赞收藏+关注 子夜期待您的关注，谢谢支持！

下一章传送门：CSS基础、常用属性

Simple子夜

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
初识HTML（三）表格、表单

前言：本章节将了解到HTML里较为重要的标签：表格与表单。说到表格，在早期时候的网页甚至整个页面都是表格来进行布局的，笔者也在刚学习HTML的时候，就曾整张页面都是使用表格完成的，其作用可见不一般。而表单的话则是前后端交互的一个接口，在成为一个动态页面上起到了作用，那下面来了解一下它们的使用方式吧！HTML表格表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（
复制链接

扫一扫