用html表单怎么做成实现,如何利用html和css来实现注册表单的简单实例

效果总览：

具体代码实现

提交用户信息

body, p, td, input {font-size:12px; margin:0px; }

select {height:20px; width:300px; }

.title {font-size: 16px; padding: 10px; width:80%; }

.text {height:20px; width:300px; border:1px solid #AAAAAA; }

.line {margin:2px; }

.leftp {width:110px; float:left; height:22px; line-height:22px; font-weight:bold; }

.rightp {height:42px; }

.button {

color:#fff;

font-weight:bold;

font-size: 11px;

text-align:center;

padding:.17em 0 .2em .17em;

border-style:solid;

border-width:1px;

border-color:#9cf #159 #159 #9cf;

background:#69c url(images/bg-btn-blue.gif) repeat-x;

}

填写用户信息

请填写您的姓名：

请填写您的密码：

请再次输入密码：

请选择性别：

男

女

请输入年龄：

请输入生日：

格式："yyyy-mm-dd"

请选择您的爱好

音乐影视

外出旅游

社交活动

请选择省市：

---请选择省份---

海淀区

朝阳区

东城区

西城区

济南市

青岛市

潍坊市

自我描述：

请填写其他资料...

代码分析

文档类型声明

这段代码叫做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。这里说明你用的是"HTML 4.01"版本,类似的还有:

这里声明本文档使用的是XHTML 1.0版本.

HTML

如果需要在文档中引用样式表，应该定义外部的样式表，然后使用 来连接这个样式表。

提示：在 HTML5 中，所有元素都不支持 style 属性，如需为一个元素添加样式，请在 style 元素中使用 scoped 属性。

注释：如果没有定义 scoped 属性，则

h1 {color: blue}

h2 {color: red}

HTML

标签HTML legend 标签

如果一个页面的表单项太多,我们最好把它们分组显示,就像使用p标签分开段落一样,可以使用fieldset与legend标签对表单内容分组.

fieldset 标签 -- 对表单进行分组

fieldset标签是成对出现的,以

开始,以结束

一个表单可以有多个

,每对为一组,每组内容的描述可以使用legend标签说明

属性:Common -- 一般属性