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

最新推荐文章于 2023-07-18 21:59:07 发布
最新推荐文章于 2023-07-18 21:59:07 发布
阅读量894 收藏 3
点赞数
分类专栏： html5 文章标签： html5 HTML5新属性 表单属性 表单新属性 表单标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maomaolaoshi/article/details/78202549
版权

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

表单相关属性

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

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

  1. autocomplete
  2. novalidate和formnovalidate
  3. autofocus
  4. form
  5. formaction
  6. formenctype
  7. formmethod
  8. formnovalidate
  9. formtarget
  10. height 与 width
  11. list
  12. min 、max与step
  13. multiple
  14. pattern (regexp)
  15. placeholder
  16. 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/

这里写图片描述
这说明端口正常打开了，可以用于验证表单新属性了。

autocomplete属性

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

适用标签：
- <input type="text|search|url|telephone|email|password|datepickers|range|color">
- <form>
注意：
对于该属性，form标签作用于整个表单而input标签只作用于当前标签。如果是在form标签中开启了这个属性，那么其内部的input标签是默认开启这个属性的，除非手动关闭——<input type="email" autocomplete="off">。

代码测试：

<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>

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

IEFirefoxChromeSafariOpera
62165.110.1


效果图
这里写图片描述

novalidate属性和formnovalidate属性

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

适用标签：

  1. novalidate属性是form标签的专属属性。
  2. 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">，则会出现相关提示：
这里写图片描述

添加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>

效果图 :
这里写图片描述

浏览器的支持情况：

IEFirefoxChromeSafariOpera
10或以上版本支持支持不支持支持

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

autofocus 属性

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

适用标签：

  • <input>
  • <button>
  • <textarea>
  • <keygen>

下面这个例子在打开网页后聚焦在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>

这里写图片描述

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

IEFirefoxChromeSafariOpera
1045510.1


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

form 属性

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

适用标签：
常用：

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

不常用：

  • <object>
  • <fieldset>
  • <keygen>
  • <meter>
  • <ouput>

form属性的兼容性：
① <object> 、<meter>、<output>元素，所有浏览器都不兼容。
② <fieldset> 元素，其只有Opera支持。
③ <button>、<keygen>、<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>

成功接收到数据：
这里写图片描述

formaction 属性

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

适用标签：

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

浏览器的支持情况：

IEFirefoxChromeSafariOpera
104155.111.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>

浏览器的支持情况：

IEFirefoxChromeSafariOpera
104155.111.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>

浏览器的支持情况：

IEFirefoxChromeSafariOpera
104155.111.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>

浏览器的支持情况：

IEFirefoxChromeSafariOpera
104155.111.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>

浏览器的支持情况：

IEFirefoxChromeSafariOpera
10420NO10.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>

效果图：

这里写图片描述

min、max与step属性

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

适用标签： <input type="number|range|date|datetime|datetime-local|month|time|week">

浏览器的支持情况：

IEFirefoxChromeSafariOpera
10NO支持支持支持

注意：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>

效果图
这里写图片描述

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

multiple属性

适用标签：

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

浏览器的支持情况：

IEFirefoxChromeSafariOpera
103.65411.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>

提示：在表单提交时，使用逗号将多个邮箱分开，如：
mail@example.com, mail2@example.com, mail3@example.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 type="text|search|url|tel|email|password">

语法：<input pattern="regexp">

浏览器的支持情况：

IEFirefoxChromeSafariOpera
1041010.110.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>

浏览器的支持情况：

IEFirefoxChromeSafariOpera
95147934


简短的提示信息：

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

这里写图片描述

让提示变得更美观：

<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>

这里写图片描述

required属性

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

适用标签：

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

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


textarea的浏览器支持情况：

IEFirefoxChromeSafariOpera
NO支持支持NO支持


input的浏览器支持情况：

IEFirefoxChromeSafariOpera
10支持支持NO支持


不填写内容提交：

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

出现填写字段的提示：
这里写图片描述

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

