名表单是用于收集参与者信息的工具。

报名表单可以在以下场景中使用：

1. 学校活动：报名表单可用于学校组织的各类活动，如运动会、文艺晚会、校外考察等。可以收集学生报名信息、选择参加项目和填写意见等。

2. 社团招新：社团可以通过报名表单收集有兴趣参加的学生信息，并了解他们的专长和动机，从而更好地进行选拔和安排。

3. 培训课程：使用报名表单可以让学员填写个人信息、选择感兴趣的课程和交费方式，方便组织者进行课程安排和收费管理。

4. 会议或研讨会：报名表单可用于参加会议或研讨会的人员报名，收集姓名、职务、机构信息以及是否需要住宿和用餐等信息。

5. 活动报名：例如社区活动、体育赛事、志愿者活动等，通过报名表单可以统计参与人数、需求和人员分配等。

6. 网上竞赛：报名表单可以收集参赛者的个人信息和联系方式，以便组织者与参赛者联系，发送竞赛相关信息。

7. 志愿者招募：组织者通过报名表单可以收集志愿者的个人信息、技能特长、意愿和可用时间，便于进行筛选和安排。

8. 旅行团报名：报名表单可以用于旅行团的报名流程，收集报名人员的个人信息、出行时间和需求等，方便组织者进行行程安排。总之，报名表单广泛应用于各类活动、课程、会议和招募等场景中，用于收集报名者的个人信息和参与意愿，方便组织者进行统计、管理和沟通。

通过填写表单，参与者可以方便地提供个人信息，帮助组织者更好地进行统筹安排。不仅简化了报名流程，还提高了数据收集的效率。报名表单的使用大大简化了组织工作，更加便捷和高效。

如何制作一个报名表单链接？

步骤一 ·注册登陆

在微信小程序搜一搜【龙艺秀小程序】，或者在电脑上搜索 龙艺秀，注册账号并登陆，一般建议使用电脑制作，功能齐全，操作比较方便。

步骤二 · 制作表单

在工作台选择【报名表单】进行制作，选择新建自定义页面，或者在模板页面使用设计好的模板，稍微修改就可以使用。

步骤三 · 编辑表单

在编辑框进行编辑，在左边编辑栏选择需要添加线上报名的组件，比如姓名、联系人、联系电话等需要收集的信息。

步骤四 · 收款设置

如果报名需要收款的话，也可以设置好价格，用户填写好信息并支付报名费。

步骤五 · 规则设置

在设置页面，设置报名活动开始时间/结束时间，回收量做限制，回收提醒通知、还可以选择短信的方式提醒。

步骤六 · 风格美化

对报名表单进行美化，风格可以选择系统自带的模板，或者自定义进行设置。

步骤七 · 分享设置

制作好之后点击发布，系统会自动生成报名链接二维码、链接、海报，小程序码等，复制路径，可以添加到微信公众号自定义菜单或者群发图文中，或者直接转发到微信，用户打开就可以填写报名信息。

以上就是微信报名链接怎么做的具体步骤，线上报名流程简单，选项设置灵活多变，可以根据不同的需求来进行调整，同时还能避免纸张的浪费。

这篇文章中，我们将提供一些你可以很容易遵循的指导方针。通过可用性测试、现场测试、网站跟踪、眼动追踪、网络分析以及用户对客服的真实反馈，精心制作出这些准则。

一、为什么网页表单可用性如此重要

ISO 9241国际标准定义了网站可用性为“有效性，效率和用户主观满意度以及特定用户在特定使用环境下所达到的特定目标。”当用户使用网站时会有一个特定目标，如果设计得好，网站将实现这一目标，这是整个网站开发团队所期待。而横在目标用户和设计者的往往是表单，因为，尽管人机交互的发展进步，表单仍然是用户在网络中进行交互的主要方式。事实上，表单往往被认为是完成目标的最终、也是最重要的阶段。

让我们阐明这最后一点，讨论一下表单的三个主要用途。就如Luke Wroblewski在他的《Web Form Design: Filling in the Blanks》一书中所说的那样，表单存在有三个因素：商业，社交，生产力。下表展示了隐藏在这些因素之下的用户目标和业务目标。

