交互活动_交互活动包括人机活动吗-CSDN博客

本文链接：https://blog.csdn.net/lanlandetuzi/article/details/19332363

以上学习的迄今为止，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>