嵌入式linux 项目开发（一）——HTML编程
本文主要讲解HTML的基础知识，主要是涉及嵌入式web服务器中数据交互HTML页面表单制作部分。
一、HTML简介
HTML是Hypertext Marked Language的简称，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。HTML是由WEB的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种标记式语言，是标准通用化标记语言SGML的应用。
用HTML编写的超文本文档称为HTML文档，HTML文档能独立于各种操作系统平台（如UNIX，WINDOWS等）。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML一种能够被广泛理解的语言，“翻译“成可以识别的信息，即所有的计算机都能够理解的一种用于出版的“母语”。
HTML( 超文件标记语言 ) 是一种建立网页文件的语言，透过标记式的指令(Tag)，将影像、声音、图片、文字、动画、影视等内容显示出来。HTML可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。 HTTP超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
HTML文档的文件后缀“.html”必须明确指定，一般来说，web服务器的默认的首页名称通常命名为index.htm或index.html。
二、HTML编程基础
HTML语言是一种超文本的标记语言，通过构建一套标记符号和语法规则，将所要显示出来的文字、图象、声音等要素按照一定的标准要求排放，形成一定的标题、段落、列表等单元。
1、超文本标记
超文本标记用带尖括号“＜”和“＞”表示，一般成对出现，用带斜杠的元素表示结束。如：＜html＞和＜/html＞。部分标记只有起始标记而没有结束标记，如：＜BR＞，在网页中表示引入一个换行动作；有些标记可以省略，如：段落的结束标记＜/P＞就可以省略。
超文本标记忽略大小写，如：＜HTML＞和＜html＞是等效的，但其中实体内容的名称是要区分大小写，如"&NAME"和"&name"是表示不同的实体。
2、HTML的结构
HTML的结构包括头部head和主体body两大部分，头部描述浏览器所需的信息，主体包含所需要说明的具体内容。
HTML头结构实例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>yourtitle</title>
</head>
3、HTML语言的元素
整个网页页面的内容由特定内容形成的许多单元构成的，每个单元由三部分组成：起始标记、单元内容、结束标记。
起始标记：起始标记由“＜”和“＞”来界定,单元名称和属性由起始标记给出
单元内容：中间的部分是单元的内容部分
结束标记：结束标记由“＜/”和“＞”来界定，比起始标志多一斜杠
例如：标题栏单元的标记形式
＜TITLE＞hello world＜/TITLE＞
其中＜TITLE＞和＜/TITLE＞是起始标记和结束标记，“hello world”是单元的基本内容。
HTML基本元素如下：
（HTML Elements Referencea）
表示超链接的起始或目的位置。
acronym
表示取首字母的缩写词。
address
表示特定信息，如地址、签名、作者、文档信息。
applet
在页面上放置可执行内容。
area
定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。
b
指定文本应以粗体显示。（不建议使用）
base
指定一个显式 URL 用于解析对于外部源的链接和引用，如图像和样式表。
basefont
设置显示文本时作为默认字体的基础字体值。（不建议使用）
bdo
允许作者为选定文本片断禁用双向法则。
bgsound
使页面能够带有背景声音或配音。
big
指定所含文本要以比当前字体稍大的字体显示。
blockquote
表示文本中的一段引用语。
body
指明文档主体的开始和结束。
br
插入一个换行符。
button
指定一个容器，其中所含的 HTML 会被显示为一个按钮。
caption
表格的标题，对表格的简单描述。
center
将指定文本和图像居中显示。（不建议使用）
cite
用斜体显示标明引文。（不建议使用）
code
表示代码范例。
col
说明基于列的表格缺省属性。
colgroup
说明表格中一列或一组列的缺省属性。
comment
表示不可见的注释。防止所包含的文本或者HTML源代码被浏览器解析和显示。
dd
在定义列表中表示定义。定义通常在定义列表中缩进显示。
del
表示文本已经从文档中删除。
dfn
表示术语的定义。（不建议使用）
dir
表示目录列表。（不建议使用）
div
表示一块可显示 HTML 的区域
dl
表示定义列表。
dt
在定义列表中表示定义术语。
em
强调文本，通常以斜体显示。
embed
允许嵌入任何类型的文档。
fieldset
在字段集包含的文本和其它元素外面画一个方框。
font
用于说明所包含文本的新字体、大小和颜色。
form
说明所包含的控件是某个表单的组成部分。
frame
在 FRAMESET 元素内表示单个框架。
frameset
表示一个框架集，用于组织多个框架和嵌套框架集。
head
提供了关于文档的无序信息集合。
h1-h6
6个标签，以标题样式显示文本，h1最大，h6最小。
hr
水平线。
html
表明文档包含 HTML 元素。
i
指定文本应以斜体显示。（不建议使用）
iframe
创建内嵌漂浮框架。
img
在文档中嵌入图像或视频片断。
input
创建各种表单输入控件。
input type=button
创建按钮控件。
input type=checkbox
创建复选框控件。
input type=file
创建文件上载控件，控件带有一个文本框和一个浏览按钮。
input type=hidden
传输关于客户/服务器交互的状态信息。
input type=image
创建一个图像控件，控件被点击后将导致表单立即被提交。
input type=password
创建与 INPUT type=text 控件类似的单行文本输入控件，不过并不显示用户输入的内容。
input type=radio
创建单选钮控件。
input type=reset
创建一个按钮，点击该按钮后，将重置表单控件回其初始值。
input type=submit
创建一个按钮，点击该按钮后，即提交表单。
input type=text
创建一个单行的文本输入控件。
ins
表示插入到文档中的文本。
isindex
使浏览器显示一个对话框，提示用户输入单行文本。（不建议使用）
kbd
以定宽字体显示文本。（不建议使用）
label
为页面上的其它元素指定标签。
legend
在 fieldSet 对象绘制的方框内插入一个标题。
li
表示列表中的一个项目。
link
允许当前文档和外部文档建立连接。
listing
以固定宽度的字体显示文本。
map
包含客户端图像映射的坐标数据。
marqueee
创建一个滚动的文本字幕。（不建议使用）
menu
创建一个无序列表。
meta
向服务器和客户端传达关于文档的隐藏信息。
nobr
不换行显示文本。
noframes
包含对于那些不支持 FRAMESET 元素的浏览器使用的 HTML。
noscript
指定在不支持脚本的浏览器中显示的 HTML。
object
在 HTML 页面中插入对象。
ol
编制排序列表。
optgroup
允许作者对 select 元素中的选项进行逻辑分组。
option
表示 SELECT 元素中的一个选项。
p
表示一段。
param
设置 APPLET、EMBED 或 OBJECT 元素的属性初始值。
pre
以固定宽度字体显示文本。
q
分离文本中的引语。
s
带删除线方式显示文本。（不建议使用）
samp
表示代码范例。
script
指定由脚本引擎解释的页面中的脚本。
select
表示一个列表框或者一个下拉框。
small
指定内含文本要以比当前字体稍小的字体显示。
span
指定内嵌文本容器。
strike
带删除线显示文本。（不建议使用）
strong
以粗体显示文本。
style
指定页面的样式表。
sub
说明内含文本要以下标的形式显示，比当前字体稍小。
sup
说明内含文本要以上标的形式显示，比当前字体稍小。
table
说明所含内容组织成含有行和列的表格形式。
tbody
指明哪些行作为表格的主体。
td
指定表格中的单元格。
textarea
多行文本输入控件。
tfoot
指明哪些行作为表尾。
th
指定标题列。标题列将在单元格中居中并以粗体显示。
thead
指定哪些行作为表头。
title
文档的标题。
tr
指定表格中的一行。
tt
以固定宽度字体显示文本。（不建议使用）
u
带下划线显示文本。（不建议使用）
ul
表示不排序的项目列表。
var
定义程序变量，通常以斜体显示。
wbr
向一块 NOBR 文本中插入软换行。
4、HTML基本标签
基 本 标 签
创建一个HTML文档 <html></html>
设置文档标题以及其他不在WEB网页上显示的信息 <head></head>
设置文档的可见部分 <body></body>
标 题 标 签
将文档的题目放在标题栏中 <title></title>
文 档 整 体 属 性
设置背景颜色，使用名字或十六进制值 <body bgcolor=?>
设置文本文字颜色，使用名字或十六进制值 <body text=?>
设置链接颜色，使用名字或十六进制值 <body link=?>
设置已使用的链接的颜色，使用名字或十六进制值 <body vlink=?>
设置正在被击中的链接的颜色，使用名字或十六进制值 <body alink=?>
文 本 标 签
创建预格式化文本 <pre></pre>
创建最大的标题 <h1></h1>
创建最小的标题 <h6></h6>
创建黑体字 <b></b>
创建斜体字 <i></i>
创建打字机风格的字体 <tt></tt>
创建一个引用，通常是斜体 <cite></cite>
加重一个单词（通常是斜体加黑体） <em></em>
加重一个单词（通常是斜体加黑体） <strong></strong>
设置字体大小，从1到7 <font size=?></font>
设置字体的颜色，使用名字或十六进制值 <font color=?></font>
链 接
创建一个超链接 <a href="URL"></a>
创建一个自动发送电子邮件的链接 <a href="mailto:EMAIL">....</a>
创建一个位于文档内部的靶位 <a name="NAME"></a>
创建一个指向位于文档内部靶位的链接 <a href="#NAME"></a>
格 式 排 版
创建一个新的段落 <p>
将段落按左、中、右对齐 <p align=?>
插入一个回车换行符 <br>
从两边缩进文本 <blockquote>
</blockquote>
创建一个定义列表 <dl></dl>
放在每个定义术语词之前 <dt>
放在每个定义之前 <dd>
创建一个标有数字的列表 <ol></ol>
放在每个数字列表项之前，并加上一个数字 <li>
创建一个标有圆点的列表 <ul></ul>
放在每个圆点列表项之前，并加上一个圆点 <li>
一个用来排版大块HTML段落的标签，也用于格式化表 <div align=?>
图 形 元 素
添加一个图像 <img src="name">
排列对齐一个图像：左中右或上中下 <img src="name" align=?>
设置围绕一个图像的边框的大小 <img src="name" border=?>
加入一条水平线 <hr>
设置水平线的大小（高度） <hr size=?>
设置水平线的宽度（百分比或绝对像素点） <hr width=?>
创建一个没有阴影的水平线 <hr noshade>
表 格
创建一个表格 <table></table>
开始表格中的每一行 <tr></tr>
开始一行中的每一个格子 <td></td>
设置表格头：一个通常使用黑体居中文字的格子 <th></th>
表格属性
设置围绕表格的边框的宽度 <table border=#>
设置表格格子之间空间的大小 <table cellspacing=#>
设置表格格子边框与其内部内容之间空间的大小 <table cellpadding=#>
设置表格的宽度－用绝对像素值或文档总宽度的百分比 <table width=# or %>
设置表格格子的水平对齐（左中右） <tr align=?> or <td align=?>
设置表格格子的垂直对齐（上中下） <tr valign=?> or <td valign=?>
设置一个表格格子应跨占的列数（缺省为1） <td colspan=#>
设置一个表格格子应跨占的行数（缺省为1） <td rowspan=#>
禁止表格格子内的内容自动断行回卷 <td nowrap>
窗 框
放在一个窗框文档的<body>标签之前，也可以嵌在其他窗框文档中 <frameset></frameset>
定义一个窗框内的行数，可以使用绝对像素值或高度的百分比 <frameset rows="value,value">
定义一个窗框内的列数，可以使用绝对像素值或宽度的百分比 <frameset cols="value,value">
定义一个窗框内的单一窗或窗区域 <frame>
定义在不支持窗框的浏览器中显示什么提示 <noframes></noframes>
窗 框 属 性
规定窗框内显示什么HTML文档 <frame src="URL">
命名窗框或区域以便别的窗框可以指向它 <frame name="name">
定义窗框左右边缘的空白大小，必须大于等于1 <frame marginwidth=#>
定义窗框上下边缘的空白大小，必须大于等于1 <frame marginheight=#>
设置窗框是否有滚动栏，其值可以是"yes","no","auto"，缺省时一般为"auto" <frame scrolling=VALUE>
禁止用户调整一个窗框的大小 <frame noresize>
表 单
对于功能性的表单，一般需要运行一个CGI小程序，HTML仅仅是产生表单的表面样子。
创建所有表单 <form></form>
创建一个滚动菜单，size设置在需要滚动前可以看到的表单项数目 <select multiple name="NAME" size=?></select>
设置每个表单项的内容 <option>
创建一个下拉菜单 <select name="NAME"></select>
设置每个菜单项的内容 <option>
创建一个文本框区域，列的数目设置宽度，行的数目设置高度 <textarea name="NAME" cols=40 rows=8></textarea>
创建一个复选框，文字在标签后面 <input type="checkbox" name="NAME">
创建一个单选框，文字在标签后面 <input type="radio" name="NAME" value="x">
创建一个单行文本输入区域，size设置以字符计的宽度 <input type=text name="foo" size=20>
创建一个submit（提交）按钮 <input type="submit" value="NAME">
创建一个使用图象的submit（提交）按钮 <input type="image" border=0 name="NAME" src="name.gif">
创建一个reset（重置）按钮 <input type="reset">
三、HTML基础控件
主要介绍 input、select、textarea、label、fieldset、ul、ol、li等标签
1、<input>标签
<input>标签主要用于收集用户信息，可根据不同的type属性值，拥有多种形式。
type属性：
text：文本区域
readonly属性：是否只读。
password：密码区域，输入的文本以‘*‘展示
checkbox：复选框
checked属性：是否选中；
radio：单选框；
name属性：指定多个单选框的在一个区域里进行单选操作
reset：重置当前<form>表单里所有标签到初始化状态(如清除文本区域内容)
submit：提交当前<form>表单信息到指定页面
button：普通按钮
value属性：button按钮显示的文本
file：文件选择标签
hide：隐藏区域，可以把一些不展示给用户，而自己使用的信息存放于此
image：图片区域
src属性：指定图片存放的路径；
title属性：鼠标移到图上显示的文本；
alt：图片加载失败或关闭时，显示的文本；
2、<select>标签
<select>标签可创建单选或多选菜单。
size {int}：设置下拉列表尺寸。默认的为combox样式；大于1时，就是listbox样式
multiple {boolean}：是否多项选择。若为多选，按住Ctrl+左键可进行多选操作。
item子项：
<optgroup>标签：定义选择项的类别，不能被选中。
label {string} 属性：类别展示的名称
title {string} 属性：鼠标移到选择项上去，要展示的信息
<option>标签：定义可选的项目
vlaue {string} 属性：选择项具体的名称
title {string} 属性：鼠标移到选择项上去，要展示的信息
实例：
<select id="province" multiple=multiple size="4" >
<optgroup label="直辖市" ></optgroup>
<option value="bj" title="北京市" >北京</option>
<option value="sh">上海</option>
<optgroup label="省市" ></optgroup>
<option value="zj">浙江</option>
<option value="fj">福建</option>
</select>
3、<textarea>标签
<textarea>标签用于多行文本区域，可以通过cols和rows属性来设定 textarea的尺寸。
rows {int}：表示显示的行数。
cols {int}：表示显示的列数。
readonly {boolean}：是否只读。
4、<label>标签
<label>标签是一个展示文本框。
for {elementID}：关联对应的控件id；当点击此label标签时，绑定id的控件会获取焦点。
<table>
<tr>
<td><label for=‘username‘>姓名：</label></td>
<td><input type="text" id=‘username‘/></td>
</tr>
<tr>
<td><label for=‘userpwd‘>密码：</label></td>
<td><input type="password" id=‘userpwd‘ /></td>
</tr>
</table>
5、<fieldset>标签
<fieldset>标签用于将控件组合成一个组
<legend></legend>：表示抬头的名称。
<fieldset style=‘width:130px‘ >
<legend>性别</legend>
<input type="radio" name=‘sex‘ value=‘boy‘ />男
<input type="radio" name=‘sex‘ value=‘girl‘ />女
</fieldset>
6、列表标签
ul ：unordered list （无序列表）
ol ：ordered list （有序列表））
li ：list item（列表项目），基于上面2个列表子项目。
type {string}：定义了<li> 标签前面的符号样式。
ul的type 有：circle 空心圆，disc 实心圆，square 实心正方形， none ：前面无符号;
ol的type 有：1 ：表示有序的1,2,3； a ：表示有序的a，b，c；i ：罗马数字i,ii,iii；虽然还可以定义为：circle、disc、square、none但现实都为1,2,3等序列；
实例：
<ul type=circle>
<li>ul1</li>
<li>ul2</li>
<li>ul3</li>
</ul>
<ol type=1>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
四、HTML框架控件
iframe 和 frameset都用于html页面的框架布局。
1、<iframe> 标签
iframe 是个内联框架，是在页面里生成个内部框架。
属性：
frameborder {int}：是否显示框架的边框；
src {URL}：指定一个资源(如网页、图片)的url；
scrolling {boolean}：是否显示框架的滚动条；
width {int}：定义iframe的宽度；
height {int}：定义iframe的高度；
实例：
<body>
<h3>HTML标签演示</h3>
<iframe src=1.1-ShowHtml.htm ></iframe>
</body>
注意最好使用src指定源页面
2、<frameset> 标签
frameset 定义一个框架集，包含多个子框架，每个框架都有独立的文档。
使用格式：
<frameset >
<frame src=a.htm />
<frame src=b.htm />
<noframes></noframes>
</frameset>
<frame src=a.htm /> ：子框架
<noframes></noframes>：浏览器不支持此框架的时显示的内容。
frameset 属性：
rows ：表示子框架按行的样式布局。以2个子框架为例：rows="30%,*" ，表示第一个框架占整个页面30%的高度，第二个占剩下的；
cols ：表示子框架按列的样式布局。以2个子框架为例：cols="30%,*" ，表示第一个框架占整个页面30%的长度，第二个占剩下的；
noresize="noresize" ：表示不调整子框架的范围。
frame 属性：
src ：指向一个资源(如页面、图片等)的URL；
name ：指定框架的名称，以便进行框架间的操作。
实例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>frameset 演示</title>
</head>
<frameset rows="30%,*" noresize="noresize">
<frame src=DateGrid.htm name="frm1" />
<frame src=Dialog.htm name="frm2"/>
<noframes></noframes>
</frameset>
</html>
使用frameset标签时，注意要去掉外层的<body></body>标签
五、HTML的变量
1、name
指定标签的名称。name属性的值，在当前page页面中并非唯一性。
使用格式：
<input type="text" name="username" />
使用场合：
form表单：name可作为转递给服务器表单列表的变量名；如上面的传到服务器的名称为：username=‘text的值‘。
input type=‘radio‘单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作。
<input type="radio" name=‘sex‘/>男
<input type="radio" name=‘sex‘/>女
快速获取一组name相同的标签：获取拥有相同name的标签，一起进行操作，如:更改属性、注册事件等。
function changtxtcolor() {
var txts = document.getElementsByName(‘txtcolor‘); //获取所有name=txtcolor 的标签
for (var i = 0; i < txts.length; i++) { //循环遍历标签，并把背景色改为red
txts[i].style.backgroundColor = ‘red‘;
}
}
2、id
指定标签的唯一标识。id属性的值，在当前的page页面要是唯一的。
使用格式：
<input type=password id="userpwd" />
使用场合：
根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)
用于充当label标签for属性的值：示例：<label for=‘userid‘>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点。
3、class
指定标签的类名。可以把多个类，放在一个class属性里，但必须用空格隔开；如：class=‘btnsubmit btnopen‘
使用格式：
<input type=button />
使用场合：
CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
六、HTML表单
1、<table> 标签
<table> 标签用于在HTML中定义表格布局。
使用格式：
<table>
<caption></caption>
<tr> <th></th></tr>
<tbody>
<tr><td></td></tr>
<tr><td></td><tr>
<tbody>
</table>
<caption></caption>：表头信息。
<tr></tr> ：定义一个表格行；
<th></th> ：定义一个表格头；若是纯文字，默认会以粗体的样式表现。
<tbody></tbody> ：可以理解为表格的内容区域，在Chrome、FF浏览器通过DOM进行表格动态插入行的时候，要使用这个。如果不进行DOM操作，可不用添加。
<td></td> ：定义一个单元格；
table 属性：
border ：定义表格的边框宽度，默认为0，即无边框。
title ：表格的提示信息，当鼠标移到表格上方时，所提示的信息。
th、td 属性：
colspan : 表示横向合并单元格
rowspan ：表示纵向合并单元格
实例：
<table border=0 title="测试">
<caption> 表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td><input type=text /></td>
<td><input type=text /></td>
</tr>
</table>
2、<form> 标签
HTML表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。
<form> 标签用于创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset和 label 元素 等。
表单的属性
action：规定当提交表单时，向何处发送表单数据。action取值为:第一，一个URL（绝对URL/相对URL），一般指向服务器端一个程序，程序接收到表单提交过来的数据（即表单元素值）作相应处理。
method：定义浏览器将表单中的数据提交给服务器处理程序的方式，from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。method的取值，最常用的是get和post。第一，使用get方式提交表单数据，Web浏览器会将各表单字段元素及其数据按照URL参数格式附在标签的action属性所指定的URL地址后面发送给Web服务器；由于URL的长度限制，使用get方式传送的数据量一般限制在1KB以下。第二，使用post方式，浏览器会将表单数据作为HTTP请求体的一部分发送给服务器。一般来说，使用post方式传送的数据量要比get方式传递的数据量大；根据HTML标准，如果处理表单的服务器程序不会改变服务器上存储的数据，则应采用 get方式（比如查询），如果表单处理的结果会引起服务器上存储的数据的变化，则应该采用post方式（比如增删改操作）。第三，其它方式（Head、 PUT、DELETE、TRACE 或 OPTIONS等）。
target： 规定在何处显示action属性中指定的URL所返回的结果。取值有_blank（在新窗口中打开）、_self（在相同的框架中打开，默认值）、 _parent（在父框架中打开）、_top（在整个窗口中打开）和framename（在指定的框架中打开）。
title：设置网站访问者的鼠标放在表单上的任意位置停留时，浏览器用小浮标显示的文本。
enctype：规定在发送到服务器之前应该如何对表单数据进行编码。取值：默认值为 "application/x-www-form-urlencoded"，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为ASCII HEX 值）；“multipart/form-data”：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。
name:表单的名称。注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，主要是为了方便客户端编程，而在css和javascript中使用的。
form实例：
<form enctype="multipart/form-data" action="ashx/login.ashx" method="post">
<table>
<tr>
<td><label for="txtname">账号：</label></td>
<td><input type="text" id="txtname" name="login_username" /></td>
</tr>
<tr>
<td><label for="txtpswd">密码：</label></td>
<td><input type="password" id="txtpswd" name="login_pswd" /></td>
</tr>
<tr>
<td colspan=2>
<input type="reset" />
<input type="submit" />
</td>
</tr>
</table>
</form>
七、HTML数据交互表单实例
使用表单制作一个提交个人信息的数据交互网页
<!doctype html> <head> <meta http-equiv="Content-Type" content="text/html "> <title>系统参数配置</title> </head> <body> <h3>配置选项</h3> <form enctype="multipart/form-data" action="cgi-bin/config.cgi" method="post"> <fieldset style=‘width:300px‘ > <table> <legend>个人信息</legend> <tr> <td><label for="name">姓名：</label></td> <td><input type="text" id="name" name="name" /></td> </tr> <tr> <td><label for="age">年龄：</label></td> <td><input type="text" id="age" name="age" /></td> </tr> <tr> <td><label for="sex">性别：</label></td> <td><input type="radio" name=‘sex‘ value=‘boy‘ />男 <input type="radio" name=‘sex‘ value=‘girl‘/>女</td> </tr> <tr> <td><label for="company">单位：</label></td> <td><input type="text" id="company" name="company" /></td> </tr> <tr> <td><label for="profession">职业：</label></td> <td><input type="text" id="profession" name="profession" /></td> </tr> <tr> <td><label for="idnumber">身份证号码：</label></td> <td><input type="text" id="idnumber" name="idnumber" /></td> </tr> <tr> <td><label for="qq">QQ码：</label></td> <td><input type="text" id="qq" name="QQ" /></td> </tr> <tr> <td><label for="email">Email：</label></td> <td><input type="text" id="email" name="email" /></td> </tr> <tr> <td><label for="telephone">联系电话:</label></td> <td><input type="text" id="telephone" name="telephone" /></td> </tr> <tr> <td> <center> <input type="submit" id="ok" name="ok" value="确定"/></td> </center> </td> </tr> </table> </fieldset> <br> </form> </body>