上图为表单的用法，来自Luke Wroblewski的《Web Form Design: Filling in the Blanks》一书。

因此，表单和可用性之间的关系有两个方面：

• 表单可以使一个网站好用或是不好用，因为他们站在用户的角度来实现他们的目标；
• 表单需要好用，用来帮助用户实现目标。

这篇文章将重点放在第二点上，因为好用的表单自然有助于该网站的整体可用性，因此作为第一个方面考虑。

二、网页表单的六个组成部分

网页表单是必要的，而往往是设计师和用户的痛点。随着时间的推移，用户已经形成一种期望，表单的外观应该如何以及如何运作。他们通常期望网页表单有以下六个组成部分：

• 标签：
• 输入框：
• 行为：
• 帮助：
• 信息 :
• 验证 :

Skype网站的注册表单包含了六个组成部分。

三、通过表单的三个方面的解决可用性

尽管在布局、功能和用途上有所差异，但所有表单都主要有三个方面，就如Caroline Jarrett和Gerry Gaffney 在他们的《Forms That Work: Designing Web Forms for Usability》一书中所描述的那样：

• 关系 :
• 对话 :
• 外观 :

为了使表单具有可用性，这三个方面都需要加以应对。让我们来看看各个方面，进而找出如何让表单真正具有可用性，并且很容易掌握的实用的指导方针。

第一方面：关系

17世纪的英国诗人、批判作家、律师、牧师John Donne曾说过，“没有谁是一座孤岛”。事实上，人类因关系而繁荣发展，比如爱情、友情、同事或是工作关系。表单是建立和加强用户和组织之间关系的一种方法。如果做得不好，它可以会提前终止这种关系。

考虑到这一点，有以下一些原则：

建立关系是基于信任之上的，所以在表单中建立信任至关重要。可以通过标识、图像、色彩、排版和文字来达到这个目的。精心组织的表单会让用户感到放心。

每个关系都有一个目的，可能是浪漫关系下的爱和幸福，或是业务关系的经济收益。问问自己，你的表单目的是什么？

表单名称表明表单的目的。表单的名称告知用户这个表单是关于什么内容的，以及为什么需要他们填写。

在一段关系中，了解他人是必不可少的。为了了解你的用户，你总是需要考虑你所问的问题是否合适，如果问题合适，那用户是否会及时填写。这将会对你的表单灌输一种自然的流程梳理。

了解你的用户也将帮助你选择适当的措辞，并删除多余的文字。而且，它会有助于你制作出平衡用户需求和你的需求的界面。

不要问表单范围以外的问题。在一段关系中，你会不相信这些问不合时宜问题的人，同样的事情也会发生在网络上。与利益相关者磋商，探讨一下什么信息是真正被需要的。

行为或外观的突然改变会使用户心急火燎。同样，表单或者表单步骤的介绍说明也不要突然变化。

了解你的用户。让已注册的用户很容易地登陆，让新用户很容易地注册。Debenhams 使这两者几乎没有明显的区别。

另一方面，Amazon网站为新用户简化了注册过程

第二方面：对话

表单是一个对话。就像一个对话，它代表双方之间的双向交流，在这种情况下，这两者指用户和表单组织者。事实上，用户填写表单，以发起与组织者之间的对话。

例如，对于一个社交网站，用户将填写注册表单，告知组织者他们想加入的意愿。接受用户请求时（自动或手动），该组织将问用户一系列的问题（以标签的形式），如他们的名字、姓氏、电子邮件地址等等。一旦接受（或拒绝）用户请求后，该公司将把结果告知用户，从而完成交流过程。

从这个角度看表单，产生了一些有用的指导原则：

正如前面提到的，表单是一个对话，而不是审问。攻击性的标签文字会让用户感到心急火燎，并且（如果此时他们不离开网站的话），他们将最有可能给出你想听到的，但并不真实的答案。

有逻辑性地组织标签，反映对话的自然流畅。例如，问完用户的一些其他问题之后，才问用户的名字，这难道不奇怪么?不会是奇怪的问别人自己的名字后，才问了一些其他的问题吗？更多涉及到的问题应该在表单接近尾声的时候问。

