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. Android UI学习前言：Android UI系统的知识结构

    Android UI系统的知识结构如下图所示: 对于 一个GUI系统地使用,首先是由应用程序来控制屏幕上元素的外观和行为,这在各个GUI系统中是不相同的,但是也具有相通性.Android系统在这方面, ...

  2. WPF 多线程处理(2)

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

  3. android studio如何开启与禁用版本控制vcs

    1.开启

  4. Mysql数据库备份和还原常用的命令

    Mysql数据库备份和还原常用的命令是进行Mysql数据库备份和还原的关键,没有命令,什么都无从做起,更谈不上什么备份还原,只有给系统这个命令,让它去执行,才能完成Mysql数据库备份和还原的操作,下 ...

  5. 3DSoftRenderer

    研究了好几天基本的图形学,对于光栅化的大致过程有点了解了,很感谢网上的很多大牛的无私奉献,我就写一下这几天的总结,希望也能对网络上的知识做出一点点点的贡献. 屏幕有什么特点,无非是一排排的像素点,每个 ...

  6. EXTJS 3.0 资料 控件之 FormPanel 插入button用法

    最近发现项目中FormPanel 里面需要 增加 button,的模块比较多,具体代码如下: var eastPanelForm_Dele = new Ext.form.FormPanel({ id: ...

  7. java se doc

    J2SE 5.0 Performance White Paper http://www.oracle.com/technetwork/java/5-136747.html Java Tuning Wh ...

  8. Linux桌面扩展 Docky

    Docky是从GNOME Do项目剥离出来的一个Dock软件,最初即为GNOME Do的“Docky”模式. 后来开发者觉得,GNOME Do是个快速启动工具,弄个Docky模式有点不伦不类,于是,D ...

  9. css3分栏

    <!DOCTYPE HTML> <meta charset="UTF-8"> <title>分栏</title> <style ...

  10. 关​于​h​i​b​e​r​n​a​t​e​中​双​向​外​键​关​联​o​n​e​-​t​o​-​o​n​e​的​p​r​o​p​e​r​t​y​-​r​e​f​=​的​问​题(转)

    大家都知道hibernate中的one-to-one映射主要有两种策略,(1)一对一主键关联(单向和双向).(2)一对一外键映射(单项和双向).本文主要讲解一下,一对一外键映射中的双向问题,在此前先通 ...