（14）H5新增表单属性

最新推荐文章于 2024-09-09 09:48:00 发布

泽哥ins

最新推荐文章于 2024-09-09 09:48:00 发布

阅读量462

点赞数

分类专栏： HTML5 文章标签：前端 html5 html

本文链接：https://blog.csdn.net/qq_36213140/article/details/121418811

版权

HTML5 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

一、required属性演示

<!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>H5新增表单属性--泽哥ins</title>
</head>
<body>
    <form action="">
        <input type="text" required><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

通过如上图所示，<input>标签加入了required属性，当我们不输入内容时，直接点击提交，会提示如下信息：

二、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>H5新增表单属性--泽哥ins</title>
</head>
<body>
    <form action="">
        姓名：<input type="text" required placeholder="请输入姓名"><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

通过上图我们给<input>标签加入了placeholder属性，我们可以看到如下图的提示信息，当我们输入内容的时候，该提示信息将消失。

当输入框没有输入文字：

当输入框输入文字以后：

当添加了value属性以后：

<!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>H5新增表单属性--泽哥ins</title>
</head>
<body>
    <form action="">
        姓名：<input type="text" required placeholder="请输入姓名" value="泽哥ins"><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

三、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>H5新增表单属性--泽哥ins</title>
</head>
<body>
    <form action="">
        用户名:<input type="text" required placeholder="请输入用户名" value="泽哥ins" autofocus><br/>
        密码：<input type="password" placeholder="请输入密码"><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

添加autofocus属性后运行结果：它会自动获取输入框焦点，通常网页只设置一个该属性。

四、autocomplete属性演示

注意：使用autocomplete属性，需要添加name属性，如果没有添加name属性则该属性不会提示以前输入后提交过的内容信息。

<!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>H5新增表单属性--泽哥ins</title>
</head>
<body>
    <form action="">
        用户名:<input type="text" autocomplete="on" name="account"><br/>
        密码：<input type="password" placeholder="请输入密码"><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

1.设置name属性后的运行结果：

2.没有设置name属性后的运行结果：

通过如上图我们看到，没有设置name属性，我们获取焦点的时候，它没有下拉框的提示信息的内容显示。

3.将autocomplete属性的取值设置为off的运行结果：

通过如上图我们看到，就自动完成的这个属性取值设置为off，即为关闭它，则设置了name属性也无法看到下拉框的提示信息内容。

五、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>H5新增表单属性--泽哥ins</title>
</head>
<body>
    <form action="">
        上传文件： <input type="file"><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

1.当我们没有给文件添加multiple属性的运行结果：只能选择一个文件提交。

2.当我们给文件添加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>H5新增表单属性--泽哥ins</title>
</head>
<body>
    <form action="">
        上传文件： <input type="file" multiple><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

可以看到如下图可以选择多个文件。