from元素用于组织所有表单部件，负责告诉浏览器把数据提交到哪里，方法是在action属性中提供一个URL。假如你只想在客户端使用JavaScript操作表单，那么只要在action属性中指定一个#即可

<input type=submit>
<input type=image>
<input type=reset>
<input type=button>
显示标准的可以单击的按钮，其中类型为submit的提交按钮用于收集表单数据，并将它们发送给指定目标；类型为image的图像按钮与提交按钮作用相同，但可以显示成一幅可以单击的图像而非按钮；类型为reset的重置按钮，用于清除用户的选择和已经输入的文本信息；而类型为button的按钮本身没有任何功能，但可以通过JavaScript给它赋予功能

客户端验证
服务器端验证
无论浏览器做不做验证，服务器端验证都是必不可少的。这是预防别有用心的人故意篡改数据的唯一途径
客户端验证是为访客提供方便，而服务器端验证才是确保数据正确性的

如果浏览器遇到了不认识的input元素类型，它就将其作为一个普通的文本框来处理

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

        input:focus {

            background-color: #eaeaea;

        }

        ::-webkit-input-placeholder { color:#f00; }

        ::-moz-placeholder { color:#f00; } /* firefox 19+ */

        :-ms-input-placeholder { color:#f00; } /* ie */

        input:-moz-placeholder { color:#f00; }

    </style>

    <script>

        function validateComments(input) {

            if (input.value.length < 20) {

                input.setCustomValidity('You need to comment in more detail.');

            } else {

                input.setCustomValidity('');

            }

        }

    </script>

</head>

<body>

    <form action="#">

        <fieldset>

            <legend>Contact Details</legend>

            <label for="name">Name <em>*</em></label>

            <input id="name" type="text" placeholder="ABC-123" pattern="[A-Z]{3}-[0-9]{3}" autofocus required>

        </fieldset>

        <fieldset>

            <legend>Personal Information</legend>

            <input type="email">

        </fieldset>

        <fieldset>

            <legend>Pick Your Favorite Animals</legend>

            <textarea oninput="validateComments(this)"></textarea>

            <input type="number" min="2" max="10" step="0.1" value="3">

            <input type="range" min="2" max="10" value="3">

        </fieldset>

        <p><input type="submit" value="Submit Application"></p>

    </form>

    <progress value="50" max="200"></progress>

    <progress></progress>

    <meter min="5" max="70" value="28" low="30"></meter>

    <div contentEditable>You can edit this text, if you'd like.</div>

</body>

</html>

↗☻【HTML5秘籍 #BOOK#】第4章 Web表单的更多相关文章

  1. 第四章 Web表单

    4.1 跨站请求伪造保护 安装flask-wtf app = Flask(__name__) app.config['SECRET_KEY'] = 'hard to guess string' 密钥不 ...

  2. 读书笔记：《HTML5开发手册》Web表单

    这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...

  3. 第三章：Web表单

    感谢作者 –> 原文链接 本文翻译自 The Flask Mega-Tutorial Part III: Web Forms 这是Flask Mega-Tutorial系列的第三部分,我将告诉你 ...

  4. Flask 教程 第三章：Web表单

    本文翻译自 The Flask Mega-Tutorial Part III: Web Forms 这是Flask Mega-Tutorial系列的第三部分,我将告诉你如何使用Web表单. 在第二章中 ...

  5. 使用Visual Studio 2013 从头构建Web表单

    在这篇文章中,我将采取VS 2013中特定的模板,也就是没有身份验证的Web表单模板,并说明如何构建这个项目从头开始.在本教程的最后,你会最终有一个模板,内容几乎是一样的使用Web表单模板没有认证(文 ...

  6. Flask教程 —— Web表单（上）

    第二章中介绍的request对象公开了所有客户端发送的请求信息.特别是request.form可以访问POST请求提交的表单数据. 尽管Flask的request对象提供的支持足以处理web表单,但依 ...

  7. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型，或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  8. 跟服务器交互的Web表单(form)

    使用HTML来构建可以跟服务器交互的Web表单(form),通过给你的form元素添加一个action属性来达到此目的. action属性的值指定了表单提交到服务器的地址. 例如: <form ...

  9. 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

    基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...

随机推荐

  1. 64位Python安装PIL

    写个小程序需要安装PIL,但是官网只有32位,无法找到64位安装路径.根据网上教程自行编译,但是由于VS版本问题总是提示“Python error: Unable to find vcvarsall. ...

  2. Ubuntu安装google Gtest

    (1) 下载源码:http://code.google.com/p/googletest/gtest-1.7.0 (2013)gtest-1.7.0 (2010) (2) README编译指南126 ...

  3. table 中实现 控制 指定列的 左对齐 右对齐方式

    .listTable{ border-collapse:collapse; border-top:1px solid #8c9594; border-right:1px solid #8c9594; ...

  4. 同时安装vs2010和VS2012后IEnumerable<ModelClientValidationRule>编译错误

    错误 类型“System.Web.Mvc.ModelClientValidationRule”同时存在于“c:\Program Files (x86)\Microsoft ASP.NET\ASP.NE ...

  5. Windows2003/2008/2008 R2下易语言点支持库配置就退出的问题

    问题: 请问一个问题,我的电脑上win2003系统的,安装了易语言后,一点支持库配置就会自动退出.这是为什么啊? 解决方法如下: 删除 lib下的wmp.npk,重新打开易语言就可以了.

  6. PAT-乙级-1023. 组个最小数 (20)

    1023. 组个最小数 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CAO, Peng 给定数字0-9各若干个.你可以以 ...

  7. 谈 DevOps 自动化时，也应该考虑到 SOX 等法案

    [编者按]作者 Aaron Volkmann 是 CERT Division 高级研究员,在本文中,他对 DevOps 自动化违反 SOX 法案进行了阐述.同时,也简单的提出了如何通过 CI 来避免这 ...

  8. struts2 request内幕 为什么在struts2用EL表达式可以取值

    不知道大家有没有想过这样一个问题:为什么在action中的实例变量,没有使用request.setAttribute()方法将值添加到request范围内,却能在jsp中用EL表达式取出? 众所周知, ...

  9. Eclipse插件—Easy Explorer

    如何使用Eclipse插件—Easy Explorer Easy Explorer是一个Eclipse插件,主要用于快速浏览项目文件的目录,实用性比较强. 使用方法如下:  1.下载Easy Expl ...

  10. http://nxlhero.blog.51cto.com/962631/1666250?plg_nld=1&plg_uin=1&plg_auth=1&plg_nld=1&plg_usr=1&plg_vkey=1&plg_dev=1

    http://nxlhero.blog.51cto.com/962631/1666250?plg_nld=1&plg_uin=1&plg_auth=1&plg_nld=1&am ...