HTML5新增的input属性你知道多少？

最新推荐文章于 2024-03-14 10:21:51 发布

VIP文章丑小鸭变黑天鹅

最新推荐文章于 2024-03-14 10:21:51 发布

阅读量1.3k

点赞数 1

分类专栏： html日常总结文章标签： html html5

本文链接：https://blog.csdn.net/qq_41880073/article/details/114891366

版权

HTML5新增的input属性你知道多少？

1、必要（Required）属性
2、自动对焦（Autofocus）属性
3、pattern 属性
4、multiple 属性
5、min、max 和 step 属性
6、占位符（placeholder属性）
7、电子邮件输入
8、list 属性
9、height 和 width 属性

1、必要（Required）属性

表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：
required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<input type=”text” name=”someInput” required>

或者，更严谨：

<input type=”text” name=”someInput” required=”required”>

上面两行代码都行得通。用了这行代码之后，并且浏览器支持required属性的话，输入空白的表单就不会被提交。下面是一个简单的例子，同时我们也添加了占位符属性和不加引号特性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form method="post" action="">
			<label for= someInput> Your Name: </label>
			<input type= text id= someInput name= someInput placeholder= "Douglas Quaid" required>
			<button type= submit >Go</button>
		</form>
	</body>
</html>

在这里插入图片描述
可以看到，当不输入内容那个就点击提交按钮时，会提示请填写此字段

2、自动对焦（Autofocus）属性

同样地，有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。如果某个输入应该被"选择"或被聚焦，我们现在可以使用HTML的自动对焦autofocus属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="text" id="text" placeholder="zidongjujiao" required

最低0.47元/天解锁文章

丑小鸭变黑天鹅

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增的input属性你知道多少？

HTML5新增的input属性你知道多少？1、必要（Required）属性2、自动对焦（Autofocus）属性3、pattern 属性4、multiple 属性5、min、max 和 step 属性6、占位符（placeholder属性）7、电子邮件输入8、list 属性9、height 和 width 属性1、必要（Required）属性表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：required 属性适用于以下类型的 &l
复制链接

扫一扫