【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )

韩曙亮

发布于 2023-04-24 11:26:07

2.9K0

发布于 2023-04-24 11:26:07

文章被收录于专栏：韩曙亮的移动开发专栏

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