HTML5--常见的新属性（中）

程序员文章站 2022-04-29 17:20:00

...

上一篇文章：HTML5–常见的新属性（前）

表单相关属性

这里涉及到的标签，包括form标签、input标签、button标签、textarea标签、select标签、******标签、label标签等等。

新增属性主要包括以下几种：

autocomplete
novalidate和formnovalidate
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 、max与step
multiple
pattern (regexp)
placeholder
required

演示环境配置

为了方便演示，我使用了node.js，用于演示相关内容。

var http=require("http");
var  querystring = require('querystring');
http.createServer(function(req,res){
    switch(req.url){
        case '/form':
            if(req.method=="POST"){
                console.log('[200]'+req.method+"to"+req.url);
                var fullBody='';
                console.log(req.url);
                req.on("data",function(chunk){
                    fullBody +=chunk;
                });
                req.on("end",function(){
                    res.writeHead(200,"OK",{"Content-Type":"text/html;charset=utf-8"});
                    res.write(`
                    <html>
                        <head>
                        <title>Post data</title>
                        </head>
                        <style>
                            th,td{text-align:left;padding:5px;color:black}
                            th{background-color:grey;color:while;min-width:10em}
                            td{backgroun-color:lightgrey}
                            caption{font-weight:bold}
                        </style>
                        <body>
                            <table border="1">
                                <caption>Form data</caption>
                                <tr><th>Name</th><th>Value</th></tr>
                        `);                 
                   fullBody=querystring.parse(fullBody);
                    for(var prop in fullBody){
                        res.write(`<tr><td>`+prop+`</td><td>`+fullBody[prop]+`</td></tr>`);
                    }
                    res.write(`</table> </body> </html>`);
                    res.end();
                });
            }else{
                console.log("[405]"+req.method+"to"+req.url); 
                res.writeHead(405,'Method not support',{"Content-Type":'text/html'});
                res.end(`
                <html>
                <head>
                    <title>405-Method not supported</title>
                </head>
                <body>
                    <h1>Method not supported.</h1>
                </body>
                </html>    
                `)
            }
            break;
            default:
                res.writeHead(404,"Not found",{"Content-Type":"text/html"});
                res.end(` 
                <html>
                <head>
                    <title>404-Not found</title>
                </head>
                <body>
                    <h1>Not found.</h1>
                </body>
                </html> 
                `);
                console.log('[404]'+req.method+"to"+req.url);
    }
}).listen(8080)

这段脚本将获取浏览器发来的数据，并汇总成一个简单的HTML文档(表格形式)。它在8080端口监听浏览器的连接请求，并且只处理浏览器用http post方法发送到/form这个URL的表单数据。
我们只要在其目录下启动它就好:

node form.js

然后在打开浏览器本地端口：

http://localhost:8080/

HTML5--常见的新属性（中）
这说明端口正常打开了，可以用于验证表单新属性了。

autocomplete属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。该属性有两个值:on和off。如果不设置这个属性的话，其默认值为on，表示允许浏览器填写表单（具体因浏览器而异，有的浏览器需要手动设置）。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

代码测试：

<form method="post" action="http://localhost:8080/form" autocomplete="on">
  账号：<input type="text" name="account"><br>
  密码：<input type="password" name="password"><br>
  <button>submit</button>
</form>

浏览器最低版本号的支持：

IE	Firefox	Chrome	Safari	Opera
6	2	16	5.1	10.1

效果图
HTML5--常见的新属性（中）

novalidate属性和formnovalidate属性

novalidate 属性规定当提交表单时不对其进行验证。
如果使用该属性，则表单不会验证表单的输入。

适用标签：

novalidate属性是form标签的专属属性。
formnovalidate 属性是form标签的子标签的属性，并且它会覆盖 <form> 标签的 novalidate 属性。
它适用于以下标签：
- <input type="submit">
- <button>

不添加novalidate和formnovalidate属性：

<form method="post" action="http://localhost:8080/form" autocomplete="on">
  Email：<input type="email" name="account"><br>
  <button>submit</button>
</form>

如果是<input type="email">，则会出现相关提示：
HTML5--常见的新属性（中）

添加novalidate属性

