input表单元素required用法

input表单元素required用法

定义和用法

required 属性是一个布尔属性。
required 属性规定必需在提交表单之前填写输入字段。
注意：required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

HTML 4.01 与 HTML5之间的差异

required 属性是 HTML5 中的新属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，禁止属性最小化，required 属性必须定义为 。

实例

带有必填字段的 HTML 表单：

// An highlighted block

<form action="" method="get" name="myForm">
	<h1>用户注册</h1>
	<input type="text" name="username" required="required" pattern="^[a-zA-Z0-9_]{4,16}$" placeholder="账号为4到16位（字母，数字，下划线）" title="账号为4到16位（字母，数字，下划线）"/>
    <input type="password" name="password1" required="required" pattern="^[a-zA-Z0-9_]{6,16}$" placeholder="请输入密码" title="密码为4到16位（字母，数字，下划线）"/>
    <input type="password" name="password2" required="required" pattern="^[a-zA-Z0-9_]{6,16}$" placeholder="请确认密码" title="密码为4到16位（字母，数字，下划线）"/>
    <input type="email" name="email" required="required" placeholder="请输入邮箱" pattern="^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+" title="请输入有效的邮箱地址"/>
    <input type="text" name="phone" required="required" placeholder="请输入手机号" pattern="^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$" title="请输入正确的手机号"/>
    <input type="submit" value="注册" ng-disabled="myForm.name.$error.required"/>
</form>

required 只是表单的一个输入验证，并不是说什么都不输入就不能点提交按钮，想要不输入的时候就不提交可以在提交按钮用ng-disabled来定义一下

<form action="http://www.sina.com" name="myForm">
<input type="text" name="name" required>
<button ng-disabled="myForm.name.$error.required">提交</button>
</form>

当name为name的iuput标签有required错误时提交按钮不可用。