HTML5 新增表单元素
程序员文章站
2022-05-11 14:46:13
...
demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form {
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}
input {
display: block;
width: 100%;
height: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单元素</legend>
<label>
用户名： <input type="text" name="userName">
</label>
<label>
密码： <input type="password" name="pwd">
</label>
<label>
性别： <input type="text" name="sex" list="sexs"> <!--通过list属性绑定数据列表-->
</label>
<datalist id="sexs"> <!--数据列表标签-->
<option>男</option> <!--不写value属性-->
<option>女</option>
<option>不详</option>
</datalist>
<label>
推荐人：<output>张三</output> <!--output标签不会提交，只做数据展示-->
</label>
<br><br>
<label>
加密类型：<******/> <!--会给服务端发送一个公钥,客户端有一个私钥,保证数据传输中不被篡改-->
</label>
<br><br>
<label>
度量器：<meter value="50" max="100" min="0" low="30" high="80"></meter> <!--value低于low的值或高于high的值，颜色会变成警告色-->
</label>
<br><br>
进度条：<progress value="40" max="100" min="0"></progress>
<input type="submit">
</fieldset>
</form>
</body>
</html>下一篇： 问题D：比较奇偶数个数