HTML基础教程

HTML 教程首页
HTML 简介
HTML 入门
HTML 基础
HTML 元素
HTML 属性
HTML 标题
HTML 段落
HTML 排版
HTML 样式
HTML 链接
HTML 图像
HTML 表格
HTML 列表
HTML 表单
HTML 颜色
HTML 颜色名
HTML 颜色值
HTML 速查手册

HTML高级教程

HTML 布局
HTML 框架
HTML 字体
HTML 4.0
HTML CSS
HTML 实体
HTML 报头
HTML 元信息
HTML URLs
HTML 脚本
HTML 属性
HTML 事件
HTML URL编码
HTML Web服务器
HTML 总结

HTML示例

HTML 示例
HTML 测验
HTML 认证

HTML参考手册

HTML 标签列表
HTML 属性
HTML 事件
HTML 颜色名
HTML 取色器
HTML 混色器
HTML 字符集
HTML ASCII
HTML ISO-8859-1
HTML 符号
HTML URL编码
HTML 语言代码
HTTP 状态代码

HTML表单和输入

« 上一章 下一章 »

HTML表单(form)用于收集各种各样的用户输入。


示例

试一试

文本框
本例演示了如何在HTML页面上创建文本输入框,让用户输入文本。

密码框
本例演示了如何在HTML页面上创建密码框。

(本页底部提供了更多示例)


表单

表单(form)是一个容纳表单元素的区域。

表单元素指的是表单里那些允许用户输入信息的元素(如文本框、多行文本框、下拉菜单、单选按钮、复选框等等)。

表单是用<form>标签来定义的。

<form>
.
输入元素
.
</form>


<input>标签

<input>是最常用的表单标签。你可以通过<input>标签的type属性来指定输入类型。下面介绍几种最常用的输入类型。

文本框

文本框允许用户输入字母、数字等等。

<form>
名字:
<input type="text" name="firstname" />
<br />
姓氏:
<input type="text" name="lastname" />
</form>

在浏览器中的显示效果为:

名字:   
姓氏: 

注意:表单本身是不可见的。还要注意的是,在大多数浏览器中,文本框的默认宽度为20个字符。

单选按钮

单选按钮允许用户在给定的多个候选项中选择一项。

<form>
<input type="radio" name="sex" value="male" />男
<br />
<input type="radio" name="sex" value="female" />女
</form>

在浏览器中的显示效果为:

  男
  女

注意:用户只能选择一项。

复选框

复选框允许用户在给定的多个候选项中选择一项或多项。

<form>
我有自行车:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
我有汽车:
<input type="checkbox" name="vehicle" value="Car" />
<br />
我有飞机:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>

在浏览器中的显示效果为:

我有自行车:   
我有汽车:   
我有飞机: 

action属性和submit按钮

当用户点击“提交”按钮时,表单内容将被发送给服务器。<form>标签的action属性用于指定把表单内容发送给哪个页面。一般来说,action属性里指定的那个页面将对收到的输入内容做某些处理。

<form name="input" action="html_form_submit.asp" method="get">
用户名:
<input type="text" name="user" />
<input type="submit" value="提交" />
</form>

在浏览器中的显示效果为:

用户名:   

如果你在上面的文本框中输入一些字符,并点击“提交”按钮,浏览器将把你输入的内容发送给名为“html_form_submit.asp”的页面。该页面将把收到的内容显示出来。


试一试表单元素示例

复选框
本例演示了如何在HTML页面中创建复选框。用户可以选择或取消选择复选框。

单选按钮
本例演示了如何在HTML页面中创建单选按钮。

简单的下拉菜单
本例演示了如何在HTML页面中创建一个简单的下拉菜单。下拉菜单是一个可选择的列表。

另一个下拉菜单
本例演示了如何创建一个带默认选项的下拉菜单。

多行文本框
本例演示了如何创建一个多行文本框。用户可以在多行文本框中输入文本。多行文本框没有输入字符数的限制。

创建按钮
本例演示了如何创建按钮。你可以自定义按钮上显示的文本。

控件组
本例演示了如何在多个表单元素周围绘制边框并显示标题。

试一试完整表单示例

带有文本框和提交按钮的表单
本例演示了如何创建一个包含两个文本框与一个提交按钮的表单。

带有复选框的表单
本例演示了如何创建一个包含三个复选框与一个提交按钮的表单。

带有单选按钮的表单
本例演示了如何创建一个包含两个单选按钮与一个提交按钮的表单。

从表单发出电子邮件
本例演示了如何创建一个能发出电子邮件的表单。


表单标签

标签 描述
<form> 定义表单
<input> 定义输入控件
<textarea> 定义多行文本框
<label> 定义一个控件的文本标签(label)
<fieldset> 定义控件组
<legend> 定义控件组标题
<select> 定义下拉菜单
<optgroup> 定义选项组
<option> 定义下拉菜单中的选项
<button> 定义按钮
<isindex> 被弃用的,请用<input>替代

« 上一章 下一章 »



 




宏飞网络是你学习web开发、测试web程序实例、和培养职业技能的首选网站。我们提供例子也许有些简单,但对理解基本概念有帮助。

我们尽量避免在教程、参考及例子中出现错误,但不能保证所有的内容都是正确的。

你使用本网站时,我们默认你已经阅读并接受了我们的隐私政策。

Copyright 2003-2011宏飞网络 版权所有