（14）H5新增表单属性

一、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>

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

点击确定我们可以看到提示信息为：4个文件。

（14）H5新增表单属性相关推荐

html中input标签中type属性小总(包含html5新增表单属性)
前言 HTML5新增了许多属性和方法,其中一些就有input标签中 type属性. 有关于input中type的全部可取值如下 1.button 2.text 3.time(会呈现表的形状) 4. ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
HTML5新增表单属性（HTML5）
HTML5新增表单属性(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...
html表单新增类型,HTML5表单设计——新增输入类型和新增表单属性
新增输入类型 email类型用来输入邮箱地址的文本框.该文本框与普通文本框在页面显示时没有任何区别,专门用于接收Email地址信息.提交表单时自动验证是否符合Email地址格式,如果不符合,将提示相 ...
H5新增表单元素、控件
表单-新增控件类型 • HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下. • ①email.②url.③number.④range • ⑤Date pick ...
Html5新增表单属性
新增输入类型: Type="email" 限制用户输入email类型 Type="url" 限制用户必须输入url类型 Type="range&q ...
h5新增标签和表单属性
一.h5新增结构性标签(有意义的div) 1.header 定义网页的头部 2.nav 定义网页的导航部分 3.section 定义网页的某个区域 4.footer 定义网页的底部 5.article ...
新增表单元素属性事件
表单-新增控件类型 HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下. ①email.②url.③number.④range ⑤Date pickers (d ...