HTML5表单新增功能

最新推荐文章于 2021-06-23 22:34:34 发布
最新推荐文章于 2021-06-23 22:34:34 发布
阅读量632 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fang0609/article/details/47145205
版权


1、input表单的type类型

tel

说明：此类型要求输入一个电话号码,用来验证电话号码之类的文本框，需要与pattern属性结合使用，type的值可以是tel也可以是telephone，还可以是telephone number，三者的用法是一样的

格式：<input type=tel>

email

说明：此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值，否则无效果.

格式：<input type=email name=email>

url

说明：上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.

格式：<input type=url> 

number

说明：输入一个数字字符,若未输入则会抛出一个错误

格式：<input type="number" max=10 min=-10 step=1 value=5>

属性值：max number 规定允许的最大值

        min number 规定允许的最小值

        step number 规定合法的数字间隔（如果 step="2"，则合法的数是 -2，0,2,4 等）

   value number 规定默认值,即在输入框中显示的数字

range

说明：特定值的范围的数值，以滑动条显示

格式：<input type="range" max=10 min=-10 step=1 value=5>

属性值与number类似。

search

说明：此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标。

格式：<input type=search>

color

说明：此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到该控件的value值中

格式：<input type=color>

日期时间

说明：date：选取为年、月、日

 month：选取月和年

 week：选取周和年

 time：选取时间（小时和分钟）

 datetime：选取时间、日、月、年（UTC时间）

 datetime-local：选取时间、日、月、年（本地时间）

注：有些浏览器不支持时间日期类型！！！

格式：<input type=date>

 <input type=time>

 <input type=month>

 <input type=week>

 <input type=datetime>

 <input type=datetime-local>


2、新增表单属性

placeholder

说明：表单输入框中的提示内容，鼠标点击即消失

格式：<input id=placeholder placeholder="点击我可以清除"> 

required/pattern

说明：添加required属性，则输入框中的值不能为空，并会有一个提示，可以用于textarea以及hidden/image/submit类型中；

      pattern为正则验证，可以完成各种复杂的验证。这两种类型在Opera中必须指定name值，否则无效果。

格式：<input id=placeholder name=require required>

      <input id=placeholder name=require1 required="required">

      <input name=require2 pattern="^[1-9]\d{5}$"> 

autofocus

说明：自动聚焦属性,可在页面加载时聚焦到一个表单控件,即可使光标默认显示在此位置

格式：<input autofocus="true">

autocomplete

说明：为表单提供自动完成功能。如果该属性值为"on"可很好地自动完成。一般来说，此属性必须启动浏览器的自动完成功能。

格式：<input autocomplete="on/off">

novalidate 

说明：novalidate 属性规定在提交表单时不验证 form 或 input 域。

格式：<form action="#" method="get" novalidate="true">

multiple 

说明：规定输入域中可选择多个.multiple 属性适用于 <input> 标签中的“email 和 file”。

格式：<input type="file" name="img" multiple="multiple" >

3、源代码

<span style="font-size:18px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form id="myform" action = "#" method = "post" align = "center">
  <p>姓名:<input type = "text" name = "name" required placeholder="请输入真实姓名" autofocus></p>
  <p>电话:<input type = "tel" pattern="\d{11}"></p>
  <p>邮件:<input type = "email"></p>
  <p>网址:<input type = "url"></p>
  <p>数字:<input type="number" max="10" min="-10" step="2" value="2"></p>
  <p>滑块:<input type="range" max=10 min=-10 step=2 value=5></p>
  <p>搜索:<input type=search></p>
  <p>颜色:<input type=color></p>
  <p>date:<input type=date></p>
  <p>time:<input type=time></p>
  <p>month:<input type=month></p>
  <p>week:<input type=week></p>
  <p>datetime:<input type=datetime></p>
  <p>datetime-local:<input type=datetime-local/></p>
  <p>生日:
  <input name = "textYear" type = "number" max="2015" min="1960" step="1" value="1990" style="width:50px"/>年
  <input name = "textMonth" type = "number" max="12" min="1" step="1" value="8" style="width:35px"/>月
  <input name = "textDay" type = "number" max="31" min="1" step="6" value="1" style="width:35px"/>日</p>
  <p>    
  <input name = "submit" type = "submit" class = "button" style = "whidth:300px; height:40px " value = "注册" ></p>
  </form> 
</body>
</html></span>

4、外部引用

在HTML5中可以利用form的id值，在form外部引用，打破了以往的中能form标签中的局限

例如：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><form action = "" method = "" id = "myform"></form>
<input form = "myform" ></span>


