表格,表单元素详解

举报
小妖现世 发表于 2020/06/19 06:45:06 2020/06/19
【摘要】 前端开发工程师在整个工作流中所处的位置PM、PD - 产品经理 UE - 设计UI/用户体验研究 RD - 前端开发工程师 QA - 质量保障工程师 OP - 运维(开发)工程师1.表格标签表格由<table>标签来定义;每个表格均有若干行(由 <tr> 标签定义)每行被分割为若干单元格(由 <td> 标签定义)字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可...

前端开发工程师在整个工作流中所处的位置

  • PM、PD - 产品经理 

  • UE - 设计UI/用户体验研究 

  • RD - 前端开发工程师 

  • QA - 质量保障工程师 

  • OP - 运维(开发)工程师

1.表格标签

  • 表格由<table>标签来定义;

  • 每个表格均有若干行(由 <tr> 标签定义)

  • 每行被分割为若干单元格(由 <td> 标签定义)

  • 字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

表格Table

  • HTML表格表头: 表格的表头使用<th>标签进行定义;大多数浏览器会把表头显示为粗体居中的文本。

  • HTML带有标题的表格: 表格的标题用caption表示

  • colspan 属性规定单元格可横跨的列数

  • rowspan 属性规定单元格可横跨的行数

  • 单元格边距(Cell padding) : cellpadding

  • 单元格间距(Cell spacing):  cellspacing

 表格样式重置

  • table{ border-collapse:collapse} 单元格间隙合并

  • th,td{ padding: 0} 重置单元格默认填充

2.表格属性

table-layout:

  • 设置或检索表格的布局算法

  • auto: 默认的自动算法。布局将基于各单元格的内容,换言之,可能你给某个单元格定义宽度为100px,但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来,速度很慢;

  • fixed: 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切;

border-collapse:

  • 设置或检索表格的行和单元格的边是合并还是独立

  • separate: 边框独立

  • collapse: 相邻边被合并

  • 注意: 只有当表格边框独立(即border-collapse属性等于separate时,border-spacing属性才起作用)

border-spacing:

  • 设置或检索当表格边框独立时,行和单元格的边框在横向和纵向上的间距

  • 该属性作用等同于标签属性cellspacing(单元格边距)。border-spacing:0等同于cellspacing=”0”

  • 只有当表格边框独立(即 border-collapse 属性等于separate时)此属性才起作用。

  • 如果提供全部两个length值时,第一个作用于横向间距,第二个作用于纵向间距。

  • 如果只提供一个length值时,这个值将作用于横向和纵向上的间距。

caption-side:

  • 设置或检索表格的caption对象是在表格的那一边

  • top:指定caption在表格上边

  • bottom: 指定caption在表格下边

empty-cells:

  • 设置或检索当表格的单元格无内容时,是否显示该单元格的边框

  • hide:  指定当表格的单元格无内容时,隐藏该单元格的边框

  • show: 指定当表格的单元格无内容时,显示该单元格的边框

  • IE7及以下浏览器只默认隐藏无内容的单元格边框,要想使其获得与show参数值相同的效果,可以变相给该空单元格加个占位且不可见的元素,例如全角空格或&nbsp等等

2.表单标签

HTML 表单用于搜集不同类型的用户输入;

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

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

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

input标签

input> 标签规定了用户可以在其中输入数据的输入字段。 <input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。

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

  •  文本域(Text Fields)<input type="text">

  •  密码字段 <input type="password">

  •  单选按钮(Radio Buttons)<input type="radio">

  •  复选框(Checkboxes) <input type="checkbox">

  •  提交按钮(Submit Button) <input type="submit"> 

  •  重置按钮(Reset Button) <input type="reset"> 

  •  Button按钮(Button类型) <input type="button"> 

label标签

  • <label> 标签为 input 元素定义标注(标记)

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

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

提示: for 属性可把 label 绑定到另外一个元素。请把 for 属性的值设置为相关元素的 id 属性的值

select下拉列表

  • select 元素定义下拉列表 

  • option 元素定义待选择的选项, 列表通常会把首个选项显示为被选选项

textarea文本域

  • textarea 元素定义多行输入字段(文本域); 

  • rows 规定文本区域内可见的行数; 

  • cols 规定文本区域内可见的宽度;

button可点击按钮

  • button 元素定义可点击的按钮

3.表单属性

value属性:

  • value属性规定输入字段的初始值

readonly属性:

  • readonly 属性规定输入字段为只读(不能修改)

disabled属性:

  • disabled 属性规定输入字段是禁用的。 被禁用的元素是不可用和不可点击的。 被禁用的元素不会被提交

size属性:

  • size 属性规定输入字段的尺寸(以字符计)

maxlength属性

  • maxlength 属性规定输入字段允许的最大长度

autofocus属性

  • autofocus是布尔属性。 如果设置,则规定当页面加载时 <input> 元素应该自动获得焦点

placeholder属性

  • placeholder 属性规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。 

  • 该提示会在用户输入值之前显示在输入字段中。 

  • placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password'

required属性

  • required 属性是布尔属性。 

  • 如果设置,则规定在提交表单之前必须填写输入字段。 

  • required 属性适用于以下输入类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。