HTML网页设计(表单元素)
html课程设计题目
html课程设计题目
HTML课程设计题目可以有很多选择，以下是一些建议：
1. 简单网页设计：设计一个简单的个人网页，包括基本的HTML 标签和布局，例如标题、段落、列表、链接等。
2. 图片展示页面：设计一个图片展示页面，包括使用HTML标签插入图片、添加图片描述和链接等功能。
3. 表单设计：设计一个包含各种表单元素（文本框、复选框、单选按钮、下拉菜单等）的网页表单，实现用户输入和提交功能。
4. 多媒体页面：设计一个包含音频、视频或动画的网页，使用HTML标签嵌入音频或视频文件，并添加控制按钮和播放器样式。
5. 响应式网页设计：设计一个响应式网页，使其能够在不同屏幕尺寸下自动适应布局和样式，提供更好的用户体验。
6. 网页导航菜单：设计一个具有导航功能的网页，包括水平或垂直导航菜单，使用HTML和CSS实现菜单样式和交互效果。
7. CSS样式设计：设计一个网页，运用CSS样式实现各种布局、颜色、字体、背景等视觉效果，展示CSS在网页设计中的应用。
8. HTML5新特性应用：设计一个利用HTML5新特性（如Canvas 绘图、地理定位、本地存储等）的网页，展示HTML5提供的丰富功能和交互效果。
以上是一些常见的HTML课程设计题目，你可以根据教学要求和学生的实际情况选择适合的题目，帮助他们学习和掌握HTML的基本知识和应用技巧。
140701第5章 HTML5网页表单设计(定稿)
网页设计技术实用教程--从基础到前沿第5章HTML5网页表单设计（字数3万）参考文献：我chp6；陆chp4；格式类似我P73；目录5.1表单简介及应用案例5.2 表单主体设计---form 标记5.2表单主体设计（form）包括新增元素5.3表单输入域设计---input标记5.3 表单设计的相关属性包括新增属性input元素type属性的新增类型：电子邮件类型；搜索类型；URL类型；电话号码类型；数字类型；范围类型；日期类型；周类型；月份类型；时间类型；日期与时间类型；本地日期与时间类型；颜色类型；新增属性：form属性；formaction；formmethod；placeholder；autofocus；list；autocomplete；5.4 文本区与列表选择框设计--- textarea、select标记5.5标签与按钮设计---label、button标记5.6表单控件分组设计--- fieldset、legend标记5.7 HTML5表单设计前沿内容知识技术5.7.1 新增与改进的表单元素；HTML5表单新增与改进的元素5.7.2 新增与改进的表单属性；HTML5表单新增与改进的属性5.7.3 input域控件的type属性的新增与改进5.4 表单设计示例如果例子多，需要单独成节，可增加该节例子（见陆p46-59）按功能划分：input元素使用示例；form等属性示例；表单验证示例……5.8 使用DWCS5进行网页表单设计实例（薛凯7.3.5；对5.1节的案例用工具制作、设计）5.9本章小结5.10进阶学习5.11 思考与实践第5章HTML5表单设计本章导读：上一章我们学习了、了解了……网页中链接的设计。
而在网站注册或购物时不可或缺的元素就是表单，本章就引导大家读者学习表单的设计。
首先，通过一个案例的介绍，让大家领略了解表单在网站中的重要魅力作用，同时在读者建立起了对表单有了大概的初步感性认识印象后；接着通过理论与示例结合的方式，、详细具体讲解介绍表单主体及其内部各种标记和属性的知识；同时，紧跟技术的发展，讲述介绍HTML5表单设计前沿内容；如果有该节则加入此句有了在掌握了表单设计的基本知识、技术的理论储备准备之后，我们通过几个综合示例讲解表单设计中各种元素的实用方法，完成理论向实践的转变。
HTML制作表单
• name属性：文本框名称
• size属性：文本框长度
• maxlength属性：文本框最多输入字符数 • value属性：文本框中默认值
代码
示例
<input>——密码框
• 创建一个密码文本框
• <input type="password" name="名称" size="NB" maxlength="NB"/>
▪ value属性值：用户选中后，传送到服务器的值
▪ checked属性值：默认选中的单选项 ▪ 具有相同name的多个单选按钮称为单选按钮组，一次只能有 一项被选中
• 提交表单时，选中项的value和name被打包发送
代码
示例
<input>——复选按钮
• 创建复选按钮元素
▪ input type="checkbox" name="名称"value="复 选按钮的值" checked="checked"/>
• value属性值：指定按钮上显示文字，不指定，浏览器 采取默认显示（重置）
代码
示例
<input>——单选按钮
• 创建单选按钮元素
▪ <input type="radio" name="名称" value="单选按钮 的值" checked="checked"/>
▪ type属性：radio ▪ name属性值：单选按钮的控件名称
代码
网页设计HTML代码大全
ID=ID 唯一的ID
>
<BASE 定义文档的默认URL基准和默认目标框架(唯一)
HREF="/project/data/" 指定默认 URL 基准
TARGET="main" 指定默认的目标框架，单击连接时在默认框架显示
>
<META META标记符，包含了网页的元数据信息，
ALINK 设置活动连接（即当前选定的连接）的颜色
ONLOAD=Script 文档加载时执行脚本的事件
ONUNLOAD=Script 文档退出时执行脚本的事件
>
物理字符样式:
<HTML> html标记(开始标记符和结束标记符都可以省略)
<HEAD> 首部标记(开始标记符和结束标记符都可以省略)
<BODY 正文标记符(开始标记符和结束标记符都可以省略)
BGCOLOR="#RRGGBB" 背景颜色
<SMALL> </SMALL> 小字体
<STRIKE> </STRIKE> 删除线
<SUB> </SUB> 下标
<SUP> </SUP> 上标
FACE="宋体,黑体,楷体" 字体样式:
即"字体"，浏览器优先使用第一种字体，若系统中没有则使用第二种，依次类推，如果找不到匹配字体，浏览器将使用默认字体
<B> </B> 粗体
<BIG> </BIG> 大字体
table在html中的作用
table在html中的作用
在HTML中，table（表格）是一种用于展示和组织数据的标记
元素。
它可以将数据以行和列的形式进行排列，使得数据更易于理
解和比较。
表格在网页设计中有着广泛的应用，它可以用于各种场景，例如：
1. 数据展示，表格可以用来展示各种类型的数据，如统计数据、产品价格、学生成绩等。
通过表格的排列和对齐，用户可以更直观
地浏览和比较数据。
2. 布局和结构，表格可以用于网页的布局和结构化，将页面内
容划分为不同的区域。
通过设置表格的行和列，可以实现复杂的页
面布局，如导航菜单、网格布局等。
3. 表单设计，表格在HTML中也被广泛用于表单设计。
表格可
以用来创建用户输入数据的表单，如注册表单、调查问卷等。
通过
表格的行和列，可以将表单元素（如输入框、复选框、下拉菜单等）进行组织和排列，使用户更方便地填写表单。
4. 数据分析和报告，表格在数据分析和报告中起着关键的作用。
通过表格的排序、筛选和汇总功能，可以对大量数据进行分析和统计，生成可视化的报告和图表。
在HTML中，使用`<table>`元素来创建表格。
表格由`<table>`、`<tr>`（表格行）和`<td>`（表格数据）等标签组成。
`<th>`（表头）标签用于定义表格的列标题。
总结起来，HTML中的table元素可以用于展示数据、布局和结构、表单设计以及数据分析和报告等多个方面。
它是网页设计中不
可或缺的元素之一。
用表格为网页布局
表格布局的优点
简单易用
01
表格布局简单直观，容易上手，适合初学者使用。
结构清晰
02
表格能够清晰地展示页面内容，使页面结构化，便于阅读和理
解。
兼容性好
03
表格布局在各种浏览器中都有较好的兼容性，不易出现排版问
用表格为网页布局
目录
CONTENTS
• 表格布局的基本概念 • 表格布局的常见应用场景 • 使用表格进行网页布局的技巧 • 表格布局的未来发展 • 表格布局的实例分析
01 表格布局的基本概念
CHAPTE种使用HTML表格元素 来创建网页布局的方法。它通过将页 面内容组织成表格形式，实现页面的 结构化和排版。
腾讯问卷表单制作
腾讯问卷表单制作使用表格来构建问卷的结构和问题选项。
表格布局使得问卷结构清晰，易于填写和提交，提高了问卷的完成率和准 确性。
腾讯问卷表单制作的表格布局还支持多种表单元素，如单选框、复选框、 文本框等，以满足不同问卷的需求。
谢谢
THANKS
数据展示
数据对比
表格是展示数据对比的理想方式，可以将不 同数据列进行比较，方便用户快速了解数据 之间的差异。
数据汇总
表格可以用于数据汇总，将大量数据按照一定规则 进行分类和整理，以表格形式呈现，方便用户查看 和分析。
数据可视化
通过使用颜色、字体、边框等样式属性，可 以将表格数据以可视化的方式呈现，提高数 据的可读性和易用性。
加载页面，提高用户体验。
淘宝网首页的表格布局还结合了CSS样式，实现了美观的页面效
03
果。
新浪微博数据展示页
HTML网页设计参考手册
事实上，HTML是一种因特网上较常见的网页制作标注性语言，而并不能算做一种程序设计语言，因为它缺少程序设计语言所应有的特征。
HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。
1.1.2 HTML的结构概念一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML 元素。
在HTML中使用标签来分割并描述这些元素。
实际上可以说，HTML文件就是由各种HTML 元素和标签组成的。
一个HTML文件的基本结构如下：<html> 文件开始标记<head> 文件头开始的标记…文件头的内容</head> 文件头结束的标记<body> 文件主体开始的标记…文件主体的内容</body> 文件主体结束的标记</html> 文件结束标记从上面的代码结构可以看出，在HTML文件中，所有的标记都是相对应的，开头标记为< >，结束标记为</ >，在这两个标记中间添加内容。
有了标记作为文件的主干后，HTML文件中便可添加属性、数值、嵌套结构等各种类型的内容了。
1.1.3 HTML的标记既然HTML是超文本标记语言，那么可以想象其构成主要是通过各种标记来标示和排列各对象，通常由尖括号“<”、“>”以及其中所包容的标记元素组成。
例如，<head>与</head>就是一对标记，称为文件的头部标记，用来记录文档的相关信息。
在HTML中，所有的标记都是成对出现的，而结束标记总是在开始标记前增加一个“/”。
标记与标记之间还可以嵌套，也可以放置各种属性。
此外在源文件中，标记是不区分大小写的，因此在HTML 源程序中，<Head>与<HEAD>的写法都是正确的，而且其含义是相同的。
HTML定义了3种标记用于描述页面的整体结构。
页面结构标记不影响页面的显示效果，它们是帮助HTML工具对HTML文件进行解释和过滤的。
HTML5+CSS3网页设计基础-第九章-表单(2024版)
HTML5+CSS3网页设计基础
第9章 表单
第6页
9.1 表单标签
autocomplete：指定表单是否有自动完成功能。取值为on 时，表单有自动完成功能，即将表单控件输入的内容记录下来， 当再次输入时，会将输入的历史记录显示在一个下拉列表中， 以实现自动完成输入。取值为of时表单无自动完成功能。 参考示例：9-1-1.html
HTML5+CSS3网页设计基础
第9章 表单ຫໍສະໝຸດ 第15页9.2.3 其他表单元素
2. select元素 select元素用于创建单选或多选列表，当提交表单时，浏 览器会提交选定的项目。网页上经常看到的城市、出生年月等 下拉列表框就是用select定义的。下拉列表框需要使用 select 标签和option标签定义，格式如下。 <select name="下拉框名" size="行数"
HTML5+CSS3网页设计基础
第9章 表单
第21页
表单的技术。
HTML5+CSS3网页设计基础
第9章 表单
第9页
9.2.2 input元素及其属性
<input>元素是表单中最常见的元素，它必须嵌套在表单 标签中使用，用于定义一个用户的输入项。网页中常见的单 行文本框、单选按钮、复选框等都是通过它定义的
<input>元素的基本语法格式如下。 <input type=“输入类型” name=“控件名” value=“ 默认值” ……> type属性：指定 input元素的输入类型。 name属性：属性的值是相应程序中的变量名。 value属性：属性的值是默认输入值。
HTML5+CSS3网页设计基础
网页设计input的用法
网页设计input的用法一、input标签的基本介绍和用法在网页设计中，为了与用户进行交互并获取用户输入的信息，可以使用input 标签。
input标签是HTML语言中最常用、最基础的表单元素之一。
它可以创建多种类型的输入字段，根据不同的type属性值的设定，可以实现输入文本、数字、日期等各种形式的数据。
1.1 文本输入框最常见且普遍被使用的是文本输入框。
使用<input>元素时，默认展示一个单行文本框，并允许用户通过键盘输入文本信息。
例如，在登录页面中，我们通常会看到需要填写用户名和密码的文本输入框。
1.2 数字输入框除了文本输入框外，<input>元素还支持number类型。
该类型只允许用户输入数字，并且可以通过min和max属性来限制允许输入的数值范围。
1.3 日期选择器另一个常见的应用是日期选择器。
HTML5提供了date类型来支持直接选择日期。
在支持该功能的浏览器中，弹出日历供用户选择所需日期。
二、input标签属性及相关应用技巧在使用<input>元素时，除了type属性以外还有其他一些非常有用和重要的属性可以使得表单更加灵活且适应各种不同场景的要求。
2.1 required属性required属性用于标识某个输入字段是否为必填项，如果用户没有填写相关内容就提交表单，则会触发浏览器的默认提示信息。
此属性可以让开发者避免一些重要信息的遗漏，并提高数据的完整性和准确性。
2.2 placeholder属性placeholder属性用于在输入框未获得焦点时展示一段默认的提示文本。
这样可以帮助用户更好地理解需要输入的内容，并提供良好的用户体验。
2.3 pattern属性pattern属性可以使用正则表达式来对用户的输入进行限制和验证。
通过设定合适的正则表达式，我们可以检查并筛选出符合特定格式要求（如邮箱、手机号等）的输入值。
2.4 autocomplete属性autocomplete属性设置后，浏览器会自动保存已经填写过的数据，并在下次填写相同字段时自动显示历史记录。
网页设计中表单主要包含的元素
网页设计中表单主要包含的元素1.背景介绍表单元素是允许用户在表单中输入信息的元素。
随着时代的改变和互联网的发展，表单的使用越来越广泛。
2.知识剖析什么是表单表单在网页中主要负责数据采集功能。
一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
常用表单元素form：定义供用户输入的表单。
fieldset：定义域。
即输入区加有文字的边框。
legend：定义域的标题，即边框上的文字。
label：定义一个控制的标签。
如输入框前的文字，用以关联用户的选择。
input：定义输入域，常用。
可设置type属性，从而具有不同功能。
textarea：定义文本域（一个多行的输入控件），默认可通过鼠标拖动调整大小。
button：定义一个按钮。
select：定义一个选择列表，即下拉列表。
option：定义下拉列表中的选项。
属性解释：name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；cols属性定义多行文本框的宽度，单位是单个字符宽度；rows属性定义多行文本框的高度，单位是单个字符宽度；wrap属性定义输入内容大于文本域时显示的方式密码框：是一种特殊的文本域，用于输入密码。
当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
HTML网页设计(表单元素)
HTML网页设计（表单元素）1.什么是表单表单（form）是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成，所有这些都放在＜form＞标签在。
一个文档中可以包含多个表单，而且每个表单可以放置通常的主体内容（包括文字和图像在内）Form标签设计者可以将表单放在文档主体中的任何位置，但前提是将表单的缘故都放在＜form＞标签和＜/form＞结束标签之间。
2.表单元素在＜form＞标签中，可以包含以下5个标签。
Input标签对于大量通常的表单内元素，可以使用＜input＞标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。
虽然＜input＞标签中有许多属性，但对每个元素来说，只有type和name属性是必须的。
当然，根据指定的比哦啊单元素类型，也可以设置一些其他的＜input＞属性。
可以使用＜input＞标签中的name属性来为字段命名（表单提交到处理过程中使用的字段，这种字段的说明可以参阅前面介绍）。
从技术角度上讲，name属性的值是任意的一个字符串，但是我们建议最好采用没有嵌入空格或标点的字符串。
＜input＞标签中必须的type属文字域最有用也是最常见的表单输入元素时文字域，在浏览器窗口中显示为一行的空框，它接收用输入的一行信息，当你用户将表单提交给服务器时，这些信息就变成了元素值。
范例代码：密码域将type 属性值设置为password ,就可以创建一个密码域。
传统文本域的其他属性和语义也可以应用于密码域。
应用呢密码域时必须制定一个字段的名称，这样就可以为该段字段设置size 和maxlength 属性，并可以设置一个初见时的vlaue 。
范例代码：文件域（file ） 复选框（checked ） 单选框（ridio ） 普通按钮（button ）设置普通按钮（button ）代码：fU&WJ -bl57^4444」.■».I S-l.-L.■■■■■■■■JUJ<input nan»E="nijx"type=71submif value="^X </bcrdy>重置按钮（Reset ）Textarea 标签作为表单的一部分，＜textarea ＞标签可在用户浏览器中创建一个多行文字域，在此文本输入区内,用户几乎可以输入无线文字。
《HTML制作表格》课件
2023
REPORTING
THANKS
感谢观看
表格的间距和边距
单元格间距
设置单元格之间的间距，以像素为单 位。
行高和列宽
调整表格中行和列的高度和宽度，以 像素为单位。
单元格边距
设置单元格内部的边距，以像素为单 位。
表格的文字样式
字体类型
选择用于表格中文本的字 体类型。
字体大小
设置表格中文本的字体大 小，可以使用像素值或相 对单位。
字体颜色
设置表格中文本的颜色， 可以使用颜色名称、十六 进制或RGB值。
简洁明了、易于理解、符合网站主题风格 。
网站导航表格的HTML制作技巧
网站导航表格的动态效果
使用HTML的`<nav>`元素，结合CSS样式 进行布局和美化。
通过JavaScript实现动态导航菜单，如响应 式设计、下拉菜单等。
表单数据表格
表单数据表格的定义
01
表单数据表格用于展示表单中用户输入的数据，方便用户核对
01
02
03
边框宽度
定义表格边框的宽度，可 以使用像素值或相对单位 。
边框颜色
设置表格边框的颜色，可 以使用颜色名称、十六进 制或RGB值。
边框样式
选择边框的样式，如实线 、虚线、点线等。
表格的背景颜色
背景颜色
为表格设置背景颜色，可以使用 颜色名称、十六进制或RGB值。
背景图片
为表格添加背景图片，可以选择 图片的路径和大小。
响应式设计的优势
响应式设计可以使网页在不同设备上都能良好显示，提高用户体验。同 时，它还可以减少维护成本，因为只需要维护一套代码即可适应不同设 备的屏幕大小和分辨率。
html毕业设计
HTML毕业设计介绍HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。
在毕业设计中，使用HTML可以进行网页设计和开发，实现各种功能和效果。
本文将介绍HTML在毕业设计中的应用，并探讨相关的技术和实践方法。
HTML基础知识1. HTML概述HTML是一种标记语言，通过使用标签和属性来描述文档结构和内容。
HTML文档由多个元素构成，这些元素可以嵌套、组合和交互，从而形成复杂的网页结构。
2. HTML标签HTML标签是用于定义网页元素的关键字。
常用的HTML标签包括<html>、<head>、<body>、<div>、<p>等。
不同的标签具有不同的语义和功能，可以用于展示文本、图片、链接、表格、表单等。
3. HTML属性HTML属性用于为标签提供附加信息。
常用的HTML属性包括class、id、href、src 等。
通过使用属性，我们可以为元素设置样式、定义事件、指定链接地址等。
4. HTML文档结构一个典型的HTML文档由<!DOCTYPE>、<html>、<head>和<body>等标签组成。
<!DOCTYPE>用于声明文档类型，<html>定义HTML文档的根元素，<head>包含文档的元数据，<body>包含文档的主要内容。
HTML技术应用1. 网页布局HTML可以用于实现各种网页布局。
我们可以使用<div>和CSS来创建不同的区块，然后通过设置样式来控制布局、大小和位置。
另外，HTML5还引入了一些新的语义化元素，如<header>、<nav>、<aside>等，可以更加简洁和语义化地表示网页的结构。
2. 多媒体元素通过HTML的<img>、<video>、<audio>等标签，我们可以方便地在网页中嵌入图片、视频和音频。
HTML5+CSS3网页设计基础 第九章 表单
<fom>标签中常用属性的含义如下。
HTML5+CSS3网页设计基础 第9章 表单
第5页
9.1 表单标签
name属性：给定表单名称，表单命名之后就可以用脚本语
言(如 JavaScript或 VBScript)对它进行控制。
action属性：指定处理表单信息的服务器端应用程序。
method属性：指定表单数据的提交方式， method的值可
表9-1 input元素的相关属性
HTML5+CSS3网页设计基础
第9章 表单
第12页
9.2.2 input元素及其属性
表9-1 input元素的相关属性
HTML5+CSS3网页设计基础
第9章 表单
第13页
9.2.2 input元素及其属性
表9-1 input元素的相关属性
HTML5+CSS3网页设计基础
当再次输入时，会将输入的历史记录显示在一个下拉列表中，
以实现自动完成输入。取值为of时表单无自动完成功能。
参考示例：9-1-1.html
HTML5+CSS3网页设计基础
第9章 表单
第7页
9.2 表单元素
本节主要内容：
案例分析
input元素及其属性
其他表单元素 案例制作
HTML5+CSS3网页设计基础
HTML5+CSS3网页设计基础
第9章 表单
第17页
9.2.4 案例制作
制作完成演示案例:用户注册。 参考代码 9-2.html
HTML5+CSS3网页设计基础
第9章 表单
网页设计与制作（HTML+CSS+JavaScript）综合测试_（2）答案
《网页制作与设计》课程综合测试(2)（答案）一、单选题（每题3分，共30分）1．在下列描述表单控件元素中的列表元素语句中，是正确的，其中，cityList= document.getElementById(‘cityList’)。
A．得到列表的长度var listLength =cityList.options.length;B．选择列表中的第一项cityList.options[0].click();C．得到第一项的值var val = cityList.options[0].value;D．以上全部【答案】D2．网页的特征是。
A．HTML文档的基本特征——超文本B．标识语言，网页中不能没有标记（Tag）C．网页提供了一些措施以防在网上冲浪的过程中迷失方向D．网页实现了对原文档信息的无限补充或扩展【答案】 A3．设置围绕一个图像的边框的大小的标记是。
A．<img src="name" border=？></img>B．<img src="name" border=？>C．<img src="name" heigh=？>D．<img src="name" bordersize=？>【答案】 B4．截取字串函数substr和substring的使用方法是。
A．一样的B．不一样的C．只能用其中一种方法D．以上都不对【答案】 B5．以下标记中，用于定义一个单元格的是。
A．<td> </td>B．<tr>…</tr>C．<table>…</table>D．<caption>…</caption>【答案】 A6．下面对框架的说法错误的是。
A．框架页面把浏览器窗口切割成几个独立的部分B．设计框架页面时，<Frame>标记和<Frameset>标记用于定义框架网页的结构C．由于框架网页的出现，从根本上改变了HTML 文档的传统结构，因此在出现<Frameset>标记的文档中，将不再使用<Body>标记D．<FRAME>是用来划分框窗，每一窗框由一个<FRAMESET>标记所标示，<FRAMESET>必须在<FRAME>范围中使用【答案】 D7．下列代码能产生个输出。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML网页设计（表单元素）
1.什么是表单
表单(form)是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成，所有这些都放在<form>标签在。
一个文档中可以包含多个表单，而且每个表单可以放置通常的主体内容（包括文字和图像在内）
Form标签
设计者可以将表单放在文档主体中的任何位置，但前提是将表单的缘故都放在<form>标签和</form>结束标签之间。
2.表单元素
在<form>标签中，可以包含以下5个标签。
Input标签
对于大量通常的表单内元素，可以使用<input>标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。
虽然<input>标签中有许多属性，但对每个元素来说，只有type和name属性是必须的。
当然，根据指定的比哦啊单元素类型，也可以设置一些其
可以使用<input>标签中的name属性来为字段命名（表单提交到处理过程中使用的字段，这种字段的说明可以参阅前面介绍）。
从技术角度上讲，name属性的值是任意的一个字符串，但是我们建议最好采用没有嵌入空格或标点的字符串。
<input>标签中必须的type属性可以用来选择控件的类型，其属性值如下表所示。
最有用也是最常见的表单输入元素时文字域，在浏览器窗口中显示为一行的空框，它接收用输入的一行信息，当你用户将表单提交给服务器时，这些信息就变成了元素值。
范例代码：
密码域
将type属性值设置为password，就可以创建一个密码域。
传统文本域的其他属性和语义也可以应用于密码域。
应用呢密码域时必须制定一个字段的名称，这样就可以为该段字段设置size和maxlength属性，并可以设置一个初见时的vlaue。
范例代码：
文件域（file）
复选框（checked）
单选框（ridio）
普通按钮（button）
设置普通按钮（button）代码：
重置按钮（Reset）
Textarea标签
作为表单的一部分，<textarea>标签可在用户浏览器中创建一个多行文字域，在此文本输入区内，用户几乎可以输入无线文字。
提交表单之后后，浏览器将所有行中的文字都收集起来，行间距用回车/换行符分隔，并将它们作为表单元素的值发送给服务器，这个值需要使用
在<.textarea>标签及其结束标签</textarea>之间可以包括纯文本，它的默认文本必须是纯文本（没有标签或其他特殊元素）。
Select标签
<select>提供了两种简洁的选择：下拉菜单和下拉列表。
将<option>标签表的条目放到表单的<select>标签中，这样接创建了一个选项下拉式菜单。
与其他表单标签一样，name属性在这里也是必需的，它将<select>选项提交给服务器时，
如果希望一次运行选择多个选项的话，可以在<select>标签中加入multip属性，这样可以让<secect>元素像（input type==checked）元素那样起作用。
如果没有指定multiple，那么一次只能选定一个选项，如同单选按钮组那样。
Size（大小）属性决定了用户一次性可以看见多少个选项。
Size的值应该是一个正整数，没有指定size值时，默认值是1、当size=1时，如果没有指定multiple，了浏览器通常会将<select>列表显示成一个弹出式菜单；当size的值超过1或者指定了multiple属性，<select>会显示为以个滚动列表。
Option标签
使用<option>标签可以定义一个<select>表单控件中的每个条目。
浏览器将<option>标签这个的内容作为<select>标签的菜单或下拉列表中的一个元素显示。
这样其内容只能是纯文本，使用value属性可以为每一个选项设置一个值，当用户选中该选项时，浏览器会将其发发送给服务器。
默认情况下，所有多选的,<select>标签中的选项都是未选中状态，因此当客户端想服务器提交表单时，这些选项不会包括在参数列表中。
<option>标签中包括selected属性后，就可以预选选定一个或多个选项，随后用户可以再取消选择，selected属性的HTML版本没有值，如果没有任何选项被预选选定，那么单选的<select>标签会预先选择第一个选项。
范例代码：
<body>
<select name="mjx" multiple="multiple" size="2">
<option selected="selected">请选择</option>
<optgroup label="选项组1">
<option value="购物">购物</option>
<option value="吃喝">吃喝</option>
<option value="保健">保健</option>
<option value="健身">健身</option>
</optgroup>
<optgroup label="选项组2">
<option value="教育">教育</option>
<option value="服务">服务</option>
<option value="娱乐">娱乐</option>
<option value="其他">其他</option>
</optgroup>
</select>
</body>
</html>
Optgroup标签
比哦啊单中的选项菜单有可能非常长，这使得它们很难显示和使用。
这种情况下，可以将一些相关的选项分组，然后将这些\组作为一组嵌套的层叠式菜单呈现给用户。
能保证菜单在不同的显示情况下都能显示出啦。
Label标签
使用label标签可以定义表单控制间的关系（如一个文本输入字段和一个或多个文本标记之
范例代码：
<body>
<label for="a">
<input name="mjx" type="radio" value="mjx" checked id="a" />10000-50000 </label>
<label for="b">
<input name="mjx1" type="radio" id="b" />50000-100000
</label>
<label for="c">
<input name="mjx2" type="radio" id="c" />100000以上
</label>
</body>
</html>。