表格扩展学习
border-collapse:collapse添加单线
empty-cells:hide隐藏空单元
border/rotate斜线分类
colgroup/col列分组
表单扩展之美化控件
:checked
position+opacity
表单扩展之新input控件
email电子邮件地址输入框
url网址输入框
number数值输入框
range滑动条
date/month/week日期控件
search搜索框
color颜色控件
tel电话号码输入框
time时间控件’
<!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>Document</title>
</head>
<body>
<form action="hhtps://www.baidu.com">
<input type="email"><br>
<input type="url"><br>
<input type="number"><br>
<input type="range" min="0" max="10" value="8"><br>
<input type="date"><br>
<input type="month"><br>
<input type="week"><br>
<input type="color"><br>
<input type="search"><br>
<input type="tel"><br>
<input type="time"><br>
<input type="submit"><br>
</form>
</body>
</html>
加粗样式
表单扩展之新属性
autocomolete自动完成默认on
autofocus获取焦点
required不能为空
pattern正则验证
只能包含三个字母的输入字段(不允许数字或特殊字符):
pattern="[A-Za-z]{3}"
<form action="https://www.baidu.com">
<input type="text" name="username" autocomplete="off" autofocus required pattern="[a-z]+" >
</form>
表单扩展之数据传输
method数据传输方式
enctype数据传输类型
name/value数据的键值对
<form action="./data.php" method="POST" enctype="multipart/form-data">
<input type="file" name="filename">
<input type="submit">
</form>
表单扩展之标签
fieldset表单内元素分组
legend为fieldset元素定义标题
optgroup定义选项组
<body>
<fieldset>
<legend>登录</legend>
<p>
用户名:<input type="text">
</p>
<p>
密码:<input type="password">
</p>
</fieldset>
<select name="" id="">
<optgroup label="水果"></optgroup>
<option value="">苹果</option>
<option value="">香蕉</option>
<optgroup label="蔬菜"></optgroup>
<option value="">空心菜</option>
<option value="">茄子</option>
</select>
</body>
增强表单—数据列表
<!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>Document</title>
</head>
<body>
<input type="text" name="" id="" list="a">
<datalist id="a">
<option value="手机"></option>
<option value="手表"></option>
<option value="手环"></option>
<option value="手镯"></option>
</datalist>
</body>
</html>