↗☻【HTML5秘籍 #BOOK#】第4章 Web表单

时间：2022-03-14 23:23:44

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. &OpenCurlyDoubleQuote;此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型，或该类型未注册为安全类型。”

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

  8. 跟服务器交互的Web表单&lpar;form&rpar;

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

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

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

随机推荐

  1. 妙味课堂——HTML&plus;CSS&lpar;第四课&rpar;&lpar;二&rpar;

    单开一篇来讲一个大点的话题——清浮动    来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...

  2. HDU 5805 NanoApe Loves Sequence （模拟）

    NanoApe Loves Sequence 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5805 Description NanoApe, the ...

  3. css文件和js文件后面带一个问号

    经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...

  4. JAVA 语 言 如 何 进 行 异 常 处 理 &comma; 关 键 字 &colon; throws&comma;throw&comma;try&comma;catch&comma;final

    throws是获取异常throw是抛出异常try是将会发生异常的语句括起来,从而进行异常的处理,catch是如果有异常就会执行他里面的语句,而finally不论是否有异常都会进行执行的语句.

  5. Hibernate4&plus;EhCache配置二级缓存

    本文主要讲一讲Hibernate+EhCache配置二级缓存的基本使用方法 (有关EhCache的基础介绍可参见:http://sjsky.iteye.com/blog/1288257 ) Cache ...

  6. Lua基础之MetaTable（6）

    Lua基础之MetaTable(6) 转载地址:http://nova-fusion.com/2011/06/30/lua-metatables-tutorial/ 关于MetaTable的补充:ht ...

  7. Oracle数据库导入导出 imp&sol;exp备份还原

    Oracle数据导入导出imp/exp   Oracle数据导入导出imp/exp 在cmd的dos命令提示符下执行,而不是在sqlplus里面,但是格式一定要类似于:   imp/exp 用户名/密 ...

  8. ASP&period;NET Core2&period;0 环境下MVC模式的支付宝PC网站支付接口-沙箱环境开发测试

    1.新建.NET Core web项目 2.Controllers-Models-Views 分三个大部分 3.下载安装最新sdk 官方的SDK以及Demo都还是.NET Framework的,根据官 ...

  9. 【转】Paxos算法1-算法形成理论

    ——转自:{老码农的专栏} Paxos算法的难理解与算法的知名度一样令人敬仰,从我个人的经历而言,难理解的原因并不是该算法高深到大家智商不够,而在于Lamport在表达该算法时过于晦涩且缺乏一个完整的 ...

  10. Java 容器 LinkedHashMap源码分析2

    一.类签名 LinkedHashMap<K,V>继承自HashMap<K,V>,可知存入的节点key永远是唯一的.可以通过Android的LruCache了解LinkedHas ...

相关文章