HTML Form元素

Form元素

form元素用来创建表单，它包含多个属性，分别是action属性、method属性、enctype属性、onSubmit属性、onReset属性，接下来对这些属性进行简要介绍：

action属性

action 属性用来规定访问者提交表单后，服务器端处理脚本的URL。它可以是绝对URL，也可以相对URL。这个URL一般指向服务器端的一个程序，这个程序可以是任何动态网页或 servlet 或CGI，由它来接收表单提交的数据，并进行相应的处理。如果 action 属性的值为空或不写，表示表单提交给页面自身进行处理。如：

<form action="http://www.waibo.wang/login.cgi" method="post">

上述代码就表示，当用户提交这个表单时，将由 "http://www.waibo.wang/ " 服务器上的 login.cgi 来接收表单提交的数据，并进行处理。

method属性

method属性规定表单的HTTP提交方式，即提交表单时，浏览器以何种方式向服务器发送表单数据。最常用的是 get 和 post 提交方式，默认是get方式。

无论采用哪种发送方式，表单数据以“名/值”对的形式发送到服务器。名字是表单控件 name 属性的值，值是用户在表单控件中输入或选择的值。多个参数用 & 连接。

假如在上述表单中，用户输入的用户名是“aaa”，密码是“123”，则发送到服务器的数据将是username=aaa&password=123。

当然，在发送数据之前，要先按 enctype属性定义编码方式，对数据进行编码，并生成一个新的字串。

当action为get时，把这个字串附加到 action 属性指定的URL后面，用?分割，加载这个新的URL。当action为post时候，浏览器把这个字串封装到http body中，发送到Web服务器。

因此，如果使用 get 方式提交，将在浏览器地址栏看到“login.cgi?username=aaa& password=123”，会导致密码暴漏在地址栏中；如果使用 post 方式，在浏览器地址栏只能看到 login.cgi，密码不会暴漏。

尽管HTTP规范没有对URL的长度和传输的数据大小进行限制，但是，对于 get 方式，特定的浏览器和服务器对URL的长度有限制。因此，在大量数据时，使用 get 方式是不现实的。并且，它还会暴露敏感信息（如密码等），存在数据泄露的隐患。

对于 post 方式，由于不是使用URL来传值，理论上数据大小不会受限制。并且，它不会暴露数据，更健壮更安全。所以，用 post 方式来发送表单数据是普遍的做法。

enctype属性

enctype属性用来定义在发送表单数据之前，如何对数据进行编码，共有两种编码类型：

1）application/x-www-form-urlencoded

该编码类型是默认的编码类型，如果用户不指定编码类型或指定无效的编码类型，即采用默认的编码类型。

<form action="editor.cgi" method="post">
<label>Name: </label><input name="usr_name" />
<input type="submit" value="提交" />
</form>

使用这种编码方式的原因是，某些字符（如，空格、加号和其他特殊字符）不能直接发送给Web服务器。因此，在发送数据前，要将这些字符用指定字符进行替代。

2）multipart/form-data

如果表单中包含 type=file的表单控件，必须使用该编码类型，同时，表单的method属性值必须是post。

<form action="editor.cgi" method="post" enctype="multipart/form-data">
<label>Photo: </label><input type="file" name="pic" />
<input type="submit" value="提交" />
</form>

该编码类型将数据分割成多个部分发送，每个部分对应于一个表单控件，并按照它们在表单中的顺序进行发送。每个部分可以具有一个可选的“内容-类型”头，来指明该表单控件的数据类型。关于 mutipart/form-data 的详细定义，请参阅 RFC1867。

onSubmit属性

onSubmit属性为表单指定onSubmit事件的处理函数，当用户点击表单的提交按钮时，就会调用这个事件处理函数。

如果该处理函数返回 fasle，就不会提交表单；如果返回其他值或什么都没有返回，则表单会被提交。因此，常常通过这个事件处理函数来进行表单验证，即对用户输入的每个字段的内容进行检查，看是否符合预期的格式，来确保数据的有效性。

