html5 表单的新增元素

<form action="">    <!--专业：    <select name="" id="">        <option value="1">前端与移动开发</option>        <option value="2">java</option>        <option value="3">javascript</option>        <option value="4">c++</option>    </select>-->    <!--不仅可以选择，还应该可以输入-->    <!--建立输入框与datalist的关联  list="datalist的id号"-->    专业：<input type="text" list="subjects"> <br>     <!--=============== list==》 id =================-->    <!--通过datalist创建选择列表-->    <datalist id="subjects">    <!--=============== id =================-->        <!--创建选项值：value:具体的值 label:提示信息，辅助值-->        <!--option可以是单标签也可以是双标签-->        <option value="英语" label="不会"/>        <option value="前端与移动开发" label="前景非常好"></option>        <option value="java" label="使用人数多"></option>        <option value="javascript" label="做特效"></option>        <option value="c" label="不知道"></option>    </datalist>

网址：<input type="url" list="urls">    <datalist id="urls">        <!--如果input输入框的type类型是url,那么value值必须添加http://-->        <option value="http://www.baidu.com" label="百度"></option>        <option value="http://www.sohu.com" label="搜狐"></option>        <option value="http://www.163.com" label="163"></option>    </datalist></form>

<form action="">    用户名：<input type="text" name="userName"><br>    密码：<input type="password" name="userPwd"> <br>    加密：<keygen></keygen><br>    <input type="submit"></form>

<!--显示输出信息：只能显示不能修改1.语义性更强2.值需要你去设置，不能自动计算--><output>总金额：￥100.00</output>

原文地址：https://www.cnblogs.com/lujieting/p/10116663.html

时间： 2024-10-14 19:02:37

html5 表单的新增元素的相关文章

html5表单及新增的改良元素

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>  <form id="testform"> <input type="subm

html5 表单的新增type属性

<form action=""> 用户名:<input type="text" name="userName"> <br> 密码:<input type="password" name="userPwd"> <br> <!--email提供了默认的电子邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满足验证,则会阻止当前的

------------------siwuxie095 HTML5 表单新增元素与属性 1.form 属性在 HTML4 中,表单内的从属元素必须书写在表单内部,而在 HTML5 中,可以把它们书写在页面上任何地方,然后为该元素指定一个 form 属性,属性值为该表单的 id,这样就可以声明该元素从属于指定表单了 2.formaction 属性在 HTML4 中,一个表单内的所有元素只能通过表单的 action 属性被统一提交到另一个页面,而在 HTML5 中,可以为所有的提交按钮

HTML5表单、一些新增的输入类型以及为不支持新特性的浏览器提供解决方案

我们先来看一下这么样一个表单: 一.一步一步来分析下代码: 1 <form id="redemption" method="post"> 2 <hgroup> 3 <h1>Oscar Redemption</h1> 4 <h2>Here's your chance to set the record straight: tell us what 5 year the wrong film got nomin

HTML5表单及其验证

随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架,先说下表单的几个基本知识点: 表单仍是以<form>元素作为容器,我们可在其中设置基本的提交特性: 当用户提交页面时,表单仍然向服务器发送表单控件的值: 之前老版本中的表单控件,如text radio checkbox等等,都可以按

jQuery html5Validate基于HTML5表单验证插件

一.前言前3篇文章实际都是为本文做铺垫的,如果以下棋表示,前三篇是普通走棋,本篇是将军! 目前市面上有不少表单验证插件,看似强大,实在糟糕! 总结下,有以下一些问题: 过多干预包括:改变了表单元素UI, 为表单元素绑定过多事件等布局等限制包括:需要特定结构的布局,需要特定的类名或者ID 学习成本包括:N多元作者自定义的属性,或者自定义的特定的数据结构可用性当JS出现错误的时候而无法正常运作的时候,验证就是聋子的耳朵——摆设,即使在现代浏览器下也是如此. 面向未来的表单验证验证驱动验证信

实现跨浏览器html5表单验证

div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: right; clear: right; } .clearfix:after{ content: ""; display:block; clear: both; } .figcaption{ clear: both; color: #999; padding-top: 10px; text

HTML5表单新特征简介与举例

一.前言一撇其实关于HTML5的表单特征早在去年你必须知道的28个HTML5特征.窍门和技术一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦,关键是TouTuBe视频,需要越狱观看.得,像我这样安分守已的良民,除了看空姐,其他情况都是懒得fan墙的,所以这部分视频展示的内容,其实就是个空. 所以,这里打个补丁,把这部分内容完善下.本文的大致内容有: # input type=number / # input type=range / # i

Html5之高级-3 HTML5表单验证(验证属性、验证状态)

一.验证属性 Required 属性 - Required 属性主要防止域为空时提交表单.该属性不需要设置任何值 - 语法: Pattern 属性 - Pattern 属性的作用是实现元素的验证.它支持使用正则表达式定制验证规则 - 语法: Min 和 Max 属性 - min.max和step属性用于为包含数字或日期的input类型规定限定(约束) - 语法: Minlength 和 Maxlength 属性 - Minlength 和 Maxlength 属性的作用是定制元素允许的最小字符数