2day-表格、表单

DaB210

已于 2024-03-28 14:33:32 修改

阅读量579

点赞数 7

分类专栏： HTML&CSS 文章标签： html 前端 html5

于 2024-03-28 14:12:51 首次发布

本文链接：https://blog.csdn.net/DaB210/article/details/137110337

版权

HTML&CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

表格

基础语法

table：用于定义一个表格区域
caption：定义表格的标题
thead：定义表格的头部
tbody：定义表格的主体
tfoot：定义表格的底部
tr：用于定义表格的行
th：用于定于表格的表头单元格
td：用于定义表格行的单元格

表格的常用属性

border：定义表格的边框
cellspacing：定义单元格之间的距离
cellpaddin：定义单元格内文字与单元格边框的距离
width：定义表格的宽度
height：定义表格的高度

注意事项

在默认情况下，表格的宽度是由每个单元格内容的宽度加上边框、边距后的总宽度
如果通过width属性设置了表格的宽度，那里面的单元格将会自动分配宽度直到加起来的宽度等于设置的宽度。如果当前设置的宽度和高度小于元素内容的宽高，那么表格会自动忽略设置的宽度值。
这里的宽度的值可以直接写数字width="500"。换算的单位仍然是px（pixel）为准。

单独设置表格列的宽度

通过colgroup标签和col标签来单独控制列的属性

<table border="1" cellspacing="0">
      <caption>
        课程表
      </caption>
      <colgroup>
        <col span="3" />
        <col span="3" style="width: 100px" />
      </colgroup>
      <thead>
        <tr>
          <th>表头</th>
          <th>表头</th>
          <th>表头</th>
          <th>表头</th>
          <th>表头</th>
          <th>表头</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </tfoot>
    </table>

span:用于选择要操控的列的数量

在这里插入图片描述

嵌套规则

table元素下只能直接包含caption、thead、tbody、tfoot
thead、tbody、tfoot下可直接包含tr
tr下可包含th或td

单元格合并

rowspan：表示行合并
colspan：表示列合并
属性值都为数字，表示需要合并的行数和列数

<table border="1" cellspacing="0">
      <caption>
        课程表
      </caption>
      <colgroup>
        <col span="3" />
        <col span="3" style="width: 100px" />
      </colgroup>
      <thead>
        <tr>
          <th colspan="6">表头</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4">1</td>
          <td>2</td>
          <td>3</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>2</td>
          <td>3</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>2</td>
          <td>3</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>2</td>
          <td>3</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </tfoot>
    </table>

要注意HTML的单元格合并并不是像word文档一样是真实合并在一起的，而是将目标单元格扩大了多少倍，原本占据一列的单元格，设置了colspan="2"后，该单元格的宽度变成了原来的两倍。由于HTML中我们书写了三个单元格，所以导致宽度上多出了一个单元格
所以我们在合并操作完成后，要删除多余的那一个。

在这里插入图片描述

表单

表单的作用

在浏览网页时，向后台发送请求获取数据

在这里插入图片描述

表单的基本结构

通过form标签来定义一个表单区域

<form action="">
    <!-- 用户账号 -->
    用户账号：<input type="text">
    用户密码：<input type="password">
    <input type="submit">
  </form>

form表单元素表示的是一个包含框，他在页面中并不存在实质性的显示内容。主要负责数据的处理，包括对表单域的数据的采集、打包、发送到指定的目标服务器等功能。

在这里插入图片描述

常用的十种input元素

input元素不只有一种表现形式，还可以通过元素的type属性来进行设置。

text：文本框表示该元素显示为文本域，即普通文本输入框

<input type="text">

password：密码框，当用户在该元素中输入数据时，这些内容并不会直接显示出来，而是以小圆点或*号的方式替代文本（不同浏览器显示方式不同）

<input type="password">

number：数值框，只允许用户输入数值，输入字母或特殊符号则会被拒绝写入，并且浏览器带有步进箭头，可以通过箭头控制数值的增减。
- step：可以控制箭头增量减量的大小

<input type="number" step="10">

radio:单选框，在表现上是一个圆形的选择框，当选中某个按钮时，传递的数据就是value属性内的值

    男：<input type="radio" value="man" name="sex">
    女：<input type="radio" value="girl" >

在这里插入图片描述

注意事项
使用单选框时，要为同一组的单选框加上name属性进行归类，这样浏览器才能识别到对应的单选框为同一组，进行单选。

name：为当前表单内的数据进行命名，作为返回到后台中的数据名称，也可以用作单选、复选框的分组。
value：当前input元素的数据值。
checkbox：复选框,在表现上为一个方形的选择框，大部分设置与单选框相同

    吃饭<input type="checkbox" name="aihao" value="chifan">
    睡觉<input type="checkbox" name="aihao" value="shuijiao">
    打豆豆<input type="checkbox" name="aihao" value="dadoudou">

在这里插入图片描述

