HTML标签fieldset
一个不常用的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>
下面是上面代码的运行结果:
样式一代码如下: <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; </fieldset> 样式四 代码如下: <fieldset style="width:300;height:150;border:1px dashed #ff9966" align="center" > <legend style="border:0px;"> 1234 </legend> </fieldset> 样式五 代码如下: <fieldset style="width:300;height:150;border:1px dashed red" align="center"> <legend style="width:100px;border:1px dashed #ff9966;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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。