HTML5 新增表单元素

最新推荐文章于 2023-10-10 14:45:31 发布

houyanhua1

最新推荐文章于 2023-10-10 14:45:31 发布

阅读量558

点赞数 1

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/houyanhua1/article/details/79624210

版权

HTML5 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

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>
				加密类型：<keygen/>  <!--会给服务端发送一个公钥,客户端有一个私钥,保证数据传输中不被篡改-->
			</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>

houyanhua1

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 新增表单元素

demo.html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; form { width:
复制链接

扫一扫