label标签：正常的选框不太人性化，不能直接点击文字就选中某个框。这是因为我们的文字并没有和对应的input元素进行关联，浏览器无法识别点击的文字到底术语哪一个input框，通过label标签，可以将文字与表单域进行绑定。
Search：搜索框，从表现形式来看与text类型的输入框没有区别，但是它的语意及功能都不同，搜索框在有内容且获得焦点时，最右边会有一个清除xx。

搜索🔍：<input type="search">

file：文件上传框，用户可以通过它将本地的各类文件传递给服务器。

文件上传：<input type="file">

button：普通按钮没有任何动作（没有特殊功能），需要用户通过js为其定义点击后的操作

<input type="button" value="点我一下，啥都不会发生">

reset：重置按钮，会将表单内所有用户输入的数据清空，恢复到默认状态；

<input type="reset">

submit：提交按钮，会将表单中所有数据发送给指定的服务端

<input type="submit" value="登录"/>

input元素的属性

type：input框的类型取值，决定inout以那种类型的框去展示；
name：为当前表单内的数据进行命名，作为返回到后台中的数据名称，也可以用作单选、复选框的分组。
placeholder：当内容为空时，框内显示的提示信息
value：input的值，如果进行设置，则是作为input的默认值
readonly：框内的内容是只读状态，用户无法更改
checked：默认状态下，选择框是否被勾选；
required：设置为必填项，提交表单时，该内容绝对不能为空
minlength：最小长度，内容的长度不能小于该属性设定值
maxlength：最大长度，内容的长度不能大于该属性设定的值

下拉菜单

select：用于定义一个下拉菜单，通常配合option元素使用
option：定义选项的信息

<select name="" id="">
        <option value="广东省">广东省</option>
        <option value="广西省">广西省</option>
        <option value="吉林省">吉林省</option>
      </select>

在这里插入图片描述

select属性

size：应用于select标签上，在默认情况下会显示为下拉菜单，但设置了size属性且不为1时，则会以列表框的形式展示，size属性的值设置几个我们可视范围就为几个选项。
selected：应用于option标签上。表示默认情况下选中的元素

select选项分组

通过optgroup元素对下拉菜单或列表框定义分组选项，根据需求情况来使用

label：同于optgroup标签，定义当前分组的名称

      <select name="" id="">
        <optgroup label="广东省">
          <option value="">深圳市</option>
          <option value="">广州市</option>
          <option value="">江门市</option>
        </optgroup>
        <optgroup label="广西省">
          <option value="">百色市</option>
          <option value="">桂林市</option>
          <option value="">玉林市</option>
        </optgroup>
      </select>

在这里插入图片描述

textarea 多行文本域

<textarea name="" id="" cols="30" rows="10" wrap="off"></textarea>

在这里插入图片描述

文本域属性

cols：文本域的列数（宽度）
rows：文本域的行数（高度）
在实际开发中会通过css样式来直接控制文本域的宽高。
wrap：换行属性
- virtual：默认值，当内容大于文本域时会自动换行，但自动换行的位置并不会包含换行符的信息
- off：关闭自动换行，当内容超出文本区域时，会触发滚动条效果
- physical：内容大于文本区域时会自动换行，会记录下换行时的换行符，并且提交信息时，也会将换行符一并发送至服务端

button按钮

除了通过表单中的input定义按钮之外，还可以直接使用button标签定义一个按钮，这个按钮没有特殊功能，需通过js为他添加点击过后的操作。

<button>我是一个按钮</button>

button标签同样具有type属性，可以设置为reset、submit、button等属性值，来控制按钮的类型。如果不设置，现在一般主流的浏览器都会默认作为submit来使用。

form元素特有属性

action 属性

用于设置将数据提交给谁，即表单提交数据的目标地址。

method 属性

用于设置表单数据的提交方法，可以设置GET、POST两个值

GET：比较常用的方法，用法简便性能好，明文发送数据（通过地址栏传递数据），由于URL有一定的长度限制，因此传递的数据有限。
POST：安全性比GET要好，因为采用的是暗文发送数据（不通过地址栏传递），并且没有传递数据大小的限制。

enctype 属性

用于设置表单中用户输入数据发送到服务端时采用的编码类型。

application/x-www-form-urlencoded：将表单中的数据编码成键值对的形式发送给服务器，默认值
multipart/form-data：将表单中的数据编码成一条信息，每个表单域对应信息中的一个部分
text/plain：将表单中的数据以纯文本的形式进行编码，不建议使用

当enctype为application/x-www-form-urlencoded时，数据发送的格式为

"userNmae=admin&userPaw=123456"

为multipart/form-data时，数据发送的格式为

{
  userName={"admin"},
  userPaw={"123456"}
  userName:'admin',
  userPaw:'123456'
}

DaB210

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
2day-表格、表单

2day-表格、表单
复制链接

扫一扫

专栏目录

2day-表格、表单

表格

基础语法

表格的常用属性

单独设置表格列的宽度

嵌套规则

单元格合并

表单

表单的作用

表单的基本结构

常用的十种input元素

input元素的属性

下拉菜单

select属性

select选项分组

textarea 多行文本域

文本域属性

button按钮

form元素特有属性

action 属性

method 属性

enctype 属性

“相关推荐”对你有帮助么？