十 Forms

Forms用于发送数据

它们单独是无效的，必须和用户的数据处理联系起来。如果是提供html空间的网络服务，那么空间商需要帮助你怎么使用，提供清楚简单的说明，可以制作一个form-to-email的form。

forms的基本标签是form/input/textarea/select和option。

form标签定义form，同时需要action属性配合，告诉form信息发布到哪里。

可选择属性method告诉form数据怎么传送，值分别是get（默认）或post。普通经常设为post，表示隐藏信息（get让信息显示在url上）。

下面就是一个form元素：

<form action="processingscript.php" method="post">

</form>

input标签在form里非常重要，下面列出要点：

• <input type="text" />表示文本框，当然它也有一个value属性，设定初始文本内容。
• <input type="password" /> 和文本框很相似，只不过字符是隐藏的。
• <input type="checkbox" />表示检查框，用户可以自由选择。它拥有一个checked属性，像下面这样<input type="checkbox" checked="checked" />，表示以选择。
• <input type="radio" />和checkbox很相似，但用户在一组里面只可以选择一个。同样有checked属性，用法和checkbox一样。
• <input type="file" />选择计算机上的文件，用来允许用户上传文件。
• <input type="submit" />提交按钮。你可以用value属性控制按钮上的文字例如<input type="submit" value="Ooo. Look. Text on a button. Wow" />。
• <input type="image" /> 可以用图片代替提交按钮，和img标签一样，需要src属性。
• <input type="button" />是一个按钮，如果没有附加代码将不会起作用。
• <input type="reset" /> 复位按钮，还原form到最初状态。
• <input type="hidden" /> ，不显示传送信息，比如用户所在的页面名称或者form必须发送的email地址。

  注意input标签要用 />闭合。

  文本区域textarea，一个大的文本框需要用到rows和cols属性。如：

  <textarea rows="5" cols="20">A big load of text here</textarea>

  select标签通过option标签进行下拉框选择。

  比如：

  
  <select>
   <option value="first option">Option 1</option>
   <option value="second option">Option 2</option>
   <option value="third option">Option 3</option>
  
  </select>
  

  当form提交时，选中的值将会被发送。

  和checkbox和radio按钮的checked属性同样的道理，一个option标签同样拥有selected属性，比如<option value="mouse" selected="selected">Rodent</option>。

  上面的标签在页面表现上看起已经不错，但是如果你把form联系到一个form处理程序，它们将被忽视。这是因为form区域需要名称，所以所有区域都要加上name属性，例如： <input type="text" name="talkingsponge" />

  一个form看起来像下面一样。（注意：这个form如果没有action属性里的“contactus.php”文件将不会工作）

  
  <form action="contactus.php" method="post">
  
   <p>Name:</p>
   <p><input type="text" name="name" value="Your name" /></p>
  
   <p>Comments: </p>
  
   <p><textarea name="comments" rows="5" cols="20">Your comments
  </textarea></p>
  
   <p>Are you:</p>
   <p><input type="radio" name="areyou" value="male" /> Male</p>
  
   <p><input type="radio" name="areyou" value="female" /> Female</p>
   <p><input type="radio" name="areyou" value="hermaphrodite" /> 
  An hermaphrodite</p>
   
  9 
  7 
  3 
  1
  2
   4 
   8 
  :
   
  			
    把此文章收藏到：