文章目录
- 一、HTML5 新增 input 表单属性
- 1、required 属性
- 2、placeholder 属性
- 3、autofocus 属性
- 4、autocomplete 属性
- 5、multiple 属性
一、HTML5 新增 input 表单属性
HTML5 新增 input 表单属性 :
- required 属性 : 属性值为 required , 一旦设置了该属性 , 则表单的内容就是必填项 , 不能为空 ;
- placeholder 属性 : 属性值为提示文本 , 又称为占位符 , 用于设置表单的提示信息 , 如果有默认值则不显示 ;
- multiple 属性 : 属性值为 multiple , 可以 选择多个文件提交 ;
- autofocus 属性 : 属性值为 autofocus , 设置了该属性 , 可以自动进行聚焦 , 页面加载完毕后 , 自动聚焦到设置了该属性的表单 ;
- autocomplete 属性 : 属性值为 off / on , 浏览器会记录之前输入的值 , 当用户输入时 , 会根据之前的记录 , 自动补全输入内容 ;
- 默认值是 on , 自动补全默认是打开的 ;
- 使用自动补全 , 需要满足以下两个条件 :
- 为表单添加 name 属性
- 自动补全的内容需要之前提交成功过
1、required 属性
required 属性 : 属性值为 required , 一旦设置了该属性 , 则表单的内容就是必填项 , 不能为空 ;
如果设置普通的表单 , 不设置 required 属性 ,
<form action="">
用户名 : <input type="text"> <input type="submit" value="提交">
</form>
不管在表单内输入什么内容 , 空的内容也能提交 ;
如果为表单设置了 required="required" 属性 ,
<form action="">
用户名 : <input type="text" required="required"> <input type="submit" value="提交">
</form>
完整代码示例 :
<!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="">
用户名 : <input type="text" required="required">
<input type="submit" value="提交">
</form>
</body>
</html>
显示效果 : 如果提交空的内容 , 会在对话框中报出如下错误 , 提升 " 请填写此字段 " ;
2、placeholder 属性
placeholder 属性 : 属性值为提示文本 , 又称为占位符 , 用于设置表单的提示信息 , 如果有默认值则不显示 ;
如 : 某商城 , 其搜索框表单 , 就有占位符 , 还可以当广告卖 ;
代码示例 :
<!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="">
用户名 : <input type="text" required="required" placeholder="请输入用户名">
<input type="submit" value="提交">
</form>
</body>
</html>
显示效果 :
3、autofocus 属性
autofocus 属性 : 属性值为 autofocus , 设置了该属性 , 可以自动进行聚焦 , 页面加载完毕后 , 自动聚焦到设置了该属性的表单 ;
如 : 百度搜索引擎 , 网页加载好 , 搜索表单, 直接自动获取焦点 ;
代码示例 :
<!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="">
用户名 : <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus">
<input type="submit" value="提交">
</form>
</body>
</html>
显示效果 : 网页加载好之后 , 表单直接自动获取焦点 ;
4、autocomplete 属性
autocomplete 属性 : 属性值为 off / on , 浏览器会记录之前输入的值 , 当用户输入时 , 会根据之前的记录 , 自动补全输入内容 ;
- 默认值是 on , 自动补全默认是打开的 ;
- 使用自动补全 , 需要满足以下两个条件 :
- 为表单添加 name 属性
- 自动补全的内容需要之前提交成功过
该属性大部分情况下都要设置为 off , 涉及到隐私 ;
代码示例 :
<!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="">
用户名 : <input type="text" required="required" placeholder="请输入用户名"
autofocus="autofocus" name="username" autocomplete="on">
<input type="submit" value="提交">
</form>
</body>
</html>
显示效果 :
-
先提交一次内容 :
-
再次输入就会有自动补全提示信息 :
5、multiple 属性
multiple 属性 : 属性值为 multiple , 可以 选择多个文件提交 ;
代码示例 :
<!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="">
用户名 : <input type="text" required="required" placeholder="请输入用户名"
autofocus="autofocus" name="username" autocomplete="on">
<br> 上传图片 : <input type="file" name="" id="" multiple="multiple">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
显示效果 : 在 file 表单中 , 点击 选择文件 按钮 , 可以在弹出的对话框中 , 一次性选择多个文件 ;
