HTML5 表单属性

placeholder:输入框提示文本(占位符)
autofocus:自动获取焦点
autocomplete:输入框缓存提示(默认:on 开启缓存提示)
required:输入框不能为空(属性值和属性名相同可以省略不写属性值)
multiple:可以选择上传多个文件
novalidate:关闭表单自动验证功能 (只能加给form标签)
pattern:自动验证时,要匹配的正则表达式


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="" novalidate>  <!--novalidate:关闭表单自动验证功能-->
		<fieldset>
			<legend>表单属性</legend>
			<label>  
                用户名: <input type="text" name="userName" placeholder="请输入用户名..." autofocus="autofocus" autocomplete="on" required>
                <input type="file" multiple>   <!--multiple:可以选择上传多个文件--> 
                <!--placeholder:输入框提示文本(占位符)
                	autofocus:自动获取焦点
                	autocomplete:输入框缓存提示(默认:on 开启缓存提示)
                	required:输入框不能为空(属性值和属性名相同可以省略不写属性值)
                	multiple:可以选择上传多个文件
                	novalidate:关闭表单自动验证功能 (只能加给form标签)
                	pattern:自动验证时,要匹配的正则表达式
                -->
            </label>
            <label>
            	电话:<input type="tel" pattern="1\d{10}">  <!--pattern:自动验证时,要匹配的正则表达式-->
            </label>

			<input type="submit">
		</fieldset>
	</form>
</body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值