<form method="post" action="http://localhost:8080/form" autocomplete="on" novalidate>
  Email：<input type="email" name="account"><br>
  <button>submit</button>
</form>

添加formnovalidate属性

<form method="post" action="http://localhost:8080/form">
  Email：<input type="email" name="account"><br>
  <button formnovalidate>submit</button>
</form>

效果图 :
HTML5--常见的新属性（中）

浏览器的支持情况：

IE	Firefox	Chrome	Safari	Opera
10或以上版本	支持	支持	不支持	支持

注意：
在HTML 与 XHTML 之间该属性存在差异——在 XHTML 中，禁止属性最小化，novalidate 属性必须定义为 <form novalidate="novalidate">。

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

适用标签：

<input>
<button>
<textarea>
<******>

下面这个例子在打开网页后聚焦在Email2上：

<form method="post" action="http://localhost:8080/form">
  Email1：<input type="email" name="account" ><br>
  Email2：<input type="email" name="account" autofocus><br>
  <button>submit</button>
</form>

HTML5--常见的新属性（中）

浏览器的支持情况(input|button元素)：

IE	Firefox	Chrome	Safari	Opera
10	4	5	5	10.1

注意：
在HTML 与 XHTML 之间该属性存在差异——在 XHTML 中，禁止属性最小化，autofocus 属性必须定义为 <form novalidate="novalidate">。

form 属性

规定元素所属的一个或多个表单。
语法：<element form="form_id">

适用标签：
常用：

<label>
<input>
<button>
<select>
<textarea>

不常用：

<object>
<fieldset>
<******>
<meter>
<ouput>

form属性的兼容性：
① <object> 、<meter>、<output>元素，所有浏览器都不兼容。
② <fieldset> 元素，其只有Opera支持。
③ <button>、<******>、<select>、<textarea>、<input>元素只有IE不支持，其他浏览器都有较好的兼容性。
④<label>元素所有浏览器都兼容。
注意：上述所说的所有元素均是放置在form标签之外的。

代码：

<form method="post" action="http://localhost:8080/form" id="_form">
  Email：<input type="email" name="account" fromnovalidate>
</form>
<button form="_form">submit</button>

成功接收到数据：
HTML5--常见的新属性（中）

formaction 属性

规定当表单提交时处理输入控件的文件的 URL。

适用标签：

<input type="submit|image">
<button>

浏览器的支持情况：

IE	Firefox	Chrome	Safari	Opera
10	4	15	5.1	11.5

代码：

<form method="post">
  Email：<input type="email" name="account" ><br>
  <button formaction="http://localhost:8080/form">submit</button>
</form>

注意：
formaction 属性会覆盖 <form> 元素的 action 属性。

formenctype 属性

规定当表单数据提交到服务器时如何编码（仅适用于 method=”post” 的表单）
该属性与enctype属性一样，有三个值：

值	说明
application/x-www-form-urlencoded	默认编码方式。适用于各种类型的表单，但是不能用于上传文件
multipart/form-data	一般用于上传文件到服务器
text/plain	谨慎使用。不同浏览器处理方式不同

适用标签：

<input type="submit|image">
<button>

浏览器的支持情况：

IE	Firefox	Chrome	Safari	Opera
10	4	15	5.1	11.5

代码：

<form method="post" action="http://localhost:8080/form">
  <input type="text" name="提交方式1" value="application/x-www-form-urlencoded" formenctype="application/x-www-form-urlencoded"><br>
  <input type="text" name="提交方式2" value="multipart/form-data" formenctype="multipart/form-data"><br>
  <button>submit</button>
</form>

注意： formenctype 属性会覆盖 <form> 元素的 enctype 属性。

formmethod 属性

规定表单提交的方式。
该属性有两个值：get和post。get属性会直接把将表单数据以名称/值对的形式附加到 URL 中，但是不能超过URL长度限制；post属性会把表单以HTTP post事务的形式发送，在传输上它更加安全且没有长度限制。

适用标签：

<input type="submit|image">
<button>

浏览器的支持情况：

IE	Firefox	Chrome	Safari	Opera
10	4	15	5.1	11.5

代码：

