html5 表单 自带验证


required="required" 必填
 placeholder="xxx-xxxx-xxxx" // 提示
pattern="\d{3}-\d{4}-\d{4} //正则匹配
 autofocus    // 指针
 <fieldset>
            <legend>Expectations:</legend> // 提示:<legend> 标签为 <fieldset> 元素定义标题。

 </fieldset>  //
 
<form name="register1" id="register1" method="post" action="/" >
          <p><label for="runnername">RunnerName:</label>
             <input id="runnername" name="runnername" type="text" placeholder="First and last name" required="required" autofocus/>
          </p>
          <p><label for="phone">Tel #:</label>
             <input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"
                  required="required"  placeholder="xxx-xxxx-xxxx"/></p>
          <p><label for="emailaddress">E-mail:</label>
             <input id="emailaddress" name="emailaddress" type="email"
                   required="required" placeholder="For confirmation only"/></p>
          <p><label for="dob">DOB:</label>
                         <input id="dob" name="dob" type="date"
        placeholder="MM/DD/YYYY"/></p>
          <p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>
          <p><label for="style">Shirt style:</label>
               <input id="style" name="style" type="text" list="stylelist" title="Years of participation"
                autocomplete="off"/></p>
            <datalist id="stylelist">
             <option value="White" label="1st Year"/>
             <option value="Gray" label="2nd - 4th Year"/>
             <option value="Navy" label="Veteran (5+ Years)"/>
            </datalist>

         <fieldset>
            <legend>Expectations:</legend>
            <p>
            <label for="confidence">Confidence:</label>
            <input id="confidence" name="level" type="range"
                   onchange="setConfidence(this.value)"
                   min="0" max="100" step="5" value="0"/>
            <span id="confidenceDisplay">0%</span></p>
            <p><label for="notes">Notes:</label>
               <textarea id="notes" name="notes" maxLength="100"></textarea></p>
         </fieldset>

         <p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>
        </form>


  

<form name="register1" id="register1">          <p><label for="runnername">RunnerName:</label>             <input id="runnername" name="runnername" type="text" placeholder="First and last name" required="required" autofocus/>          </p>          <p><label for="phone">Tel #:</label>             <input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"                  required="required"  placeholder="xxx-xxxx-xxxx"/></p>          <p><label for="emailaddress">E-mail:</label>             <input id="emailaddress" name="emailaddress" type="email"                    required="required" placeholder="For confirmation only"/></p>          <p><label for="dob">DOB:</label>                         <input id="dob" name="dob" type="date"        placeholder="MM/DD/YYYY"/></p>          <p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>          <p><label for="style">Shirt style:</label>               <input id="style" name="style" type="text" list="stylelist" title="Years of participation"                 autocomplete="off"/></p>            <datalist id="stylelist">             <option value="White" label="1st Year"/>             <option value="Gray" label="2nd - 4th Year"/>             <option value="Navy" label="Veteran (5+ Years)"/>            </datalist>                    <fieldset>            <legend>Expectations:</legend>            <p>            <label for="confidence">Confidence:</label>            <input id="confidence" name="level" type="range"                   onchange="setConfidence(this.value)"                   min="0" max="100" step="5" value="0"/>            <span id="confidenceDisplay">0%</span></p>            <p><label for="notes">Notes:</label>               <textarea id="notes" name="notes" maxLength="100"></textarea></p>         </fieldset>          <p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>        </form>

时间: 2024-11-05 18:37:02

html5 表单 自带验证的相关文章

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表单及其验证

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

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

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

HTML5表单信息验证工作原理

任何Web开发者都能向我们保证,在窗体上提交输入的验证需要花费大量的时间来构建Web表单.当涉及到填写Web表单上的信息时,即使是最熟悉Web的用户也可以并且都会犯错.当用户点击页面上的提交按钮时,可能会导致不完整或不准确的数据被提交上去. 为了避免输入出错,开发者需要在加工信息前先进行验证.验证是在接受输入信息时最好的做法.把数据截止在门外越早越好. 验证在用户提交表单时,通过一个服务器端执行来完成的.在这种类型的验证里,用户提供的数据先被提交给服务器,服务器处理之后如果判定输入数据不正确或不

不支持html5表单验证新特性的解决方案

下载 Alexander Farkas编写的“Webshims Lib”(http://afarkas.github.com/webshim/demos/)它可用于插入表单补丁(也可以为其他 HTML5特性打补丁),从而使不支持新特性的浏览器可以处理 HTML5 表单. 使用方法: a.下载 Webshims Lib(http://github.com/aFarkas/webshim/downloads)并解压: b.将其中的 js-webshim 文件夹复制到相应的位置: <script sr

HTML5表单新特征简介与举例

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

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

UI标签库专题三 JEECG智能开发平台 FormValidation 表单提交及验证标签

1. FormValidation(表单提交及验证标签) 1.1.  参数 属性名 类型 描述 是否必须 默认值 action string 表单提交路径 否 null formid string 表单唯一标示 是 formobj refresh boolean dialog为true时是否刷新父页面 否 true callback string 表单提交完成后的回调函数 否 null beforeSubmit string 表单提交前的处理函数 否 null btnsub string 触发表