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. Linux进程间通信IPC学习笔记之消息队列（SVR4)

    Linux进程间通信IPC学习笔记之消息队列(SVR4)

  2. WPF 多线程处理(2)

    WPF 多线程处理(1) WPF 多线程处理(2) WPF 多线程处理(3) WPF 多线程处理(4) WPF 多线程处理(5) WPF 多线程处理(6) WPF UI 设计需要自动适应窗体大小,那么 ...

  3. Device disconnected

    问题:android 调试的时候,Logcat没有任何输出,提示Device  disconnected 解决:Devices -- Reset adb

  4. PHP+MYSQL 出现乱码的解决方法

    PHP+MYSQL 出现乱码的解决方法 使用PHP+MYSQL时遇到过字符乱问题,解决方法: 在mysql_connect后面加一句SET NAMES UTF8,即可使得UTF8的数据库消除乱码,对于 ...

  5. JSP页面时间动态显示 (转载)

    <script type="text/javascript">       function startTime(){        var today=new Dat ...

  6. HubbleDotNet开源全文搜索组件相关资源

    系统简介 HubbleDotNet 是一个基于.net framework 的开源免费的全文搜索数据库组件.开源协议是 Apache 2.0.HubbleDotNet提供了基于SQL的全文检索接口,使 ...

  7. 硬盘4k对齐教程总结

    4k对齐概念: 4K对齐相关联的是一个叫做“高级格式化”的分区技术.首先先来了解一下什么是叫做“4K 对齐”.其实“4K对齐”相关联的是一个叫做“高级格式化”的分区技术.“高级格式化”是国际硬盘设备与 ...

  8. iOS开发笔记--宏定义的黑魔法 - 宏菜鸟起飞手册

    宏定义在C系开发中可以说占有举足轻重的作用.底层框架自不必说,为了编译优化和方便,以及跨平台能力,宏被大量使用,可以说底层开发离开define将寸步难行.而在更高层级进行开发时,我们会将更多的重心放在 ...

  9. URAL 1353 Milliard Vasya's Function(DP)

    题目链接 题意 : 让你找出1到10^9中和为s的数有多少个. 思路 : 自己没想出来,看的题解,学长的题解报告 题解报告 //URAL 1353 #include <iostream> ...

  10. redis面试

    1. 使用Redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string,li ...