【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )
一、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 表单中 , 点击 选择文件 按钮 , 可以在弹出的对话框中 , 一次性选择多个文件 ;
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )
本文地址： https://pptw.com/jishu/290320.html