将相关信息编组，如个人详细信息。从一组问题到下一组的过渡更像是一个对话。

Yahoo的注册表单通过紫色的标题和细线，有效地将相关内容分组。

虽然Constant Contact网站将相关内容分组，但是它把组分离的太远，这可能会给用户造成迷惑。

如同一个真实对话，每个标签应该在一个时间里解决一个主题，帮助用户在输入框中做出回答。

会话中的自然停顿意味着在何处留白，如何编组标签以及是否需要把表单拆分在多个页面上显示。

在任何会话中，背景混乱会让人分心。因此，要去除杂乱例如横幅和不必要的导航，这些可能会分散用户填写表单的注意力。

Dropbox网站提供了一个很好的例子，展示了一个注册表单该是怎样的。留白恰到好处，页面也简洁。

第三方面：外观

外观或是用户界面（UI）是网页表单可用性的核心，对此有几项准则。为了简化讨论，我们把它们分成六点（前面有所提及）。

1. 标签

• 词语 vs. 句子：

如果标签的目的简单易懂，如询问用户姓名或电话号码，这样一两个词就足够了。但是，如为了消除歧义，一个短语或一句话可能还是有必要的。

Amazon网站的注册表单采用了完整的句子，然而几个单词就足够了。

• 句首字母大写 vs. 按标题格式大小写：

应该设置成是“Name and Surname”还是“Name and surname”呢？句首字母大写比标题格式稍微容易并且更快地遵循语法。有一件事是肯定的：从不使用全部大写的，否则表单将会显得不专业，并且难以阅读。

看看快速浏览Barnes & Noble’s网站的注册表单标签是多么困难！

• 标签以冒号结束：

针对一些桌面应用程序和操作系统（如Windows）的UI设计准则，建议在表单标签结束处添加冒号。一些线上表单的设计师坚持这一点，主要是因为旧屏幕阅读者主要依靠冒号识别一个标签。现代的屏幕阅读者依赖于标记（特别是标签标记）。另外，冒号是个见仁见智的问题，只要保持风格一致，它既不会加强也不会有损于表单的可用性。

• 标签的对齐方式：顶对齐 vs. 左对齐 vs. 右对齐

跟一般想法相反，在输入框上面放置标签并不是可用性最好的位置。你希望用户尽可能快地填写表格，这有些理想化。但有些时候你需要故意让用户慢下来，以便他们用心地留意并阅读标签。此外，把长表单设成一个长列，让用户向下滚动页面。这比把表单分成列，每样都雷同要好。每一种对齐方式都有它的优点和缺点。

Matteo Penzo根据表单标签对齐方式研究出的时间表。

表单绝不能超过一列。请看一下Makeup Geek 网站，我们会多么容易忽略右侧的一栏（更不用提底部的“必填项”说明）。

2. 输入框

根据需要信息的不同选择合适的输入框类型。每种类型的输入框都有其自己的特性，用户已经习惯了这些。例如，如果几个选项中只有一个能被选中使用单选按钮，那就用单选按钮；如果允许选多个选项，那就用复选框。

自定义输入框不意味着创造新的输入框类型。这在早期的Flash网站中常见，而且它似乎又卷土重来了；我曾看到一些用jQuery实现的怪异输入框。而往往简洁才最具有可用性。请保持输入框尽可能接近其不变的HTML渲染。

如上图，改变输入框的界面会混淆用户。

如果你需要对用户输入的数据信息有格式要求，可以限定输入框的格式，然后采取措施至少不能让用户感到不适。例如，与其在文本输入框旁边显示MM/ DD / YYYY作为日期选择，还不如考虑使用三个下拉菜单，或者更好的是，一个日历控件。

• 必填项 vs. 选填项

明确地区分出哪些输入框用户不能不填。习惯上使用一个星号（*）表示必填。任何符号都可以，只要标识说明清晰可见地表明是什么意思就行（即使它是一个星号）。

3. 行为

• 主要行为 vs. 次级行为

主要行为是指表单中为了促进表单填写完成的链接和按钮，比如“保存”和“提交”。次级行为用来确保用户可以撤消已输入的信息，例如“后退”和“取消”。如果误点击，次级行为通常有不良的后果，因而在可能的情况下只能使用主要行为。如果你必须使用次级行为，那么不能让次级行为在视觉上比主要行为明显。

