...
1、表格元素
1.1 数据标签
| 序号 |
标签 |
描述 |
| 1 |
<table> |
声明表格, 必选
|
| 2 |
<tr> |
定义表格中的行, 必选
|
| 3 |
<th> |
定义表格头部中的单元格, 必选
|
| 4 |
<td> |
定义表格主体中的单元格, 必选
|
1.2 结构标签
| 序号 |
标签 |
描述 |
| 1 |
<option> |
定义表格标题, 可选
|
| 2 |
<thead> |
定义表格头格, 只需定义一次, 可选
|
| 3 |
<tbody> |
定义表格主体, 允许定义多次, 可选
|
| 4 |
<tfooter> |
定义表格底, 只需定义一次, 可选
|
1.3 常用属性
| 序号 |
属性 |
所属标签 |
描述 |
| 1 |
border |
<table> |
添加表格框 |
| 2 |
cellpadding |
<table> |
设置单元格内边距 |
| 2 |
cellspacing |
<table> |
设置单元格边框间隙 |
| 2 |
align |
不限 |
设置单元格内容水平居中 |
| 2 |
bgcolor |
不限 |
设置背景色 |
实例—课程表表
代码块1：
<table border="1" width="480px" cellspacing="0" style="text-align:center;"> <thead style="background-color: #f50303;height: 40px;font-size: 18px;"> <!-- <th> --> <td>时间</td> <td>周一</td> <td>周二</td> <td>周三</td> <td>周四</td> <td>周五</td> <td>周六</td> <!-- </th> --> </thead> <tbody> <tr> <td rowspan = 4 style="background-color: #b2dcf8;">上午</td> <td>vs code编辑器</td> <td>css</td> <td>php</td> <td>js</td> <td>laravel</td> <td>layui</td> </tr> <tr> <!-- <td>上午</td> --> <td>vs code插件</td> <td>css</td> <td>php</td> <td>js</td> <td>laravel</td> <td>layui</td> </tr> <tr> <!-- <td>上午</td> --> <td>html入门</td> <td>css</td> <td>php</td> <td>js</td> <td>laravel</td> <td>layui</td> </tr> <tr> <!-- <td>上午</td> --> <td>html元素</td> <td>css</td> <td>php</td> <td>js</td> <td>laravel</td> <td>layui</td> </tr> <tr> <td colspan=7 style="text-align:center;background-color:#fafab3">中午休息</td> </tr> <tr> <td rowspan = 3 style="background-color: #b2dcf8;">下午</td> <td>html标签</td> <td>css</td> <td>php</td> <td>js</td> <td>laravel</td> <td>layui</td> </tr> <tr> <!-- <td>下午</td> --> <td>table</td> <td>css</td> <td>php</td> <td>js</td> <td>laravel</td> <td>layui</td> </tr> <tr> <!-- <td>下午</td> --> <td>form表单</td> <td>css</td> <td>php</td> <td>js</td> <td>laravel</td> <td>layui</td> </tr> <tr> <td>备注</td> <td colspan=7>放学要完成作业才能睡觉</td> <!-- <td>周二</td> <td>周三</td> <td>周四</td> <td>周五</td> <td>周六</td> --> </tr> </tbody> </table>
页面显示1：
2.1 表单元素类型
| 序号 |
元素 |
名称 |
描述 |
| 1 |
<form> |
表单容器 |
表单应该放在该标签内提交 |
| 2 |
<input> |
输入控件 |
由type属性指定控件类型 |
| 3 |
<label> |
控件标签 |
用于控制功能描述与内容关联 |
| 4 |
<select> |
下拉列表 |
用于选择预置的输入内容 |
| 5 |
<datalist> |
预置列表 |
用于展示预置的输入内容 |
| 6 |
<option> |
预置选项 |
与 select、datalist 配合使用 |
| 7 |
<textarea> |
文本域 |
多行文本框，常与富文本编辑器配合使用 |
| 8 |
<button> |
按钮 |
用于提交表单 |
| 序号 |
元素 |
名称 |
描述 |
| 1 |
<form> |
表单容器 |
表单应该放在该标签内提交 |
| 2 |
<input> |
输入控件 |
由type属性指定控件类型 |
| 3 |
<label> |
控件标签 |
用于控制功能描述与内容关联 |
| 4 |
<select> |
下拉列表 |
用于选择预置的输入内容 |
| 5 |
<datalist> |
预置列表 |
用于展示预置的输入内容 |
| 6 |
<option> |
预置选项 |
与 select、datalist 配合使用 |
| 7 |
<textarea> |
文本域 |
多行文本框，常与富文本编辑器配合使用 |
| 8 |
<button> |
按钮 |
用于提交表单 |
2.2 表单元素属性
2.1.1 表单元素属性列表
| 序号 |
元素 |
属性 |
| 1 |
<form> |
action、method |
| 2 |
<input> |
for |
| 3 |
<label> |
type、name、value、placeholder |
| 4 |
<select> |
name |
| 5 |
<datalist> |
id 与 input list=""关联 |
| 6 |
<option> |
value、label、selected |
| 7 |
<textarea> |
cols、rows、name |
| 8 |
<button> |
type、name |
2.1.2 表单元素属性含义
| 序号 |
属性 |
含义 |
| 1 |
name |
元素/控件名称，用做服务器脚本的变量名称 |
| 2 |
value |
提交到服务器端的数据 |
| 3 |
placeholder |
输入框的提示信息 |
| 4 |
form |
所属的表单，与<form name = ""> 对应 |
| 5 |
autofocus |
页面加载时自动获取焦点 |
| 6 |
required |
必填，必须项 |
| 7 |
readonly |
改控件内容只读 |
| 8 |
disabled |
是否禁用 |
| 序号 |
属性 |
名称 |
描述 |
| 1 |
text |
文本框 |
默认值 |
| 2 |
password |
密码框 |
输入内容显示为*
|
| 3 |
radio |
单选按钮 |
多个选项中仅允许提交一个选项，应设置默认值 |
| 4 |
checkbox |
复选框 |
允许提交一个或多个选项，应设置默认值 |
| 5 |
hidden |
隐藏域 |
页面不显示但数据仍会提交 |
| 6 |
file |
文件上传 |
本地文件上传，有 accept、multiple 属性 |
| 7 |
submit |
提交按钮 |
点击会提交按钮所有的表单 |
| 8 |
reset |
重置按钮 |
重置输入控件中的内容为默认 |
| 9 |
button |
自定义按钮 |
一般使用 js 脚本定义点击后的行为 |
| 10 |
email |
邮箱 |
输入肉容必须是邮箱格式 |
| 11 |
number |
整数 |
输入肉容必须是整数格式 |
| 12 |
url |
URL 地址 |
输入肉容必须是有效的 URL 格式 |
| 13 |
seaech |
搜索框 |
通常与 autocomplete 配合 |
| 14 |
date |
日期控件 |
不同浏览器可能会有不同 |
| 15 |
color |
调色板 |
可直接选择颜色 |
| 16 |
tel |
电话号码 |
手机端会弹出数字键盘 |
实例—注册表单
代码块：
<form class="layui-form" action="" style="width: 480px; height: 320px;margin: 60px auto;background-color: #f2eada;"> <!-- input 文本框 --> <div class="username"> <label for="username">用户名:</label> <input type="text" id="username" placeholder="username"> </div> <!-- 密码框 --> <div class="password"> <label for="password">密码:</label> <input type="password" id="password" placeholder="password" value=""> </div> <div class="passwordcopy"> <label for="passwordcopy">重复密码:</label> <input type="password" id="passwordcopy" placeholder="passwordcopy" value=""> </div> <!-- 邮箱 --> <div> <label for="email">邮箱:</label> <input type="email" name="email" id="email" placeholder="mail" value=""> </div> <!-- 单选框 --> <!-- input name 值要一样，才能设置单选 --> <div> <label for="male">性别:</label> <input type="radio" name="gender" id="male" value="male" checked/><label for="male">男</label> <input type="radio" name="gender" id="female" value="female" /><label for="female">女</label> </div> <!-- 复选框 --> <!-- name 值要是数组形式 --> <div class="checkboxs"> <label for="">爱好:</label> <div style="display: flex;"> <div> <label for="shoot">编程</label> <input type="checkbox" name="hobby[]" value="1"> </div> <div> <label for="shoot">学习</label> <input type="checkbox" name="hobby[]" value="2"> </div> <div> <label for="shoot" name="hobby[]" value="3">游戏</label> <input type="checkbox"> </div> </div> </div> <!-- 下拉列表 --> <div class="selection"> <label for="">选择会员等级:</label> <select name="level" id=""> <option value="1">铜牌会员</option> <option value="2">金牌会员</option> <option value="3" selected>永久会员</option> </select> </div> <div class="button" style="margin: 18px auto;width:180px;display: flex;"> <button style="width: 58%;margin-right: 4px;background-color: #1E9FFF;">提交</button> <button style="width: 58%;background-color: #1E9FFF;">清空</button> </div> </form>
页面显示1：
