您现在的位置是:首页 > 开发教程

开发教程

HTML教程-使用form表单与服务器交互信息

2020-11-21 11:27:09 开发教程 admin
通过前面几章的学习,我们应该能做出一个比较漂亮的网站了。但一个好的网站光是漂亮还是不够的,大部分的情况下,我们更喜欢让用户与我们交互(比如,我们喜欢做一个留言板,让用户在上面留言),这样不仅可以让我们的网站看起来更加丰富,而且更容易留住用户

通过前面几章的学习,我们应该能做出一个比较漂亮的网站了。但一个好的网站光是漂亮还是不够的,大部分的情况下,我们更喜欢让用户与我们交互(比如,我们喜欢做一个留言板,让用户在上面留言),这样不仅可以让我们的网站看起来更加丰富,而且更容易留住用户。

那么我们要如何让用户成功的在网站上面留言呢?大体的过程如下:
网站提供一个留言页面->用户在网站上填写留言->发送留言在服务器->服务器保存用户的留言

"服务器保存用户的留言"这个步骤需要服务器程序来实现(比如asp或asp.net),这已经超出了本教程的范围,本章我们就讲讲如何在"网站提供一个留言页面"

嗯,我们仔细来想想这个需求。
1,用户要填写信息,那么我们应该要提供一个文本框供用户输入信息(可能还包括:留言人,联系方式等等)。
2,用户填写完信息后,需要点一下确定来发送留言,那么我们还应该要提供一个按钮来让用户发送信息。
3,在一些网站上面我们还看到"重置"按钮,我们需不需要也加一个呢?好吧,我们也提供一个。

有了上面三步的需求,我们来看看怎么实现。这时,需要input标签出场了……

input标签是提供给用户操作的主要标签,它有一个type属性,不同的type属性,可以让input变成不同的东西,比如:
1,<inputtype="text"/>这个是我们最常用的了,它就是一个标准的文本输入框,不过用户不能在这个输入框中换行,比如我们在百度中看到的输入框,就是这样子的了
效果:
2,<inputtype="button"/>这个就是一个按钮了,如果要在按钮上面添加文字,大家再设置value属性即可,如下:<inputtype="button"value="我是按钮"/>
效果:
3,<inputtype="password"/>这是一个密码输入框,用户输到里面的文字都是*来代替。
效果:
4,<inputtype="checkbox"/>这是一个选择框,可以多选。
效果:
5,<inputtype="radio"/>这是一个单选框
效果:
6,<inputtype="reset"/>这个就是重置按钮了,点它,就会把同一个form中所有的输入框的内容全部清空。
效果:
7,<inputtype="submit"/>这个是比较特殊的按钮,点它,它就会向服务器提交信息。
效果:

input标签就介绍这些了,除了input标签我们还有两个比较重要的标签
1,textarea,这是一个多行文本输入框,在这个输入框中我们可以敲回车来换行,它的完整定义如下:
<textarearows="4"cols="15">我是多行输入框</textarea>
效果:

2,select下拉选择框:
select需要为option一起使用,select定义一个下拉选择框,option定义下拉框中的可选项.例子如下:
<select>
<optionvalue="湖南">湖南</option>
<optionvalue="湖北">湖北</option>
<optionvalue="广西">广西</option>
</select>
效果:

好了,明白了这些,我们可以做一个比较有模样的表单了。但仅有这些还是不能与服务交互。因为我们还缺少一些信息,比如,我们要将信息提交给谁来处理?我们要以何种方式提交信息等?这些信息,就需要使用form标签来完成了(嘿嘿,对了,在上面的input标签中已经有提到了form标签了。)

实际上,我们在上面讲的所有标签都应该被包含在form标签中,所以form标签应该是一个对称闭合的标签<form></form>,我们还需要提定form提交的目标页(就是提交给谁处理),这个信息是用action来定义。而提交方式是用method来定义的。所以,一个能正常工作的form至少应该是这样的。
<formaction="operate.asp"method="post">

有朋友会说,action="operate.asp"我理解了,operate.asp页就是处理留言的页。但method="post"中的post是什么意思呢?
通常向服务器发送信息的方式有两种:post与get。如果是通过post方式提交,那么我们是看不到浏览器向服务器提交的信息的。但如果是get方式提交,那么提交的信息就会暴露在url地址中(唉哎,我不懂---呵呵,不懂也没事,明白有这么一回事就好了,做多了,自然就明白了)

下面提供一个留言表单的示例:

<formaction="operate.asp"method="post">
<p>姓名:</p>
<p><inputtype="text"name="name"value="你的姓名"/></p>
<p>留言:</p>
<p><textareaname="comments"rows="5"cols="20">你的留言</textarea></p>
<p><inputtype="submit"value="发送"/><inputtype="reset"value="重置"/></p>
</form>