没有明确区分主要行为和次要行为，这会很容易导致提交失败。该表单是St. Louis Community College招生用的，上面的操作按钮被放置在这个厂表单的底部。试想一下，多么容易意外按下“Reset form”按钮。

• 命名规则

避免使用通用词，如“提交”作为动作，因为它们给人的印象是表单本身是通用的。像“加入LinkedIn”之类的词语或词组应该是首选的。

虽然可口可乐网站正确地强调了主要行为按钮，但是放置了一个普通的词“提交”。“注册加入我们”将会更有用。

4. 帮助

• 表单的解释文字

你应该从来没有向用户解释如何填写表单。如果它看起来不像一个表单或者它填起来太复杂，那么重新设计将是你唯一的选择。相应的文字只应该在需要的地方使用，如解释为何需要信用卡信息和出生日期以及为何要链接到“条款及服务”。为了表单简洁，易于阅读，这样的文字往往被忽略。作为一个条经验法则，总共的解释文字不应超过100字。

• 用户触发式帮助和动态帮助

与其在每个输入框旁边添加说明文字，还不如只在需要的地方显示。你可以在输入框旁边显示一个图标，当用户需要有关该输入框的帮助时，可以点击该图标。更妙的是，当用户点击输入框输入信息的时候，可以显示动态的帮助信息。这样的做法变得越来越普遍，并且相对容易用JavaScript库（比如jQuery）实现。

Skype网站的注册表单采用了用户触发式帮助（蓝色的方块是由点击问号引发的）和动态帮助（用户名建议）。

5. 信息

• 错误信息

错误信息通知用户发生了错误，它通常阻止用户继续填写表单。强调错误信息的方法有很多，可以是色彩（通常为红色），或是大家熟悉的图片（如警告标志），或是突出物（通常是在表单的顶部或是错误发生的地方），又或者是以上方法的综合。

• 成功信息

使用成功信息通知用户，他们在表单中已经达到了一个有意义的里程碑。如果表单很长，一条成功消息会鼓励用户继续填写。如同错误信息，成功信息也应该突出显示。但它们不应该妨碍用户继续进行下去。

6. 验证

• 只出现在需要的地方

过多的验证非常糟糕，因为它妨碍了用户继续。精简验证，以确认关键内容（如用户名的可用性）和确保真实答案（如年龄不允许超过130岁），并且给出一组有建设性的参考回答，这些可能的数据要限量并能够在一个下拉菜单中显示（如国家代码首字母）。

• 智能默认值

使用智能默认使用户完成表单速度更快、更准确。例如，根据用户的IP地址预先选择他们所在的国家。但使用时要小心，因为用户往往会忽略默认选择。

Twitter网站的注册表单既使用了动态验证（验证了姓名、电子邮箱地址、密码和用户名）也使用了智能默认（“登录网站”）。

结论

如果觉得分析的还不错，就把它应用到自己的表单设计中吧。正如我开头处写的那样，仅仅调整UI走捷径是不会让你的表单更加好用的。我还有什么可说的呢？这些理论现在已经是你的了，赶快实际动手操作吧。

作者：小白，微信公众号：小白的交互设计

本文由 @小白 原创发布于人人都是产品经理。未经许可，禁止转载。

一篇：Java 0基础入门 （Html标签的使用）

表单在网页中主要负责数据采集功能。

一.表单实际应用场景

如上两张图，图中的黑色线条是我画上去的，如果按照黑线，在Excle中画出这两张表单，相信大家都可以也不是很难，那在Html中，我们同样也是画出这样的表单，最后将黑线隐藏即可。

二.表单包含的控件

