html5中的function,HTML5--常见的新属性（中）

最新推荐文章于 2023-11-02 09:32:51 发布

大霞请留步

最新推荐文章于 2023-11-02 09:32:51 发布

阅读量672

点赞数

文章标签： html5中的function

上一篇文章：HTML5–常见的新属性(前)

表单相关属性

这里涉及到的标签，包括form标签、input标签、button标签、textarea标签、select标签、keygen标签、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(`

Post datatitle>

head>

th{background-color:grey;color:while;min-width:10em}

td{backgroun-color:lightgrey}

caption{font-weight:bold}style>

Form datacaption>

Nameth>Valueth>tr>

`);

fullBody=querystring.parse(fullBody);

for(var prop in fullBody){

res.write(`

`+prop+`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(`

405-Method not supportedtitle>

head>

Method not supported.h1>

body>

html>

}

break;

default:

res.writeHead(404,"Not found",{"Content-Type":"text/html"});

res.end(`

404-Not foundtitle>

head>

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/

这说明端口正常打开了，可以用于验证表单新属性了。

autocomplete属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。该属性有两个值:on和off。如果不设置这个属性的话，其默认值为on，表示允许浏览器填写表单(具体因浏览器而异，有的浏览器需要手动设置)。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

适用标签：

注意：

对于该属性，form标签作用于整个表单而input标签只作用于当前标签。如果是在form标签中开启了这个属性，那么其内部的input标签是默认开启这个属性的，除非手动关闭——。

代码测试：

账号：

密码：

submitbutton>

form>

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

Firefox

Chrome

Safari

Opera

5.1

10.1

效果图

novalidate属性和formnovalidate属性

novalidate 属性规定当提交表单时不对其进行验证。

如果使用该属性，则表单不会验证表单的输入。

适用标签：

novalidate属性是form标签的专属属性。

formnovalidate 属性是form标签的子标签的属性，并且它会覆盖标签的 novalidate 属性。

它适用于以下标签：

不添加novalidate和formnovalidate属性：

Email：

submitbutton>

form>

如果是，则会出现相关提示：

添加novalidate属性

Email：

submitbutton>

form>

添加formnovalidate属性

Email：

submitbutton>

form>

效果图 :

浏览器的支持情况：

Firefox

Chrome

Safari

Opera

10或以上版本

支持

不支持

支持

注意：

在HTML 与 XHTML 之间该属性存在差异——在 XHTML 中，禁止属性最小化，novalidate 属性必须定义为。

autofocus 属性

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

适用标签：

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

Email1：

Email2：

submitbutton>

form>

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

Firefox

Chrome

Safari

Opera

10.1

注意：

在HTML 与 XHTML 之间该属性存在差异——在 XHTML 中，禁止属性最小化，autofocus 属性必须定义为。

form 属性

规定元素所属的一个或多个表单。

语法：

适用标签：

常用：

不常用：

form属性的兼容性：

① 、、元素，所有浏览器都不兼容。

② 元素，其只有Opera支持。

③ 、、、、元素只有IE不支持，其他浏览器都有较好的兼容性。

④元素所有浏览器都兼容。

注意：上述所说的所有元素均是放置在form标签之外的。

代码：

Email：

form>

submitbutton>

成功接收到数据：

formaction 属性

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

适用标签：

浏览器的支持情况：

Firefox

Chrome

Safari

Opera

5.1

11.5

代码：

Email：

submitbutton>

form>

注意：

formaction 属性会覆盖元素的 action 属性。

formenctype 属性

规定当表单数据提交到服务器时如何编码(仅适用于 method=”post” 的表单)

该属性与enctype属性一样，有三个值：

值

说明

application/x-www-form-urlencoded

默认编码方式。适用于各种类型的表单，但是不能用于上传文件

multipart/form-data

一般用于上传文件到服务器

text/plain

谨慎使用。不同浏览器处理方式不同

适用标签：

浏览器的支持情况：

Firefox

Chrome

Safari

Opera

5.1

11.5

代码：

submitbutton>

form>

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

formmethod 属性

规定表单提交的方式。

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

适用标签：

浏览器的支持情况：

Firefox

Chrome

Safari

Opera

5.1

11.5

代码：

submitbutton>

form>

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

formtarget 属性

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

该属性有5个值：

值

说明

_blank

将浏览器反馈信息显示在新窗口(或新标签页)中

_parent

将浏览器反馈信息显示在父窗框组中

_self

将浏览器反馈信息显示在当前窗口中(默认行为)

_top

将浏览器反馈信息显示在顶层窗口中

将浏览器反馈信息显示在指定窗框中

适用标签：

浏览器的支持情况：

Firefox

Chrome

Safari

Opera

5.1

11.5

代码：

submitbutton>

form>

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

height和width属性

规定元素的高度和宽度。

适用标签：

浏览器的支持情况：

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

代码：

method="post" action="http://localhost:8080/form">

type="text" name="name" value="value">

value="submit"

type="image"

height="80px"

width="80px"

scr="image/image.jpg">

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

list属性

指定为文本框提供建议值为datalist元素，其值为datalist元素的id值。

适用标签：

浏览器的支持情况：

Firefox

Chrome

Safari

Opera

10.1

代码：

method="post" action="http://localhost:8080/form">

list="browsers" name="browser">

"browsers">

type="submit">

效果图：

min、max与step属性

min和max规定的数值的下限和上线。min值不可以大于max值。

step属性规定了元素的合法数字间隔。如果 step=”3”，则合法数字应该是 -3、0、3、6，以此类推。

适用标签：

浏览器的支持情况：

Firefox

Chrome

Safari

Opera

支持

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

代码：

method="post" action="http://localhost:8080/form">

type="number" name="quantity" min="1" max="10" value="4" step="2">

type="submit">

效果图

注意：

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

multiple属性

适用标签：

浏览器的支持情况：

Firefox

Chrome

Safari

Opera

3.6

11.5

input：

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

Email：

file：

提交buttom>

form>

提示：在表单提交时，使用逗号将多个邮箱分开，如：

mail@example.com, mail2@example.com, mail3@example.com 。

select：

method="post" action="http://localhost:8080/form">

"cars" multiple>

Volvooption>

Saaboption>

Opeloption>

Audioption>

type="submit">

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

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

pattern属性

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

适用标签类型：

语法：

浏览器的支持情况：

Firefox

Chrome

Safari

Opera

10.1

提交button>

form>

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

placeholder属性

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

适用标签类型：

浏览器的支持情况：

Firefox

Chrome

Safari

Opera

简短的提示信息：

method="post" action="http://localhost:8080/form">

type="email" name="email" placeholder="邮箱账号">

type="submit" value="提交">

让提示变得更美观：

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>

textarea>

form>

required属性

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

适用标签：

select的浏览器支持情况：

几乎所有主流浏览器都不支持。

textarea的浏览器支持情况：

Firefox

Chrome

Safari

Opera

支持

input的浏览器支持情况：

Firefox

Chrome

Safari

Opera

支持

不填写内容提交：

method="post" action="http://localhost:8080/form">

Email: type="email" name="email" required>

type="submit">

出现填写字段的提示：

本文分成三章，前章是HTML5–常见的新属性(前)，后一章是HTML5–常见的新属性(后)。

本文到此结束，希望对大家也有所帮助。

大霞请留步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5中的function,HTML5--常见的新属性（中）

上一篇文章：HTML5–常见的新属性(前)表单相关属性这里涉及到的标签，包括form标签、input标签、button标签、textarea标签、select标签、keygen标签、label标签等等。新增属性主要包括以下几种：autocompletenovalidate和formnovalidateautofocusformformactionformenctypeformmethodformn...
复制链接

扫一扫