「已注销」
关注
专栏目录
HTML 5 对表单新增的功能
程序员小白的博客
01-30 902
HTML 5 对表单新增的功能
HTML5新增的表单元素和属性实例解析
09-28
在表单处理方面，HTML5新增了多个属性和元素，极大地丰富了网页上用户输入数据的方式。以下将详细介绍这些新增的表单元素和属性，以及它们的实例解析。 首先来看placeholder属性，这个属性用在`<input>`元素上，...
HTML 5之表单新功能解析
流年似水
05-23 526
<br /><br />时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵---HTML 5.虽然HTML 5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTML 5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML 5离我们不再遥远.<br />学习HTML 5半年有余了,虽然对
html5表单新功能解析,解析HTML5表单新功能-HTML5
weixin_30937427的博客
06-23 240
本文我们将详细介绍一下HTML 5中对表单功能的更新。希望能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.一、表单结构更自由XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML 5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来.比如:<form id="iform"> <...
HTML5之表单新功能详解
chelen_jak的专栏
05-13 745
转自：http://www.yiiyaa.net/?p=1350 HTML语言作为如今编程最为广泛的语言，具有易用、快捷、多浏览平台兼容等特点，但是随着时代的进步，HTML的标准却停滞不前，这一次还在不断开发中的HTML5标准的更新可以说给这门标记语言带来了新的生命力。       表单是网页中常见的控件(集)。小到网站注册登录，大到一个企业的数据管理系统，都基本上有表单的身影。表单之
HTML5新的表单功能
快速成长的小菜鸟
12-25 542
html> html> head lang="en"> meta charset="UTF-8"> title>title> head> body> form method="get" action=""> color:input type="color" >br> date:input type="date" autofocus="
html5表单及新增的改良元素详解
09-27
本文将详细解析HTML5中新增的表单元素及其改良特性。 1. **form属性**： 在HTML5中，表单内的元素可以通过`form`属性与特定的表单关联，即使这些元素不在表单标签内部。例如，第8行的`<textarea>`通过`form="test...
HTML5实现表单自动验证功能实例代码
12-14
在HTML5 中，在增加了大量的表单元素与属性的同时，也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能，接下来我们来讲一下自动验证。 在Html5中，通过对元素使用属性的方法，可以实现在表单提交...
详解HTML5表单新增属性
09-28
本文将深入解析HTML5表单新增的一些关键属性，帮助读者更好地理解和应用这些功能。 首先，我们来看`form`属性。在HTML5之前，表单元素通常需要放在`<form>`标签内部。然而，HTML5允许我们将表单元素放置在页面的...
HTML5表单新特性
mengxiang_go的博客
04-24 655
}     HTML5之前已有的input type：         text、password、radio、checkbox、file、submit、reset、button、image、hidden   HTML5新增加的input type：   (1)email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口(可定制内容不能定制样式)    
JS基本表单功能
07-22
网页重置，单选，复选
HTML5表单新特性探究
HDM1991的专栏
10-16 436
前言在 HTML5 之前，当页面需要用户在一个表单控件中输入 email 地址、数字或者日期时，我们只能写下如下的代码：<input type="text" name="email"> 然后，如果是我们不在上面代码的基础上添加一些额外功能代码的情况下，我们是无法验证用户是否输入了数据、用户输入的数据是否符合格式、当用户没有输入数据或者输入的数据不符合格式时，对用户做出提示的；而且我们也无法给用户提供
重温---HTML5高级---表单新特性
qq_32054169的博客
09-30 296
1.HTML5表单新特性 (1)新的input type (2)新的表单标签 (3)表单标签的新属性 2.html5表单新特性之---新的input type &lt;input type=""&gt; HTML5之前已有的input type:     text,password,radio,checkbox,file,submit,reset,button,image,hidde...
01 HTML5--新特性之表单
Pony_18的博客
11-24 565
一.HTML5表单新特性   (1)新的input type   (2)新的表单标签   (3)表单标签的新属性  1.新的input type —— 了解，实用性不强   &lt;input type=""&gt;   HTML5之前已有的input type(10个)： text、password、radio、checkbox、file、submit、reset、button、...
表单新增
weixin_54664933的博客
05-18 199
上一篇我们说的是表单的一个查询，现在呢我们就要学表单的新增效果。同理表单新增是肯定需要表单的，所以我们不用再去新建一个项目，直接在上一篇的表单代码后面加上模态框。代码如下： 在类名modal-body标签中写上模态框里我们需要显示的文本内容，首先我们需要文本框以及选项框来进行选择。上图我的代码是收拢的所以看不到。以下是收拢的内容： 是不是感觉很长。其实我们只需要将框架里有的模态框结构复制过来，将它里面一些文本内容更改掉 就行了。里面的内容都是一些文本框的基础样式，不需要做什么太大的改动。 写出它的文本框
HTML5 新表单类型
houyanhua1的专栏
03-20 305
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; form { width: 100%; m
html5新特性总结
05-28 189
html5总的来说比html4多了十个新特性，但其不支持ie8及ie8以下版本的浏览器 一、语义标签 二、增强型表单 三、视频和音频 四、Canvas绘图 五、SVG绘图 六、地理定位 七、拖放API 八、WebWorker 九、WebStorage 十、WebSocket 一、语义标签 html5语义标签，可以使开发者更方便清晰构建页面的布局 ...
url是html5新增元素吗,html5新增特性
weixin_29708043的博客
06-03 261
一、新增特性：绘画 canvas;本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage用于媒介回放的video和 audio元素;语意化更好的内容元素，比如article、footer、header、nav、section;section：定义文档中的一个章节nav：定义只包含...
HTML5新特性：表单属性详解
"本文主要梳理了HTML5中关于表单的常用属性以及新增属性，重点关注新属性的介绍，旨在帮助开发者更好地理解和应用HTML5表单功能。" 在HTML5中，表单元素得到了显著增强，增加了多个新属性，使得表单处理更加灵活和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值