具体写法：（插一句，Html代码中<!--xxxx-->,这样的内容，是注释内容，也就是代码执行的时候并不执行，只是类似看文言文时，旁边的注解一样）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			action:指定服务器端处理程序的路径（Java、.Net、PHP、Python、NodeJs……）
			method:提交方式,有get和post两种
				get：会将表单中的值直接带在地址栏中   不安全   数据量有限制
				post：不会将表单中的值带在地址栏中    更安全    数据量没有限制
		-->
		<form action="http://www.baidu.com" method="get">
			<!--
				对于不同控件中的value属性值，一般就是服务器端要拿到的具体的值
			-->
			
			
			<!--
				单行文本框：
				type属性：因为密码框、单选按钮、复选框也都是input
						通过type属性来区分当前的input到底是什么
				(如果input不指定type属性值，默认取值为text)
				value：指定单行文本框的初始值
			-->
			<p>
				单行文本框：<input type="text" value="初始值"/>
			</p>
			<p>
				<!--
					placeholder:当没有内容时默认显示的内容，随着用户的输入，会消失
					如果清空输入吗，会再次出现
					plcaceholder和value的区别在于：
						placeholder不能通过用户输入直接改变内容
						value提供的值用户是可以改变的
					maxlength：限制输入字符的最大长度
					*name:相当于给控件起个名字，服务器端可以根据这个名字，来区分每一项数据代表什么含义
				-->
				单行文本框：<input type="text" placeholder="初始值" maxlength="5" name="txt"/>
			</p>
			
			<!--
				密码框
            	type:password密码框
            	单行文本框中能用的属性，密码框也都能用
            -->
			<p>
				密码框：<input type="password" placeholder="请输入密码" name="pwd" maxlength="6"/>
			</p>
			
			<!--
				单选按钮
				type:radio 单选按钮
				checked="checked"默认选中当前项
				name在radio中的作用：
					(1)服务器端用来识别数据
					(2)用来描述同一组信息的内容只选中其中一个，用来分组，产生互斥
			-->
			<p>
				<!--
					<label>:如果要点击单选按钮后面的字也能够选中单选按钮，就使用
						该标签将单选按钮以及文字都包裹在一起
				-->
				<label>
					<input type="radio" checked="checked" name="sex" value="0"/>男
				</label>
				<label>
					<input type="radio" name="sex" value="1"/>女
				</label>
			</p>
			
			<!--
            	复选框
            	type：checkbox
            	name：用来对同一组相同含义的checkbox分组，就算给了name，也能够一次性选中多个
            -->
            <p>
            	<input type="checkbox" name="hobby" value="0"/>跑步
            	<input type="checkbox" name="hobby" value="1"/>打球
            </p>
            
            <!--
            	按钮 input
            -->
            <p>
            	<!--
            		重置按钮 type="reset"
            		value:按钮中要显示的文本，一般不需要传递给服务器端
            		
            		重置不是简单的清空，而是回到页面最原始的状态
            	-->
            	<input type="reset" value="重置"/>
            	<!--
            		提交按钮 type="submit"
            		value:按钮中要显示的文本，一般不需要传递给服务器端
            	-->
            	<input type="submit" value="提交" />
            	
       
            	<!--
            		普通按钮：type="button"
            		普通按钮本身不具有任何的特殊行为，其行为一般需要通过js脚本来绑定
            	-->
            	<input type="button" value="普通按钮" onclick="alert('这是一个普通按钮');"/>
            	<!--
            		图片按钮：type="image"
            		通过图片来制作按钮，相当于提交按钮
            	-->
            	<input type="image" src="001.jpg" />
            	
            	
            	<!--
            		注意：对于提交按钮和重置按钮，如果放在form元素以外的地方，
            		是无法对表单进行重置或提交操作的
            	-->
            </p>
            
            <!--
            	多行文本框 textarea (文本域)
            	cols：列数
				rows：行数
				name:用于在服务端获取数据时使用
				注意：文本域中的默认内容应该写在标签之间，而不是value属性中
				这一点和当行文本框是有区别的
				
				placeholder:文本域为空时的默认内容
            -->
            <p>
            	<textarea cols="10" rows="20" placeholder="默认值">dsadasdas</textarea>
            </p>
            
            <!--
            	文件域 input type="file"
            -->
            <p>
            	<input type="file" />
            </p>
            
            <!--
            	隐藏域 input type="hidden"
            	不希望用户看到，但是程序处理时需要的数据，可以放在隐藏域中
            -->
            <p>
            	隐藏域：<input type="hidden" />
            </p>
            
            <!--
            	下拉列表框<select>
            	下拉列表中的每一个子选项
            -->
            <p>
            	<select>
            		<option>====请选择====</option>
            		<option>江苏</option>
            		<option>浙江</option>
            		<option>上海</option>
            	</select>
            </p>
            <!--
            	select标签的multiple="multiple"属性
            	将原本通过箭头点击的方式显示改为一次性就显示若干个
            	并且可以一次性选中多项
            -->
            <p>
            	<select multiple="multiple">
            		<option>====请选择====</option>
            		<option>江苏</option>
            		<option>浙江</option>
            		<option>上海</option>
            		<option>山东</option>
            		<option>安徽</option>
            		<option>福建</option>
            	</select>
            </p>
            <!--
            	按钮 button   	HTML5新特性
            	1、和input按钮的第一个区别：
            		input要显示的文本在value属性中
            		button要显示的文本在标签之间
            		button如果没有指定类型，默认就是一个提交按钮
            	
            	2、和input按钮的第二个区别：
            		input按钮中的文本只能是普通文本
            		button标签之间写的任何html内容都能作为按钮的外观
            -->
            <p>
            	<button type="submit">提交按钮</button>
            	<button type="reset">重置按钮</button>
            	<button type="button" onclick="alert('普通button按钮');">普通按钮</button>
            	
            	<button>
            		<h1>标题按钮</h1>
            	</button>
            </p>
			
			<!--
				表单元素中的两个常用属性
				(1)前端：都只能看不能改
				(2)后端：readonly的控件值可以获取到，但是disabled不行
			-->
			<input disabled="disabled" value="默认值"/>
			<input readonly="readonly" value="默认值"/>
		</form>
		
	
	</body>
