HTML 5 required 属性

HTML 5 required 属性

展开阅读全文

今天点击提交按钮的时候，因为文本框没有输入任何东西，然后他就出来一个提示： 请填写此字段 然后我找啊找，找了好久，一直找不到这个在哪里写的。最后一点点删除掉代码，发现这个required="required" input，textarea文本框标签带有这个，就会在为空的时候出发这个提示。实例代码：

<form action="demo_form.asp" method="get">
  Name: <input type="text" name="usr_name" required="required" />
  <input type="submit" />
</form>

定义和用法

required 属性规定必需在提交之前填写输入字段。

如果使用该属性，则字段是必填（或必选）的。

注释：required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

HTML 4.01 与 HTML 5 之间的差异

required 属性是 HTML5 中的新属性。

使用问题：

html 5 required属性 js提交无法触发提示

<form name="test">
<input type="text" required/>
</form>
<a href="javascript:test.submit()">submit</a>
现在由于条件限制 只能用js提交 怎么样才能触发required

解决方法：

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8 />
<title>recursion</title>
<style type="text/css">
</style>
<script type="text/javascript">
    function sub ()
    {
        document.getElementById('sub').click();
    }
</script>
</head>
<body>
    <form name="form">
        <input type="text" required="required" /> 
        <input style="display: none;" type="submit" id="sub" value="submit" />
    </form>
    <a href="#" onclick="sub();">submit</a>
</body>
</html>

原理是这样，设置2个按钮，一个是css为display:none提交按钮,代码如下:

<input style="display: none;" type="submit" id="sub" value="submit" />

一个是点击触发js按钮a标签。

<a href="#" onclick="sub();">submit</a>

通过点击a标签后，触发隐藏提交按钮的点击事件，从而触发这个submit提交效果。