HTML中表单的应用实例

么是表单？

HTML 表单的功能：

常用于登记信息的输入，或搜集不同类型的用户输入。
表单用于向服务器传输数据。

HTML 表单元素：

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素元素有很多形态，根据不同的 type 属性。

文本域(Text fields) <input>元素

<p>请输入您的姓名：<br /><input type="text" name="name" id="name" class="txt"/></p>

Text fields

<select>元素、<option>元素
简单的带有预选值的下拉列表，即预选值指预先指定的首选项。

<p>请选择你喜欢的颜色：<br />
<select name="color" id="color">
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
<option value="yellow">黄</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select></p>

表单单选按钮元素： radio元素

<p>请问你的性别是：<br />
 <input type="radio" name="sex" id="male" value="male" class="rad" />男<br />
 <input type="radio" name="sex" id="female" value="female" class="rad" />女</p>

表单复选框元素：checkbox元素

<p>请问你喜欢做些什么：<br />
 <input type="checkbox" name="hobby" id="book" value="book" class="check" />看书 
 <input type="checkbox" name="hobby" id="net" value="net" class="check" />上网 
 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check" />睡觉</p>

文本域(Textarea)（多行文本输入控制，在文本域中，可写入的字符字数不受限制）

<p>我要留言：<br /> <textarea name="comments" id="comments" cols="30" rows="4" class="textarea"></textarea></p>

表单提交按钮元素：submit元素 class类选择器

<p><input type="submit" name="btnSubmit" value="Submit" class="btn" /></p>

form自身属性： action 、 method

1，action：表示当前表单中的内容提交给哪个页面进行处理
2，method:表示当前表单提交的方式，常见的有get和post方式，默认是get提交

<form method="post">
 ..........
</form>

<form method="get"> 使用展现形式：

<form method="post" > 使用展现形式：

<form> 的兼容性：

几乎所有的浏览器都支持<form>表单标签。

附一个简单的表单应用案例：

基础信息表单

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="information.css"/>
<title>基础信息表单</title>
</head>
<body>
<form method="post">
<p>请输入您的姓名：<br /><input type="text" name="name" id="name" class="txt"/></p>
<p>请选择你喜欢的颜色：<br />
<select name="color" id="color">
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
<option value="yellow">黄</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select></p>
<p>请问你的性别是：<br />
 <input type="radio" name="sex" id="male" value="male" class="rad" />男<br />
 <input type="radio" name="sex" id="female" value="female" class="rad" />女</p>
<p>请问你喜欢做些什么：<br />
 <input type="checkbox" name="hobby" id="book" value="book" class="check" />看书 
 <input type="checkbox" name="hobby" id="net" value="net" class="check" />上网 
 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check" />睡觉</p>
 
<p>我要留言：<br /> <textarea name="comments" id="comments" cols="30" rows="4" class="textarea"></textarea></p>
<p><input type="submit" name="btnSubmit" value="Submit" class="btn" /></p>
 </form>
</body>
</html>

对表单形式进行修改的CSS样式如下：

@charset "utf-8";
/* CSS Document */
form
{
	width:250px;
	height:350px;
	border:1px dotted #aAAAAA;
	padding:1px 6px 1px 6px;
	margin:0px;
	font:14px Arial, Helvetica, sans-serif;
}
input
{
	color:#00008b;
}
input.txt
{
	border:1px inset #00008b;
	background-color:#ADd8e6;
}
input.btn
{
	color:#00008b;
	background-color:#add8e6;
	border:1px outset #00008b;
	padding:1px 2px 1px 2px;
}
select
{
	width:80px;
	color:#00008b;
	background-color:#add8e6;
	border:1px solid #00008b;
}
textarea
{
	width:200px;
	height:40px;
	color:#00008b;
	background-color:#add8e6;
	border:1px inset #00008b;
}

以上知识是我在学习过程中了解到的关于表单的相关知识，我们可以相互交流，学习。

（文中部分图片来自网络，若有侵权，请联系修正）

多公司的业务需要收集和展示信息，但常常困惑于表单数量庞大，复用率不高等问题。动态HTML可填充表单是解决这一困境的理想方法。随着HTML和自适应HTML表单的发展，您可以超越静态PDF表单的范围，而且您可以在保证安全性的情况下做到这一点。许多企业级的工作流软件可能要上万元，而基于web架构，利用可填充的HTML表单作为工作流文件传递的系统，可以在任何设备上轻松访问，并通过已完成表单的所有渠道交付选项进行提交。业务流程的完整工作流可以通过与现有或新业务系统集成的单个表单解决方案来处理。它的好处是您不再需要大量修改业务软件，只要利用动态HTML表单作为出入系统的通道，让它成为连接您与客户、合作伙伴、供应商和员工的自动化信息通讯解决方案。

