HTML宝典(第 1 版)
3.2 Form元素
阅读(

HTML基础

HTML元素

表单及应用

什么是表单

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用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验