如，以下的用户登录表单，要求用户必须同时输入用户名和密码，才能提交表单。就可以通过onSubmit属性，为表单指定一个事件处理函数：

<form action="login.cgi" name="login" onSubmit="return checkSubmit()">
<label>用户名: </label><input type="text" name="username" />
<label>密码: </label><input type="password" name="password" />
<input type="submit" value=" 登录 " />
</form>

在事件处理函数中，获取用户名和密码，只要任意一个没有输入，函数就会返回 fasle，来阻止提交表单：

function checkSubmit() {
var username = login.username.value;
var password = login.password.value;
if(username == '' || password == '') {
return false;
}
}

上面只是通过一个非常简单的实例，来说明如何编写onSubmit事件的处理函数，实际应用中的处理函数，可能比这个要复杂得多，并且可以做更多的事情。当然，在不同情况下，还要给出不同的反馈，让用户清楚下一步该做什么，不能只是简单的阻止表单提交。

需要注意的是，在checkSubmit()函数中，是通过 input 控件的 name来获取其值，而不是id；onSubmit 属性值中的return不能省略；只有单击表单的提交按钮，才会调用事件处理函数，调用方法 form.submit() 提交表单，不会调用处理函数。

onReset属性

onReset属性为表单指定onReset事件的处理函数，当用户点击表单的重置按钮时，就会调用这个事件处理函数。常用于重置表单之前，让用户进行确认，以防止用户无意中按下重置按钮。

Javascript中有一个confirm 对话框，它的作用就是让用户确认自己的行为。对话框中包含一个确认按钮和取消按钮，用户点击确认就返回 true，点击取消就返回 false。

因此，就可以为上述表单定义onReset="return checkReset()"，并在checkReset()函数中弹出 confirm 对话框，让用户确认：

function checkReset() {
return confirm('确认重置表单吗？');
}

运行结果如图 3‑2 所示：

图3-2 确认重置表单

这样的话，在用户点击重置按钮时，就会弹出确认框，给用户一个选择的机会，如果用户点击取消，则不重置表单。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

HTML Form元素相关推荐

使用Ext Form自动绑定Html中的Form元素
2019独角兽企业重金招聘Python工程师标准>>> Java代码 //把ext 对象绑定在Html Form元素时的ext属性中 Ext.override(Ext.Compo ...
html5--3.1 form元素
html5--3.1 form元素学习要点 form元素及其属性 form元素用来定义一个表单,是建立表单的基础元素,(就类似定义表格的table) 表单的其他元素包含在form元素中,其主要子元 ...
SAP UI5 SimpleForm 里在水平方向显示多组 Form 元素的实现方法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2022年9月22日为止,目前已经更新了 133 篇,专栏完成度为 44.3%. 作者简介 Jerry W ...
HTML form元素
分析<form>元素 <form action="http://rb.com/hfhtmlcss/contest.jsp" method="POST&q ...
sizebox模型下载_box-sizing解决盒模型和form元素统一风格的问题
box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么C ...
HTML中简单的form元素及属性：
HTML中简单的form元素及属性: 1.作用:form表单主要用于收集用户的信息,并将form元素中收集到的内容提交到服务器. 2.input元素中常见的属性: type属性:常见的输入框如下: 名 ...
关于表单form元素中onsubmit事件处理机制的认识
博主目前处于Js学习的初期,遇到了很多问题,比如今天的关于表单form元素中onsubmit事件问题,根据教程所述,onsubmit事件是在表单提交的时候触发的,但是我看到教程上的onsubmit事件 ...
ASPX页面中不放置Form元素的问题
在整理项目里面的代码时,结果被一个失误郁闷了一下. 事情是这样的,原来项目里面有几个页面是*.htm格式的,后来为了统一管理资源方便,就把文件改成了*.aspx的了.当然这样做是没有任何的问题,同时V ...
javascript jquery對form元素的常見操作
1.下拉框 select : 移除option $("#ID option").each(function(){if($(this).val() == 111){$(this).r ...