HTML之:fieldset——一个不常用的HTML标签
2016-06-28 16:52
633 查看
2016年4月14日17:10:02记录
一个不常用的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 标签 -- 对表单进行分组
此标签是成对出现的,以
一个表单可以有多个
dreamer dreamdu[at]163[dot]com
下面是上面代码的运行结果:[/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提交:
一个不常用的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; </fieldset> 样式四 1234 代码如下: <fieldset style="width:300;height:150;border:1px dashed #ff9966" align="center" > <legend style="border:0px;"> 1234 </legend> </fieldset> 样式五 1234 代码如下: <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> |
相关文章推荐
- html tab页面切换事件。
- MVC中@RenderBody、@RenderSection、@RenderPage、@Html.RenderPartial、Html.RenderAction的作用和区别
- HTML中特殊字符
- Markdown 简介
- Markdown缩进、字体颜色、图片对齐
- HTML 基础篇
- Html类ImageGetter接口
- HTML属性
- HTML 事件属性
- HTML form 垂直水平居中
- HTML新人基础学习1.2—HTML的常用的标签语法
- html经典上中下三段的布局设计
- swiper的基础使用(十)
- swiper的基础使用(十)
- MarkDown Usage
- html(HyperText Markup Language)--超文本标记语言
- HTML readyState 属性 iframe onreadystatechange事件
- HTML DOM createDocumentFragment() 方法
- HTML总结
- 用Popup仿MessageBox 支持HTML语法混排