动态HTML表单在医疗上的可应用性

真正的动态HTML表单只显示与完成多步骤工作流的个人相关的问题和信息。效率和准确性是动态HTML表单的首要任务。在设计表单时，用户界面在重要功能列表中的位置也很高。用户不想浪费时间查看与其情况无关的字段、段落或按钮。我最近做了核磁共振检查，并收到了一份两页纸的合法大小的文件。考虑到核磁共振机是医院里最昂贵、技术最先进的机器之一，而且它们使用的是纸质表格耗损量也巨大。当我看到那些与我检查不相关的问题时，我忽然意识到这个诊断报告中的流程存在着多大的效率浪费。更不用说，在诊疗报告中有些部分实际上是空白的，也只能由核磁共振技术人员填充。于是，我联系了医院管理人员，向他们展示了表单的设计和收集数据的方式。许多情况下，当人们已经是您的客户或病人时，重复的提供地址和电话号码等基本信息，都是非常不必要的事。

根据用户所做的选择，动态HTML表单将只显示与每个选择相关的信息，从而最大限度地提高表单的实用性。无论是医务人员还是医院行政人员，时间对于他们来说太宝贵了，不能浪费在那些无关紧要的事情上。如果患者没有过敏症，他们选择“否”，表单列表上无需显示常见的过敏症列表。更明智地是使用动态HTML表单，如果患者对过敏原选择“是”，则表单可以自动调整以显示可能的新选项，从而触发显示表单字段，以便患者列出其过敏原。此外，表单还可以显示常见过敏原的复选框列表。

工作流程和客户体验影响

使用动态HTML表单收集数据的好处对于工作流和客户体验目标来说是巨大的。HTML自适应表单的一个最大优点是，它们为世界上所有人提供了安全地、可靠地的可填充表单，并且不需要依赖任何特殊的软件和硬件。例如，完成MRI表格的患者可以在就医前、在家里、在路上就完成，并且可以通过电子邮件将PDF发送给他们，以获取病患的记录。想象一下，在客户和业务方面，您的用户使用可填充表单可以减少多少步骤和时间。HTML表单是动态的、可移植的，在智能手机、平板电脑、PC上提供全渠道的交付，并且可以通过Web服务与任何业务软件一起工作。

动态可填充表单会根据输入的数据立即做出更改。例如，如果用户正在填写有关新实用程序服务的表单，则这些字段仅与该特定服务相关，并且可以根据需要提供可用的服务选项。另一个例子是保险单。根据所有必要的保险表单，您可以凭借用户的需要缩小或扩展表单的内容，不必填写不必要的字段，也不必占用客户大量的时间。

基于web的动态HTML表单最终能满足全渠道交付，这对客户来说是大有裨益的。

各行各业中的应用

可填充表单可以是跨行业的解决方案。如前所述，医疗保健中存在一些场景，同样地在银行、教育、保险、制造、电信、公用事业也应使用动态可填充表单。这些行业的企业以及更多内部或从供应商、业务合作伙伴和客户外部收集数据，并向他们提供信息，尽可能的减少工作流中表单填写的时间，提升工作流效率。

、表单在网页中的应用：登录、注册常用到表单

2、表单的语法：

<p>

</p>

</form>

3、表单元素说明：

type:指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text.

name:指定表单元素的名称.

value:元素的初始值。type 为 radio时必须指定一个值.

size:指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位.

maxlength:type为text 或 password 时，输入的最大字符数.

checked:type为radio或checkbox时，指定按钮是否是被选中.

4、示例：

<html >

<head>

</head>

<body>

<br/>

<input type="radio" name="sex" checked/>男

<input type="radio" name="sex"/>女

<br/>

<input type="checkbox" name="hobby" id="hobby"/>听音乐

<input type="checkbox" name="hobby"/>旅游

<input type="checkbox" name="hobby"/>游泳

<br/>

</select>

<br/>

<br/>

<br/>

<br/>

个人简介：

</label>

<textarea >本人已同意什么条款</textarea>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

</form>

</body>

</html>

效果图链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html

在线咨询

上一篇：Node.js Javascript MySQL 视
下一篇：10款精美的HTML5图片轮播动画+打包源码下载

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML中 表单 的应用实例

么是表单？

HTML 表单的功能：

HTML 表单元素：

form自身属性 ： action 、 method

<form> 的兼容性：

附一个简单的表单应用案例：

工作流程和客户体验影响

各行各业中的应用

您的项目需求

HTML中表单的应用实例

form自身属性： action 、 method