HTML学习12－form表单

HTML 表单用于搜索不同类别的用户输入。

实例：

文本域（Text Field）：用户可以在文本域输入文本。

<!-- 表单-->
<form>
姓名：
<input type="text" name="firstname">
<br />
性别：
<input type="text" name="lastename">
</form>在浏览器展示效果：



密码域

<!-- 表单:密码域-->
<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
<p>
请注意，当您在输入密码域中输入字符时，浏览器将使用项目富豪来代替这些字符。
</p>
</form>

在浏览器显示效果：

表单

表单是一个包含单元素的区域。

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

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

<form>
...
<input>
...
</form>

输入

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

文本域（Text Field）

单选按钮(Radio Button)

当用户从若干给定的选择中选取其一样，就会用到的单选框。注意：只能选择其中其一

<!-- 单选框 radio:单选-->
<form>
<input type="radio" name="sex" value="male">Male
<br />
<input type="radio" name="sex" value="female">Female
</form>

在浏览器显示的效果：

复选框（CheckBoxes）

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

<!-- 复选框-->
<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

在浏览器显示的效果：

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

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

<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text"  name="user" />
<input type="submit" value="Submit" />
</form>

在浏览器显示的效果如下：



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

简单的下拉列表

<form>
<select name="care">
<option value="green">Green</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
</select>
</form>

在浏览器显示的效果：

Fieldset around data  在数据周围绘制一个带标题的框

<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

在浏览器中显示的效果：

带有输入框和确认按钮的表单

<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike;
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car
<input type="checkbox" name="vehicle" value="car" />
<br />
I have an airplane
<input type="checkbox" name="vehicle" value="airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<p>如果点击“Submit”按钮，您将把输入传送到名为html_form_action.asp的新页面</p>

在浏览器中显示的效果是：