关于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 ...
随机推荐
- PAT (Advanced Level) Practise:1008. Elevator
[题目链接] The highest building in our city has only one elevator. A request list is made up with N posi ...
- 收集的maven 仓库地址(maven repository)
maven 仓库地址: 共有的仓库http://repo1.maven.org/maven2/http://repository.jboss.com/maven2/http://repository. ...
- MXNet设计笔记之:深度学习的编程模式比较
市面上流行着各式各样的深度学习库,它们风格各异.那么这些函数库的风格在系统优化和用户体验方面又有哪些优势和缺陷呢?本文旨在于比较它们在编程模式方面的差异,讨论这些模式的基本优劣势,以及我们从中可以学到 ...
- Selenium定位二 --多个元素定位方法 和层级定位方法
定位多个元素: findElements()方法可以返回一个符合条件的元素List 组 如: public void hitUpdatePersonnel(WebDriver driver, int ...
- hdu4737 A Bit Fun
link:http://acm.hdu.edu.cn/showproblem.php?pid=4737 暴力可以过啊.O(N^2)的复杂度. #include <cstdio> ]; in ...
- ps磨皮
光滑磨皮步骤: 1.用高斯模糊滤镜模糊皮肤,用蒙版控制范围,去掉较为明显的杂色及瑕疵.可以高斯模糊重复多次,去掉明显的杂色. 2.用涂抹工具处理细小的瑕疵及加强五官等部位的轮廓: 3.整体美白及润色 ...
- Sea.js学习5——Sea.js的构建工具spm
如果项目遵循推荐的标准目录结构: foo-module/ |-- dist 存放构建好的文件 |-- src 存放 js.css 等源码 | |-- foo.js | `-- style.css `- ...
- HTTP POST GET详解
get /shang/a1.php http/1.1 host: localhost POST /shang/a1.php HTTP/1.1 Hos ...
- go语言的print
代码: package main import ( "fmt" ) type point struct { x, y int } func main() { //Go 为常规 Go ...
- JQuery AJAX 解析获得的JSON数据
下面的解析的Json是一个二级循环. <!DOCTYPE html> <html> <head> <script src="https://code ...