此表格非彼表格

原创 悠游 随笔 前端之路 212阅读 2017-11-21 21:07:45 举报

又是一日光阴如水逝去,远不敢拍着胸膛说完全没有辜负今日光阴。
总是有些歉疚的,对自己没有认真充分的使时光无所遗憾。
改改改,说改就改,力求让每一分钟过的无所遗憾。要不然都对不起自己每天在这拥挤的人群中挣扎求存的委屈!
不做就不做,要做就认真做。认真做好每件事,认真对待每分钟,就能过好每一天,就能过好这一生。
这个逻辑没毛病。

此表格非彼表格

今天新学了表格和表单的使用。在此之前,我对表格的所有印象,都只来自于办公软件中的表格。
对比了今天学的,尤其觉得办公软件真是个伟大的发明,简单快捷,能用极其简单的操作处理大量的工作。
不过话说前端里的表格也不难。计算机真是个神器,简化了很多工作,方便了很多人啊。
今天要尊师嘱,早点睡觉,用以保证白天的听课质量,就不唠嗑了,放图上总结,睡觉睡觉。

此表格非彼表格

表格标签:
table 表格
thead 表格头
th 元素定义表头
tbody 表格主体
tr 表格行
td 元素定义表格单元

表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充

colspan 属性规定单元格可横跨的列数。
<td colspan="2"></td>

rowspan 属性规定单元格可横跨的行数。
<td rowspan="2"></td>

form 表单
action 数据提交的地址
method 提交类型
GET
POST

所有的表单控件都需要被form包裹
form可以包裹多个表单控件

<input type="…… " name="" value="" /> 
text 文本框

password 密码

radio 单选
将同类型的radio设置同一个name就能达到互斥效果

checkbox 复选(多选)
submit 提交
reset 重置
button 按钮
file 上传
hidden 隐藏

键值对
name属性,提交数据时显示的字段(参数)
value属性
设置表单控件的值(页面加载就会展示)
提交数据时具体的值

    ?user=duoduo&pw=123&sex=on&like=on
    ?user=123&pw=321&like=on
    ?user=郑超&pw=zhengchao&sex=other&like=kingnongyao
    ?user=郑超&pw=zhengchao&sex=other&like=chi&like=shui&like=kingnongyao

https://www.baidu.com/s?wd=小姐姐
请求地址:https://www.baidu.com/s
参数:wd
input的默认样式
padding重置为0
按钮类型的表单控件
边框不占位置

label 标签为 input 元素定义标注
<input type="checkbox" name="" id="a"/>
<label for="a">……</label>

checked 在页面加载时默认选定的 input 元素。
<input type="checkbox" name="" checked/>
disabled 属性规定应该禁用 input 元素。
<input type="checkbox" name="" disabled/>

select/option 下拉选框
对高度的支持不兼容;
所设置的宽度是包含边框的大小
textarea 文本域
各个浏览器下的默认滚动条显示不兼容

html 代码

css 代码

评论 ( 1 )
最新评论