</html>

三.表单的基本结构

<form action="http://www.sohu.com" method="post">

……

</form>

action：指定提交后，由服务器上哪个处理程序处理，是一个路径，绝对路径，相对路径都可以。

method：指定向服务器提交的方法，一般为post或get方法, post方法比较安全，且能传输的数据量更大

四.表单的基本语法

<form action="login.aspx" method="post">

<p>用户名：

<input name="username" type="text"/>

</p>

<p>密 码：

<input name="pwd" type="password" />

</p>

<p>

<input type="submit" name="btn" value="提交" />

</p>

</form>

表单输入元素：input，当然也有其它的。

五.表单的执行原理（了解即可）

客户端（比如：我们打开的网页）请求登陆，填写表单信息，点击某按钮提交→数据传输到服务器，服务器会执行后端代码（后续会讲到），验证发来的信息，给出反馈（比如：通过；不通过）→客户端接收服务器的反馈，在页面上显示出来。

举个例子：

一个客户去某店买东西，客户（客户端）说我是你们会员，提供了姓名，手机号（这就类似填写表单的一个过程），然后店员（服务器）根据你提供的姓名和手机号，查到了你的会员信息，然后告诉你（反馈）已经查到，确实是本店会员。

通过举例，希望大家能通俗的了解表单的执行原理。

六.表单的元素

1.文本框

<input name="userName" type="text" value="123456" maxlength="5">

type：指定input的类型，如果为text表示普通文本框

value：文本框中的初始值

maxlength：最大能够输入的字数

name：name属性对于表单元素的作用，在于让服务器能够得到表单元素中输入的值，例如request.getParameter(“userName”)，之后的文章中会讲。

还有一个有用的placeholder属性，同样为初始值，区别于value，以灰色显示，且在输入内容时会自动被所输入的内容覆盖，清空输入内容后，又会显示出来，类似于一个提醒的作用。可自行尝试下。

2.密码框

<input name="userPwd" type="password" value="" maxlength="4">

type：指定input的类型，如果为password表示密码框

value：密码框中的初始值

maxlength：最大能够输入的字数

name：name属性对于表单元素的作用，在于让服务器能够得到表单元素中输入的值，例如request.getParameter(“userPwd”)，之后的文章中会讲。

3.按钮

<input type="reset" value="重填"/>

<input type="submit" value="提交" />

<input type="button" value="普通按钮" />

<input type="image" src="images/login.gif" value="图片按钮" />

