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 属性适用于以下类型的 标签: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属性的话, 输入空白的表单就不会被提交。下面是一个简单的例子,同时我们也添加了占位符属性和不加引号特性:


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<form method="post" action="">
			

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

2、自动对焦(Autofocus)属性

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


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

你可能感兴趣的:(html日常总结,html,html5)