表格、表单,新版表单编辑器HTML 表单制作

知梧 883 2022-08-06

「本文重点介绍关于表单。」

  • HTML中,使用table标签来创建一个表格

  • 在table标签中使用tr来表示表格中的一行,有几行就有几对tr

  • 在tr中需要使用td来创建一个单元格,有几个单元格就有几个td

  • rowspan用来设置纵向的合并单元格

  • colspan横向的合并单元格

设置表格的宽度:
居中:

margin: 0 auto;

边框:

border:1px solid black;

table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离
border-spacing: 10px

  • border-collapse可以用来设置表格的边框合并

  • 如果设置了边框合并,则border-spacing自动失效

  • 设置背景样式:
    background-color: #bfa

  • 设置边框:
    th, td{ border: 1px solid black; }
    长表格:

有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部

在HTML中为我们提供了三个标签:

  • thead 表头

  • tbody 表格主体

  • tfoot 表格底部

这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中
thead中的内容,永远会显示在表格的头部
tfoot中的内容,永远都会显示表格的底部
tbody中的内容,永远都会显示表格的中间
如果表格中没有写tbody,浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
以前表格更多的情况实际上是用来对页面进行布局的,但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套,可以在td中在放置一个表格

表单:

表单的作用就是用来将用户信息提交给服务器的
比如:百度的搜索框 注册 登录这些操作都需要填写表单
使用form标签创建一个表单
form标签中必须指定一个action属性,该属性指向的是一个服务器的地址
当我们提交表单时将会提交到action属性对应的地址
设置请求方式:method="post"
需要上传文件时要加属性: enctype="multipart/form-data
使用form创建的仅仅是一个空白的表单,我们还需要向form中添加不同的表单项
在表单中可以使用fieldset来为表单项进行分组,可以将表单项中的同一组放到一个fieldset中
在fieldset可以使用legend子标签,来指定组名

HTML 表单制作

HTML 表单

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

表单是一个包含表单元素的区域

表单元素是允许用户在表单中输入内容,

比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等

表单使用表单标签 来设置

HTML 表单-输入元素

多数情况下被用到的表单标签是输入标签()。

输入类型是由类型属性(type)定义的。

文本域(Text Fields)

image.png

image.png

密码字段

image.png

单选按钮(Radio Buttons

image.png

复选框(Checkboxes)

image.pngimage.png

简单的下拉列表

image.png重置

image.png

提交按钮(Submit Button)

image.png

文本域(Textarea)

image.png

完整代码

image.png

实验结果

image.png

「上述就是小编为大家整理的表单相关内容」

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Excel是什么软件?海量常用Excel模板下载,教你如何用Excel惊艳全场
下一篇:报表统计怎么做?什么是统计报表?统计报表如何获得? 统计工作一般是做些什么
相关文章