以上学习的迄今为止,Web的通信都只有一种方式,并不能满足我们接受访问访问者的意见,这时候,我们需要学习一种新的知识——表单,来完成这项要求。
首先,我们了解一下关于表单的基础——表格。使用相应的表格元素,比如<table>,<tr>,<th>,<td>等标记来创建表格。<table>标记的定义作用于整个表格。使用summary属性和<capition>元素可以提供表格的附加信息。还可以用CSS来控制表格这个“盒子”,来改变表格的样式。
其次,我们了解下表单的工作方式。①访问有HTML表单的网页,并填写提交。浏览器将表单中的数据打包,并发送到Web服务器。Web服务器接受数据包后,传给Web应用程序作处理。②Web应用程序处理数据,创建一个新的HTML网页传给Web服务器,然后Web服务器将这个网页又传给浏览器,浏览器接受并在屏幕上显示我们想要的信息。写表单的时候我们要用<form>元素里的action属性说明Web服务器的URL(也就是处理表单的Web应用程序),还有里面的method属性表明表单以何种方式发给服务器。关于Web服务程序一般由大多数主机代理商支持的PHP、Perl、Java和Python等语言来写成的。
再次,我们一般在网页上将可以输入数据的“表格”称之为控件,且<input>元素能够演变为网页许多不同的控件,主要取决于type的属性值,当type为text的时候,创建一个单行文本输入框,当type为submit的时候创建一个提交按钮,当type为radio,创建一个单选框按钮,当type为checkbox,创建的是一个复选框控件。Text<input>元素中的value属性,可以为文本设置value值。当网页表单被提交后,表单数据值与相对应的表单数据名匹配成对,然后把所有的表单数据名与值发送给服务器。
最后,根据需要设置所需要的type种类,取好name,并设置好value值,创建所需要的控件,再根据需要添加CSS,使得表单能够按照我们的安排显示在网页上。
如下给出常见形式的一个例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>The Starbuzz Bean Machine</title>
</head>
<body>
<h1>The Starbuzz Bean Machine</h1>
<h2>Fill out the form below and click submit to order</h2>
<form action="http://www.starbuzzcoffee.com/processorder.php" method="POST">
<p> Choose your beans:
<select name="beans">
<option value="House Blend">House Blend</option>
<option value="Bolivia">Shade Grown Bolivia Supremo</option>
<option value="Guatemala">Organic Guatemala</option>
<option value="Kenya">Kenya</option>
</select>
</p>
<p>Type: <br />
<input type="radio" name="beantype" value="whole" /> Whole bean <br />
<input type="radio" name="beantype" value="ground" checked="checked" /> Ground
</p>
<p>Extras: <br />
<input type="checkbox" name="extras[]" value="giftwrap" /> Gift wrap <br />
<input type="checkbox" name="extras[]" value="catalog" checked="checked" /> Include
catalog with order
</p>
<p>Ship to: <br />
Name: <input type="text" name="name" /> <br />
Address: <input type="text" name="address" /> <br />
City: <input type="text" name="city" /> <br />
State: <input type="text" name="state" /> <br />
Zip: <input type="text" name="zip" /> <br />
</p>
<p>Customer Comments: <br />
<textarea name="comments" rows="10" cols="48"></textarea>
</p>
<p>
<input type="submit" value="Order Now" />
</p>
</form>
</body>
</html>