maomaolaoshi
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5中新增的form表单属性
weixin_30448685的博客
01-06 355
html5中新增两个表单属性，分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭。可以设置表单或者input元素，有两个属性值，当设置为on时，启动该功能；当设置off时，关闭该功能。启用该功能后，当用户在自动完成域开始输入时，浏览器就会在该域中显示填写的选项。用户每提交一次，就会增加一个用于选择的选项 ...
form表单提交-忽略表单验证(form表单的novalidate属性)
大雷
07-30 2389
form表单的novalidate属性 novalidate属性: 作用: 在表单提交时不对表单中输入的值进行验证; 语法:　<form novalidate> 特点: 1. HTML5之后的新属性; 2. 使用于<form>表单以及<input>标签的以下类型： text,search,url,telephone,email,password,date pickers,range以及color。 Demo: <!DOCTYP.
novalidate属性取消表单验证
酷小亚
09-29 820
novalidate属性指定在提交表单时取消对表单进行有效的检查。 效果图： 此时，单击“提交”按钮，表单将不对输入的表单数据进行任何验证，即可进行提交操作。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>novalidate属性取消表单验证</title> </head> <body> <form action
HTML5中新增的的novalidate属性（转）
HHYZBC的博客
05-18 645
在HTML5中，form标签新增了一个新属性，叫做novalidate属性，作用是可以取消浏览器对表单数据的验证。 <form method="post" novalidate> <input type="text" value="名字"> </form>
HTML5学习日志 --html5新增属性和语义化标签
缘*妙不可言
11-24 243
学习目标： 1、html5新增属性 2、语义化标签 学习内容： 结构化元素： HTML5新的属性语法： <section> 定义文档中的主体部分的节、段。 当我们描述一件具体的事物的时候，通常鼓励使用article来代替section;当一个容器需要被直接定义样式或听过脚本定义行为时，推荐使用div元素而非section。 <article> 一个特殊的section标签，比section有更明确的语义。定义来自外部的一个独立的、完整的内容块，例如什么论坛的文章，博客的文本。
全面解析HTML5中的标准属性与自定义属性
12-29
正如 HTML5 语法中所阐述的，元素可以包含属性（attributes）给一个元素设置各种属性（properties）。 有些属性被定义为全局的，可以用在任何元素上，而其他的被定义为元素特有的。所有的属性都有一个名称和一个值，...
html5-canvas-mouse-ink
10-19
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。"html5-canvas-mouse-ink"这个项目显然与Canvas有关，特别是涉及到了鼠标交互和动画效果，这通常是...
Bootstrap 中data-[*] 属性的整理
08-27
在 HTML5 中，引入了一个新的属性，即 data-* 属性。该属性允许开发者自由地添加自定义属性来存储数据，这些数据可以被 JavaScript 使用以实现各种交互效果。数据属性的名称必须以 "data-" 开头，并且不得包含任何...
FAQ-accordion-card:常见问题手风琴卡
07-24
我的过程 内置语义 HTML5 标记CSS 自定义属性弹性盒移动优先工作流程 我学到的是我学习了 css 属性，比如 z-index、overflow、visibility、clip-path、JavaScripts 事件 有用的资源开发者 Mozilla 堆栈溢出W3学校 ...
meta标签中的http-equiv属性使用介绍
09-28
5. **Window-target**: 此属性用于控制页面在何处打开，如确保页面在顶级窗口中打开： ```html <meta http-equiv="window-target" content="_top"> ``` 这可以防止页面被框架加载。 6. **Content-Type**: `...
form的novalidate属性取消浏览器自带的校验功能
你，若盛开的专栏
02-17 644
可以通过在form上添加novalidate取消浏览器为输入框自带的校验功能,例如取消邮箱类型的输入框的校验功能 novalidate
HTML5新增特性（新表单元素）
最新发布
sun12345678_的博客
07-18 727
现代的浏览器都支持 HTML5。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特 性。Internet Explorer 9 将支持某些 HTML5 特性。HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。你可以为 HTML 添加新的元素。该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 :<myHero>
HTML5的语法和新属性
qq_38844939的博客
08-22 970
1 HTML5的变化 1.1 HTML5推出的理由 推出的缘由和目标： 目前，web端存在一些问题，比如兼容性问题，同样的页面，在不同的浏览器上显示的效果是不一样的，那么开发人员需要做很多额外的工作去解决这一问题，需要花费大把的事件在这上面，一些特殊的权限没有开放给开发人员，比如，定位权限，拉起照相机拍照权限，动画、绘画。所以H5的推出就是为了解决这一系列的问题。 H5解决了什么问题？
HTML5--常见的新属性（前）
maomaolaoshi的博客
10-04 1750
HTML5新增了一些新的属性（或者为旧的元素赋予了新的意义），这些属性都为我们带来了些什么改变呢？ 新增的属性划分： ①全局属性 ②JavaScript属性 ③表单相关属性 ④iframe标签属性 ⑤链接相关属性 ⑥其他属性全局属性全局属性包括data-* 、hidden、spellcheck、tabindex、contenteditable、contextmenu、d
html5新增属性有哪些,HTML5 新增属性
weixin_28882363的博客
06-03 1114
一、新增与链接相关的属性1.为a与area元素增加media属性。该属性有效的前提是href属性必须存在。media属性定义了目标URL是针对哪种类型的媒介设备进行优化的。2. 为area元素增加hreflang属性与rel属性。这可以使其保持与a和link元素的一致性。3. 为link元素增加sizes属性。该属性可以指定关联图标(icon)的大小，所以通常与icon元素一起使用。4. 为bas...
HTML5新增属性详细讲解
中意你的博客
03-30 2157
新增的input type属性值： 1.email，使用方法：<input type="email"> 输入邮箱格式 2.tel，使用方法：<input type="tel"> 输入手机号码格式 3.urll，使用方法：<input type="url"> 输入url格式 4.numberl，使用方法：<input type="number"> 输入...
html5添加的新属性,html5有新属性吗
weixin_31893057的博客
06-04 105
html5有新属性，例contextmenu、contentEditable、hidden、draggable、“data-*”、placeholder、required、pattern、autofocus、autocomplete等等。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。HTML5新增属性1.1、contextmenucontextmenu的作用是指定右键菜单...
HTML5 基础（4）—— HTML5表单新属性的使用和验证表单
热门推荐
weixin_39141044的博客
06-25 1万+
一、HTML5表单常用属性 这些都是比较常用的 属性名 说明 placeholder 在输入框无内容时显示灰色提示 autocomplete 部分输入框和form都可以设置自动提示 off关闭，on开启（默认是on） autofocus 让input自动获取焦点 required 设置表单元素为必填 pattern 表...
自动匹配错误html head title,HTML5中自定义错误提示问题
weixin_35323111的博客
06-03 233
满意答案elepone2013.09.23采纳率：55%等级：10已帮助：69人代码里面有多处错误修改后就可以运行了，代码如下自定错误信息示例function check(){var pass1=document.getElementById("pass1");var pass2=document.getElementById("pass2");if(pass1.value!=pass2....
HTML5基础知识-HTML5表格与列表.pptx
05-06
在HTML5基础知识-HTML5表格与列表.pptx中，介绍了HTML5中表格与列表的基础知识。在HTML中，表格是一种常见的数据展示方式，而列表则是一种常见的排列方式。在PPT中列举了一些基本的HTML代码，包括表格的结构和属性，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值