<form method="get" action="http://localhost:8080/form">
  <input type="text" name="method" value="post"><br>
  <button formmethod="post">submit</button>
</form>

注意： formmethod 属性会覆盖 <form> 元素的 method 属性。

formtarget 属性

规定表示提交表单后在哪里显示接收到响应的名称或关键词。默认情况下浏览器会用提交表单后服务器反馈的信息替换表单所在的原页面。
该属性有5个值：

值	说明
_blank	将浏览器反馈信息显示在新窗口（或新标签页）中
_parent	将浏览器反馈信息显示在父窗框组中
_self	将浏览器反馈信息显示在当前窗口中（默认行为）
_top	将浏览器反馈信息显示在顶层窗口中
<frame>	将浏览器反馈信息显示在指定窗框中

适用标签：

<input type="submit|image">
<button>

浏览器的支持情况：

IE	Firefox	Chrome	Safari	Opera
10	4	15	5.1	11.5

代码：

<form method="post" action="http://localhost:8080/form">
  <input type="text" name="name" value="value"><br>
  <button formtarget="_blank">submit</button>
</form>

注意： formtarget 属性会覆盖 <form> 元素的 target 属性。

height和width属性

规定 <input> 元素的高度和宽度。
适用标签： <input type="image">

浏览器的支持情况：
所有主流浏览器都支持 height 和width属性。

代码：

<form method="post" action="http://localhost:8080/form">
  <input type="text" name="name" value="value"><br>
    <input value="submit"
        type="image"
        height="80px"
        width="80px"
        scr="image/image.jpg">
</form>

注意：如果设置了这些属性，当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。

list属性

指定为文本框提供建议值为datalist元素，其值为datalist元素的id值。
适用标签：<input>

浏览器的支持情况：

IE	Firefox	Chrome	Safari	Opera
10	4	20	NO	10.1

代码：

<form method="post" action="http://localhost:8080/form">
    <input list="browsers" name="browser">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
    <input type="submit">
</form>

效果图：

HTML5--常见的新属性（中）

min、max与step属性

min和max规定的数值的下限和上线。min值不可以大于max值。
step属性规定了元素的合法数字间隔。如果 step=”3”，则合法数字应该是 -3、0、3、6，以此类推。

浏览器的支持情况：

IE	Firefox	Chrome	Safari	Opera
10	NO	支持	支持	支持

注意：min 和max属性将不适用于 IE 10 中的 date 和 time。

代码：

 <form method="post" action="http://localhost:8080/form">
    <input type="number" name="quantity" min="1" max="10" value="4" step="2">
    <input type="submit">
  </form>

效果图
HTML5--常见的新属性（中）

注意：
step属性设置的是合法的数字间隔而非指定跳转数字的大小。从效果图中我们就能看出value="4"向后加是5，而非6。这是因为该元素的合法值为{1,3,5,7,9}的集合，数字只能在其中跳转。

multiple属性

适用标签：

<input type="email|file">
<select>

浏览器的支持情况：

IE	Firefox	Chrome	Safari	Opera
10	3.6	5	4	11.5

input：
可以同时上传多个文件和email

  <form method="post" action="http://localhost:8080/form">
    Email：<input type="email" name="email" multiple><br/>
    file：<input type="file" multiple><br/>
    <button>提交</buttom>
  </form>

提示：在表单提交时，使用逗号将多个邮箱分开，如：
aaa@qq.com, aaa@qq.com, aaa@qq.com 。

select：

<form method="post" action="http://localhost:8080/form">
  <select name="cars" multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
  </select>
  <input type="submit">
</form>

提示：对于 windows：按住 Ctrl 按钮来选择多个选项，对于 Mac：按住 command 按钮来选择多个选项。

注意：在 XHTML 中，禁止属性最小化，multiple 属性必须定义为 <element multiple="multiple">

pattern属性

规定用于验证 <input> 元素的值的正则表达式。

语法：<input pattern="regexp">

浏览器的支持情况：

IE	Firefox	Chrome	Safari	Opera
10	4	10	10.1	10.1

 <form method="post" action="http://localhost:8080/form">
    <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="请输入城市编号（三个字母）">
    <button>提交</button>
  </form>

提示： title 属性可以添加描述以帮助用户。

