HTML5学习笔记简明版(7):新增属性(2)

dirname属性

input 和 textarea 元素有了一个新元素 dirname,用于用户所设置的提交的方向性的控制(译注,即书写的方向性,ltr或rtl)。

<form action="addcomment.cgi" method=post>
 <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
 <p><button name="mode" type=submit value="add">Post Comment</button></p>
</form>

 

用户提交的时候,浏览器会接收到3个参数,分别是:comment, comment.dir和mode,类似下面这样:comment=Hello&comment.dir=ltr&mode=add

如果是阿拉伯文的浏览器,输入的是阿拉伯文的话,那传回的参数就应该是这样的:

comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&comment.dir=rtl&mode=add

 

textarea下的maxlength和wrap属性

textarea新增的maxlength和input的maxlength是一样的,都是限制最大长度的。

新增的wrap属性为枚举值(soft/hard),意思分别是:

  • hard:自动硬回车换行,换行标记一同被传送到服务器中去,必须与cols同时使用才能判断多少字符换行;
  • soft:自动软回车换行,换行标记不会传送到服务器中去

 

form下的novalidate属性

新增属性novalidate的意思是允许form表单不验证即可提交(不用管form里的元素是否有验证条件,例如required, min, max等)。

例子代码:

<form action="demo_form.asp" novalidate="novalidate">
  E-mail: <input type="email" name="user_email" />
  <input type="submit" />
</form>

 

还有一种用法是,同一个form里有多个submit按钮,可以针对某个按钮设置formnovalidate属性来忽略验证,例如:

<form action="editor.cgi" method="post">
 <p><label>Name: <input required name=fn></label></p>
 <p><label>Essay: <textarea required name=essay></textarea></label></p>
 <p><input type=submit name=submit value="Submit essay"></p>
 <p><input type=submit formnovalidate name=save value="Save essay"></p>
 <p><input type=submit formnovalidate name=cancel value="Cancel"></p>
</form>

 

该form只有在点击Submit essay按钮的时候才验证表单,另外2个按钮不验证。

input与button下的新属性

input和button元素新增加了几个新属性(formaction, formenctype, formmethod, formnovalidate和formtarget),如果这些设置这些属性的话,那所对应的form属性值将被覆盖,即input或button所属 的form元素的action, enctype, method, novalidate和target属性的值将被覆盖。

例子代码:

<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
</form>

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" /><br />
  <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formtarget="_blank" value="Submit" />
</form>

 

menu下的type和label属性

menu 元素有了两个新属性:type 和 label。它们允许元素转化成典型用户界面里的菜单,并结合全局 contextmenu 属性提供上下文菜单。

 

style下的scoped属性

style 元素有了一个新的 scoped 属性,用来启用限定作用范围的样式表。在一个这样的 style 元素里的样式规则只应用到当前style元素的父元素根下的子树,即兄弟树。

<!-- 这个article正常使用head里声明的style -->
 <article>
    <h1>Blah Title Blah</h1>
    <p>Blah blah article blah blah.</p>
</article>

<article>
    <!-- 这里声明的style只能让该article以及子元素使用 -->
    <style scoped>
        h1 { color: hotpink; }
        article { border: solid 1px hotpink; }
    </style>
    <h1>Blah Title Blah</h1>
    <p>Blah blah article blah blah.</p>
</article>

 

script下的async属性

async属性可以让script加载的脚步异步执行(即必须是src引用文件的形式才可以用),例如: