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. You have new mail in /var/spool/mail/root 烦不烦你？

    http://blog.csdn.net/yx_l128125/article/details/7425182

  2. Unity3d + UGUI 的多分辨率适配

    原文地址:http://blog.csdn.net/dingkun520wy/article/details/49471789 1.Canvas的属性配置 2.Canvas Scaler的属性配置 3 ...

  3. 关于搭建Android环境的时候遇到 'could not find adb.exe!'的问题

    关于'could not find adb.exe'的问题 问题原因: 文件所处位置和Android_home变量指路径不一致 文件路径: 解决方法: 直接将相关文件退拽至变量值的路径下即可 小结:a ...

  4. Qt库的静态编译

    一.准备软件1. MinGW     (C:\Qt\MinGW)http://pan.baidu.com/share/link?shareid=174269&uk=673227135这个文件解 ...

  5. xcode 6.3 打包crash问题--参考

    xcode升级6.3之后,有些项目会出现打包crash的问题,只要选择偏好设置,把source control全部禁用掉就可以了.

  6. dtGrid插件集成到Angular环境实现表格化数据展现

    00没有抱怨的世界 周末效率好低,两天没更了,看看这看看那,装了个win10发现触摸板驱动不适配,然后找了好久都不行,23333. AngularJS用的时间很短,高级的用法有点吃不消了,$diges ...

  7. Machine Learning for Developers

    Machine Learning for Developers Most developers these days have heard of machine learning, but when ...

  8. [BEC][hujiang] Lesson03 Unit1:Working life ---Grammar & Listening & Vocabulary

    3 Working life p8 Grammar Gerund and infinitive(动名词和不定式) 一般而言:        1 动词后面接动名词还是不定式没有特定规则,主要取决于语言习 ...

  9. YUV格式详解

    What is YUV YUV,是一种颜色编码方法. YUV是编译true-color颜色空间(color space)的种类,Y'UV, YUV, YCbCr,YPbPr等专有名词都可以称为YUV, ...

  10. Scala学习——基础篇

    [<快学Scala>笔记] 一.基础 1.变量val 标志符: 声明常量: 如,val answer = 1var 标志符:声明变量: 类型推断:变量的类型由scala根据初始化变量的表达 ...