fieldset——一个不常用的HTML标签

一个不常用的HTML标签fieldset，不过我觉得比较有意思，其语法如下：

<fieldset>

<legend>fieldset名称</legend>

<!-- 加入你的内容 -->

</fieldset>

下面是一个代码示例：

<center>

<fieldset style=" width:300px">

<legend>用户登陆</legend>

<form method="post">

帐号：<input ></input>

<br><br>

密码：<input type="password" ></input>

<br><br>

<input type="submit" value="登陆" ></input>

  

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

</form>

</fieldset>

</center>

代码的实际效果如下：

用户登陆
帐号：

密码：

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

此标签是成对出现的,以

<fieldset>

开始,以

</fieldset>

结束
一个表单可以有多个

<fieldset>

,每对

<fieldset>

为一组,每组的内容描述可以使用

<legend>

说明

<form

action

=

"http://www.dreamdu.com/dreamdu.php"

method

=

"post"

enctype

=

"multipart/form-data"

id

=

"dreamduform"

>

<fieldset>

<legend>

用户名与密码:

</legend>

<input

name

=

"hiddenField"

type

=

"hidden"

value

=

"hiddenvalue"

/>

<label

for

=

"username"

>

用户名:

</label>

<input

type

=

"text"

id

=

"username"

value

=

"www.dreamdu.com"

/>

<label

for

=

"pass"

>

密码:

</label>

<input

type

=

"password"

id

=

"pass"

/>

</fieldset>

<fieldset>

<legend>

性别:

</legend>

<label

for

=

"boy"

>

男

</label>

<input

type

=

"radio"

value

=

"1"

id

=

"sex"

/>

<label

for

=

"girl"

>

女

</label>

<input

type

=

"radio"

value

=

"2"

id

=

"sex"

/>

<label

for

=

"sex"

>

保密

</label>

<input

type

=

"radio"

value

=

"3"

id

=

"sex"

/>

</fieldset>

<fieldset>

<legend>

我最喜爱的:

</legend>

<label

for

=

"computer"

>

计算机

</label>

<input

type

=

"checkbox"

value

=

"1"

id

=

"fav"

/>

<label

for

=

"trval"

>

旅游

</label>

<input

type

=

"checkbox"

value

=

"2"

id

=

"fav"

/>

<label

for

=

"buy"

>

购物

</label>

<input

type

=

"checkbox"

value

=

"3"

id

=

"fav"

/>

</fieldset>

<fieldset>

<legend>

对梦之都的意见:

</legend>

<label

for

=

"select"

>

你对梦之都的感觉

</label>

<select

size

=

"1"

id

=

"select"

>

<option>

很全面,很好

</option>

<option>

一般般吧,还要努力

</option>

<option>

有很多问题,不过还可以

</option>

</select>

</fieldset>

<fieldset>

<legend>

梦之都编程语言选择:

</legend>

<label

for

=

"multipleselect"

>

你想在梦之都学习的编程语言

</label>

<select

size

=

"10"

multiple

=

"multiple"

id

=

"multipleselect"

>

<option>

XHTML

</option>

<option>

CSS

</option>

<option>

JAVASCRIPT

</option>

<option>

XML

</option>

<option>

PHP

</option>

<option>

C#

</option>

<option>

JAVA

</option>

<option>

C++

</option>

<option>

PERL

</option>

</select>

</fieldset>

<fieldset>

<legend>

我要在梦之都学:

</legend>

<label

for

=

"WebDesign"

>

选择一个你在梦之都最想学的

</label>

<select

id

=

"WebDesign"

>

<optgroup

label

=

"client"

>

<option

value

=

"HTML"

>

HTML

</option>

<option

value

=

"CSS"

>

CSS

</option>

<option

value

=

"javascript"

>

javascript

</option>

</optgroup>

<optgroup

label

=

"server"

>

<option

value

=

"PHP"

>

PHP

</option>

<option

value

=

"ASP"

>

ASP

</option>

<option

value

=

"JSP"

>

JSP

</option>

</optgroup>

<optgroup

label

=

"database"

>

<option

value

=

"Access"

>

Access

</option>

<option

value

=

"MySQL"

>

MySQL

</option>

<option

value

=

"SQLServer"

>

SQLServer

</option>

</optgroup>

</select>

</fieldset>

<fieldset>

<legend>

个人化信息:

</legend>

<label

for

=

"myimage"

>

个性照片上传

</label>

<input

type

=

"file"

id

=

"myimage"

size

=

"35"

maxlength

=

"255"

/>

<label

for

=

"contactus"

>

联系我们

</label>

<textarea

cols

=

"50"

rows

=

"10"

id

=

"contactus"

>

dreamer dreamdu[at]163[dot]com

</textarea>

</fieldset>

<fieldset>

<legend>

提交:

</legend>

<input

type

=

"submit"

value

=

"submit"

id

=

"submit"

/>

<input

type

=

"reset"

value

=

"reset"

id

=

"reset"

/>

</fieldset>

</form>

下面是上面代码的运行结果：[/code]

用户名与密码:用户名: 密码: 性别:
男 女 保密 我最喜爱的:计算机 旅游 购物
对梦之都的意见:你对梦之都的感觉 很全面,很好 一般般吧,还要努力 有很多问题,不过还可以
梦之都编程语言选择:你想在梦之都学习的编程语言 XHTML CSS JAVASCRIPT XML PHP C# JAVA C++ PERL
我要在梦之都学:选择一个你在梦之都最想学的 HTML CSS javascript PHP ASP JSP Access MySQL SQLServer
个人化信息:个性照片上传 联系我们 dreamer dreamdu[at]163[dot]com
提交:

样式一 代码如下： <fieldset style="width:300;height:150;border:2px groove" align=center></fieldset> 样式二 代码如下： <fieldset style="width:300;height:150;border:2px red groove" align=center></fieldset> 样式三 代码如下： <fieldset style="width:300;height:150;border:2px red groove; Background-color:#ff9966" align=center></fieldset> 样式四 1234 代码如下： <fieldset style="width:300;height:150;border:1px dashed #ff9966" align="center" > <legend style="border:0px;background-color:white;"> 1234 </legend> </fieldset> 样式五 1234 代码如下： <fieldset style="width:300;height:150;border:1px dashed red" align="center"> <legend style="width:100px;border:1px dashed #ff9966;background-color:#ff0000;text-align:center;font-family:arial;font-weight:bold"> 1234 </legend> </fieldset> 样式六

代码如下：

<table border=0 cellPadding=0 cellSpacing=0 align="center">

<tr><td bgcolor=#d9d9d9>

<fieldset style="width:300;height:150" align=center></fieldset>

</td><tr>

</table>