关于form标签,你该知道
有没有发现,自己在写模板的时候很少使用form元素,一来form和table总是那么傻傻分不清楚;二来form的特性理解不清楚,有了input、label来了直接就上,根本不用form(不知道有没有人和我一样)。因此,不得不再来针对form这个元素开个小灶。
追根溯源:
<form> 标签用于为用户输入创建 HTML 表单。表单能够包含input元素(元素由一个开始的标签和结束的标签组成,用来包含某些内容),比如文本字段、复选框、单选框、提交按钮等等,还可以包含textarea、fieldset、legend、label标签(如:<br/>本身既是开始标签也是结束标签,但不包含任何内容,所以这只是个标签)。主要用于向服务器传输数据。它是一个块元素。
条分缕析:
其实form本身还是很高大上的,首先,它是和服务器打交道的,其次,它统帅了旗下的所有表单标签。一般在页面中总会遇到一些个人信息的填写,这儿就是form的用武之地,它有两个重要属性:action(服务器的地址)、method(提交数据的方式)。当你填写完数据后点击提交,form就会携带者这些数据信息找服务器去了。
但是对于input这些表单标签来说,要不要form这个父元素都不是必须的,因为现在有了js,我们提交数据可以用脚本来完成,尤其是现在有了ajax这个异步交互的方式,因此,这样就造成了开篇说的对form陌生的结果。况且,有时候这个input标签不是为了提交数据使用的,它可能仅仅就是单纯的以信息输入的工具来使用。因此,不要在意识里产生form和input等是相互依赖的关系这样的想法。
具体在使用的时候该如何权衡,是用传统的submit方式提交,还是用js进行事件监听,它们之间有什么区别和优劣,数据提交的时候分别都发生了什么,用哪个更可靠,这。。。还需小生另番研究,下回分解。
关于form标签,你该知道的更多相关文章
- s:form标签
2017-01-07 17:43:18 基本的用法 <!-- Action类必须有一个无参的构造器,因为在执行action方法之前,拦截器已经创建了一个"空"的Action对 ...
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- springmvc的form标签
1.要使用Spring MVC提供的表单标签,首先需要在视图页面添加: <%@ taglib prefix="form" uri="http://www.sprin ...
- 上传图片HTML <form> 标签的 method 属性
<!DOCTYPE HTML><html><body> <form action="/example/html5/demo_form.asp&quo ...
- 解决HtmlAgilityPack无法获取form标签子节点的问题
问题描述 今天使用HtmlAgilityPack提取Form表单下的input节点,发现提取的form节点没有子节点,InnerHtml也是为空,起初以为是标签不全导致,后来分析html代码发现不可能 ...
- SPRING IN ACTION 第4版笔记-第六章RENDERING WEB VIEWS-002- Spring的JSP标签之form标签(<sf:input><sf:errors><sf:form>)
一. Spring offers two JSP tag libraries to help define the view of your Spring MVC web views. One tag ...
- HTML <form> 标签的 enctype 属性
HTML <form> 标签 定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 默认地,表单数据会编码为 "application/x-www- ...
- Form标签+Css基础
一.Form表单标签 <form action="" method=""></form> 表单就是用来将用户的信息提交到服务器 ...
- HTML <form> 标签的 method 属性(20161028)
HTML <form> 标签的 method 属性 HTML <form> 标签 实例 在下面的例子中,表单数据将通过 method 属性附加到 URL 上: <form ...
随机推荐
- C#基础知识系列十(集合)
前言 本节主要是来了解学习集合,以方便在程序编写时,什么地方该选用什么集合,让程序更健壮的运行起来.在学习了解集合之前,首先需要了解一些数据结构方面的知识.下面我们就先简单的来看一下数据结构. 数据结 ...
- cf340D Bubble Sort Graph
link:http://codeforces.com/problemset/problem/340/D 感觉很好的一道题目. 认真思考,发现,逆序的数字对一定有边相连.所以,题目要求没有边相连的最大的 ...
- web.xml 详细介绍(转)
web.xml 详细介绍 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧 ...
- 转 https://www.zhihu.com/question/27606493/answer/37447829
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:梁川链接:https://www.zhihu.com/question/27606493/answer/37447829来源: ...
- webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware区别
webpack-dev-server: 它是一个静态资源服务器,只用于开发环境: webpack-dev-server会把编译后的静态文件全部保存在内存里: webpack-dev-middlewar ...
- ef执行记录原生态代码方法。
select e; var f = (System.Data.Objects.ObjectQuery<SimpleEntry>)final; var s = f.ToTraceString ...
- 严格模式use strict
严格模式主要有以下限制: 变量必须声明后再使用函数的参数不能有同名属性,否则报错不能使用with语句不能对只读属性赋值,否则报错不能使用前缀0表示八进制数,否则报错不能删除不可删除的属性,否则报错不能 ...
- ADO.NET数据库操作助手类
SQL语句操作增删查改助手类 using System; using System.Collections.Generic; using System.Configuration; using Sys ...
- JQuery Placeholder - Input提示信息
JQuery Placeholder Placeholder属性是HTML5为Input添加的,在Input上提供一个占位符,文字形式展示输入文字预期值的提示信息. 如: 需要使用:placehold ...
- CrashHandler: java.lang.NullPointerException
08-29 20:33:47.305 20636-20636/com.tongyan.subway.inspect D/AndroidRuntime: Shutting down VM 08-29 2 ...