文章目录
- 一、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 表单中 , 点击 选择文件 按钮 , 可以在弹出的对话框中 , 一次性选择多个文件 ;