type的取值不同代表不同类型的按钮，对于提交按钮会提交表单，重置按钮可以清空表单内容，但是其它类型的按钮，具体实现什么功能，只能通过后面学习脚本以后才能进行处理，value属性表示按钮上显示的文本，name属性的主要作用体现在后期脚本的绑定上

4.button按钮

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

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

写法：<button type="button">开</button>

5.单选按钮

<input name="gen" type="radio" value="男" checked="checked">

<input name="gen" type="radio" value="女" >

input的type取值为radio时，表示单选按钮

name属性除了能够让服务器获取选中的单选按钮信息外，还能将单选按钮进行分组

checked=”checked”表示选中状态，同一组单选按钮，其中选中状态的按钮最多只有一个

value表示最后服务端真正能获取到的值。并不是显示在单选按钮外边的内容。

还可以在外边嵌套<label></label>标签提升用户体验

6.复选框

<input type="checkbox" name="hobby1" value="sports" />

<input type="checkbox" name="hobby2" value="talk" checked="checked" />

<input type="checkbox" name="hobby3" value="play" />

input的type取值为checkbox时，表示复选框

name属性除了能够让服务器获取选中的复选框信息外，还能将复选框进行分组

checked=”checked”表示选中状态，同一组复选框，其中，选中状态的可以任意多个

value表示最后服务端真正能获取到的值。并不是显示在复选框外边的内容。

还可以在外边嵌套<label></label>标签提升用户体验

7.文本域

用来输入多行文本

写法：<textarea name="" cols="10" rows="20">12345</textarea>

name:用于在服务端获取数据时使用

cols：列数

rows：行数

值得注意的是：textarea中的内容应该写在标签之间，而不是value属性中！！！如上述写法中，“12345”即为多行文本框的内容。

8.文件域

<input type="file" name="uploadFile">

<input type="submit" name="upload" value="上传" />

当input的type为file时，表示文件上传按钮，一般会和提交按钮一起使用，此处不做太多说明，文件具体上传时需要学习服务端编程后方可掌握。

9.列表框

<select name="bmon">

<option value="" selected="selected">

[选择月份]

</option>

<option value="0">一月</option>

<option value="1">二月</option>

<option value="2">三月</option>

<option value="3">四月</option>

</select>

select：name属性，列表名称，用于服务器获取选中项

option是列表下面的每一个小项，value属性是服务器能获取到的具体的值，<option>标签之间是呈现给用户的选项信息，selected="selected"表示该项选中。

10.隐藏域

方便“记住”一些供服务端使用的信息、但又不希望客户看到的数据

<input type="hidden" name="…." value="…" />

主要就是type属性为hidden，其他属性与input框的属性填写相同。

七.表单中的一些属性

只读和禁用属性

readonly：希望某个框内的内容只允许用户看，不能修改

disabled：因没达到使用的条件，限制用户使用

<textarea readonly="readonly"></textarea>

<input type="text" readonly="readonly" />

<input type="text" disabled="disabled" />

上面的属性也可用于其它表单元素，达到只读或禁用的效果。

form 表单中disabled属性的元素不参与表单提交，也就是表单submit后，后台无法获取有disabled属性元素的值。

八.HTML5 新的 input 类型及支持的浏览器

九.音频标签

写法：

<audio src="Nightwish-She Is My Sin.mp3" controls="controls" autoplay="autoplay" loop="loop">

暂不支持此标签

</audio>

src：要播放的音频的 URL。

autoplay：如果出现该属性，则音频在就绪后马上播放。

loop：如果出现该属性，则每当音频结束时重新开始播放。

controls：若出现该属性，则向用户显示控件，比如播放按钮。

暂不支持此标签，是在你使用的浏览器，不支持的情况下显示。

具体浏览器的兼容性，见下图

十.视频标签

写法：

<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls" autoplay="autoplay" loop="loop" width="1000px">

您的浏览器不支持video标签

</video>

src：要播放的视频的 URL。

controls="controls" 若出现该属性，则向用户显示控件，比如播放按钮。

loop="loop" 循环播放

autoplay="autoplay" 自动播放

width、height:指定视频窗口的大小

相比音频标签，可以添加width和height指定视频窗口大小