placeholder属性

规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。该提示会在用户输入值之前显示在输入字段中。

适用标签类型：

<input type="text|search|url|tel|email|password">
<textarea>

浏览器的支持情况：

IE	Firefox	Chrome	Safari	Opera
9	51	47	9	34

简短的提示信息：

 <form method="post" action="http://localhost:8080/form">
    <input type="email" name="email" placeholder="邮箱账号">
    <input type="submit" value="提交">
  </form>

HTML5--常见的新属性（中）

让提示变得更美观：

<style>
  ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
      color:    #900;
      font-size: 0.8em;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
     color:    #900;
     opacity:  1;
     font-size: 0.8em;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
     color:    #900;
     opacity:  1;
     font-size: 0.8em;
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
     color:    rgb(153, 0, 0);
     font-size: 0.8em;
  }
  </style>
 <form method="post" action="http://localhost:8080/form">
    <textarea name="self-introduction" placeholder="请来一段200字的自我介绍"></textarea>
    <input type="submit" value="提交">
  </form>

HTML5--常见的新属性（中）

required属性

必需在提交表单之前填写输入字段。

适用标签：

<input type="text|search|url|tel|email|password|date pickers|number|checkbox|radio|file">
<textarea>
<select>

select的浏览器支持情况：
几乎所有主流浏览器都不支持。

textarea的浏览器支持情况：

IE	Firefox	Chrome	Safari	Opera
NO	支持	支持	NO	支持

input的浏览器支持情况：

IE	Firefox	Chrome	Safari	Opera
10	支持	支持	NO	支持

不填写内容提交：

 <form method="post" action="http://localhost:8080/form">
     Email: <input type="email" name="email" required>
      <input type="submit">
  </form>

出现填写字段的提示：
HTML5--常见的新属性（中）

本文分成三章，前章是HTML5–常见的新属性（前），后一章是HTML5–常见的新属性（后）。
本文到此结束，希望对大家也有所帮助。

相关标签： html5 HTML5新属性表单属性表单新属性表单标签

上一篇： Struts2 表单和非表单标签

下一篇： HTML5表单元素

HTML5--常见的新属性（中）

表单相关属性

新增属性主要包括以下几种：

演示环境配置

autocomplete属性

novalidate属性和formnovalidate属性

autofocus 属性

form 属性

formaction 属性

formenctype 属性

formmethod 属性

formtarget 属性

height和width属性

list属性

min、max与step属性

multiple属性

pattern属性

placeholder属性

required属性

Java8利用stream的distinct()方法对list集合中的对象去重和抽取属性去重

ASP.NET中控件的EnableViewState属性及彻底禁用

详解Swift中属性的声明与作用

VS2015中C#版本6.0的新特性你需要知道

HTML5中的Scoped属性使用实例

HTML5中的autofocus（自动聚焦）属性介绍

PHP字符串函数系列之nl2br()，在字符串中的每个新行 ( ) 之前插入 HTML 换行符br

如何在macbook的照片应用中创建新图库？

举例讲解Objective-C中@property属性的用法

浅谈CSS3中display属性的Flex布局的方法

HTML5--常见的新属性（中）

表单相关属性

新增属性主要包括以下几种：

演示环境配置

autocomplete属性

novalidate属性和formnovalidate属性

autofocus 属性

form 属性

formaction 属性

formenctype 属性

formmethod 属性

formtarget 属性

height和width属性

list属性

min、max与step属性

multiple属性

pattern属性

placeholder属性

required属性

Java8利用stream的distinct()方法对list集合中的对象去重和抽取属性去重

ASP.NET中控件的EnableViewState属性及彻底禁用

详解Swift中属性的声明与作用

VS2015中C#版本6.0的新特性 你需要知道

HTML5中的Scoped属性使用实例

HTML5中的autofocus（自动聚焦）属性介绍

PHP字符串函数系列之nl2br()，在字符串中的每个新行 ( ) 之前插入 HTML 换行符br

如何在macbook的照片应用中创建新图库？

举例讲解Objective-C中@property属性的用法

浅谈CSS3中display属性的Flex布局的方法

VS2015中C#版本6.0的新特性你需要知道