XZ_HTML5之HTML表单和输入

表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（<form>）定义。

输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>

   First name:

   <inputtype="text"name="firstname"/><br>

   Last name:

   <inputtype="text"name="lastname"/>

</form>

效果：

注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

文本域（Textarea）

多行文本输入控件。用户可在文本域中写入文本。可写入字符的字数不受限制。

<textarea rows="10"cols="30">Today is a good day.The sky is blue.</textarea>

效果图：

密码域：

您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。

<form>

First name:

<inputtype="text"name="firstname"/><br>

Last name:

<inputtype="password"name="lastname"/>

</form>

效果图：

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

注意，只能从中选取其一。

<form>

   <inputtype="radio"name="sex"value="male"/> Male

   <br/>

   <inputtype="radio"name="sex"value="female"/> Female

</form>

效果图：

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>

  <inputtype="checkbox"name="cat"/>

  I have a cat

  <inputtype="checkbox"name="dog"/>

  I have a dog

</form>

效果：

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input"action="index.html"method="get">

    Username:

     <inputtype="text"name="user"/>

<inputtype="submit"value="Submit"/>

</form>

效果图：

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。

创建按钮

按钮上的文字可以自定义

例，创建一个确认按钮：

<form>

<inputtype="button"value="确认"/>

</form>

简单的下拉列表框

<form>

   <selectname="animal">

<optionvalue="dog">Dog</option>

<optionvalue="cat">Cat</option>

<optionvalue="pig">Pig</option>

<optionvalue="mouse">Mouse</option>

   </select>

</form>

效果：

带有预选值的下拉列表框

预选值指预先指定的首选项。

<form>

<selectname="animal">

<optionvalue="dog">Dog</option>

<optionvalue="cat">Cat</option>

<optionvalue="pig"selected="selected">Pig</option>

<optionvalue="mouse">Mouse</option>

</select>

</form>

效果：

Fieldset around data

在数据周围绘制一个带标题的框。

<form>

<fieldset>

  <legend>个人信息</legend>

  姓名：<inputtype="text"/><br/>

  性别：<inputtype="text"/>

</fieldset>

</form>

效果图：

从表单发送电子邮件

<form action="MALLTO:someone@163.com.cn"method="post"enctype="text/plain">

姓名：<inputtype="text"name="name"value="yourname"size="20"/><br/>

邮件：<inputtype="text"name="mail"value="yourmail"size="20"/><br/>

内容：<inputtype="text"name="comment"value="yourcomment"size="40"/><br/>

<inputtype="submit"value="发送"/>

<inputtype="reset"value="重置"/>

</form>

效果：

enctype 属性可能的值：

• application/x-www-form-urlencoded

• multipart/form-data

• text/plain

表单标签总结

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含menus、textarea、fieldset、legend 和label元素。

表单用于向服务器传输数据。

注释：form 元素是块级元素，其前后会产生折行。

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。

提示：可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式。（见下文HTML <textarea> 标签的wrap属性）

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

例，当点击Male和Female文字的时候也可以实现点击单选框的效果

<form>

<labelfor="male">Male</label>

<inputtype="radio"name="sex"id="male"/><br/>

<labelfor="female">Female</label>

<inputtype="radio"name="sex"id="female"/>

</form>

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

fieldset 元素可将表单内的相关元素分组。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<legend>标签为 fieldset 元素定义标题（caption）。

<select> 元素可创建单选或多选菜单。

select 元素是一种表单控件，可用于在表单中接受用户输入。

select 元素中的 <option>标签用于定义列表中的可用选项。

<optgroup> 标签定义选项组。

optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

<select>

<optgrouplabel="Swedish Cars">

<optionvalue="volvo">Volvo</option>

<optionvalue="dazhong"></option>

</optgroup>

<optgrouplabel="German Cars">

          <option value="mercedes">Mercedes</option>

          <option value="audi">Audi</option>

    </optgroup>

</select>

效果：

<option> 元素定义下拉列表中的一个选项（一个条目）。

浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。

option 元素位于 select 元素内部。

注释：<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。

请与 select 元素配合使用此标签，否则这个标签是没有意义的。

提示：如果列表选项很多，可以使用 <optgroup> 标签对相关选项进行组合。

<button> 标签定义一个按钮。

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中的默认值是 “submit"。

注释：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的按钮值。

注释：formenctype 属性可能的值：

• application/x-www-form-urlencoded

• multipart/form-data

• text/plain

HTML <textarea> 标签的wrap 属性

通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。

如果您希望启动自动换行功能（word wrapping），请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。

wrap="virtual" 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。

wrap="physical" 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。

如果把 wrap 设置为 off，将得到默认的动作。

例，以下面这个例子为例,将 60 个字符的文本输入到一个 40 个字符宽的文本区域内：               word wrapping is  a feature that makes life easier for users.

     如果设置为 wrap="wrap"，文本区会包含一行文本，用户必须将光标移动到右边才能看到全部文本，这时将把一行文本传送给服务器。

     如果设置为 wrap="virtual"，文本区会包含两行文本，并在单词 "makes" 后面换行。但是只有一行文本被传送到服务器：没有嵌入新行字符。

    如果设置为 wrap="physical"，文本区会包含两行文本，并在单词 "makes" 后面换行，这时发送给服务器两行文本，单词 "makes" 后的新行字符将分隔这两行文本。