详谈HTML表格和表单
16lz
2022-01-23
Table(表格)元素
Table元素介绍
Table可以在HTML中生成表格
由caption(标题) + thead（头部） + tbody(内容) + tfoot(脚部)组成，大致形式为
<table><caption></caption><thead></thead><tbody><tr><td></td></tr></tbody><tfoot><tr><td></td></tr></tfoot></table>
Table元素实践
用Table生成课程表，代码如下(这里引入了LayUI的css文件来做简单的美化)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表格</title><!-- 引入 layui.css --><link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" /><!-- 引入 layui.js --><script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script></head><body><table class="layui-table" lay-even style="width: 700px; height: 500px"><caption style="font-size: 20px">课程表</caption><thead><tr><th colspan="2" style="text-align: center">时间</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr></thead><tbody><tr><td rowspan="4" style="text-align: center">上午</td><td>8:00-8:50</td><td>数学</td><td>语文</td><td>英语</td><td>体育</td><td>音乐</td></tr><tr><td>9:00-9:50</td><td>数学</td><td>语文</td><td>英语</td><td>体育</td><td>音乐</td></tr><tr><td>10:00-10:50</td><td>数学</td><td>语文</td><td>英语</td><td>体育</td><td>音乐</td></tr><tr><td>11:00-11:50</td><td>数学</td><td>语文</td><td>英语</td><td>体育</td><td>音乐</td></tr><tr><td colspan="7" style="text-align: center">中午</td></tr><tr><td rowspan="3" style="text-align: center">下午</td><td>14:00-14:50</td><td>数学</td><td>语文</td><td>英语</td><td>体育</td><td>音乐</td></tr><tr><td>15:00-15:50</td><td>数学</td><td>语文</td><td>英语</td><td>体育</td><td>音乐</td></tr><tr><td>16:00-16:50</td><td>数学</td><td>语文</td><td>英语</td><td>体育</td><td>音乐</td></tr></tbody><tfoot><tr><td colspan="7" style="text-align: center">备注：体育课被数学老师占了</td></tr></tfoot></table></body></html>
页面展示
Form(表单)元素
Form元素介绍
Form元素用来生成表单,常用于实现用户注册,等功能
一般由action、input元素和button元素组成，action实现请求处理表单的程序，input实现向表单内添加数据，button实现提交数据。
而input中同样存在很多属性，如name定义input中数据的名称，type定义数据类型，value用来设置数据的默认值等。
button中只有type为submit时才能实现提交。
提交表单有两种请求Get和Post，Post相对于Get可以在URL中隐藏数据信息，更加安全。
Form元素实践
用Form生成一个表单,代码如下(这里同样引入了LayUI的css文件来做简单的美化)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表格</title><!-- 引入 layui.css --><link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" /><!-- 引入 layui.js --><script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script></head><body><form action="" class="layui-form" style="width: 700px;height: 700px;"><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div><div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-inline"><input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"></div><div class="layui-form-item"><label class="layui-form-label">复选框</label><div class="layui-input-block"><input type="checkbox" name="like[write]" title="写作"><input type="checkbox" name="like[read]" title="阅读" checked><input type="checkbox" name="like[dai]" title="发呆"></div></div><div class="layui-form-item"><label class="layui-form-label">单选框</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男" checked><input type="radio" name="sex" value="女" title="女"></div></div><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button></div></div></form></body></html>
页面展示
更多相关文章
- 浅谈Android五大布局
- Android中常用的五种布局方式:FrameLayout
- Android(安卓)五大布局
- Android商城购物车页面实现和逻辑实现
- 浅谈Android五大布局
- Android(安卓)API Demos学习(1) - Hello World
- android中数据存储及对xml的解析
- Android(安卓)背景透明度设置和设置GridView元素间距
- [androidUI]一些布局