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>
下面是上面代码的运行结果:
用户名与密码:用户名: 密码:性别:男 女 保密我最喜爱的:计算机 旅游 购物对梦之都的意见:你对梦之都的感觉 很全面,很好 一般般吧,还要努力 有很多问题,不过还可以梦之都编程语言选择:你想在梦之都学习的编程语言 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标签fieldset的更多相关文章
- 表单标签 fieldset legent
书写表单时可以提供简单样式的标签 <fieldset> <legent></legent> <input type="text" > ...
- 生僻标签 fieldset 与 legend 的妙用
谈到 <fieldset> 与 <legend>,大部分人肯定会比较陌生,在 HTML 标签中,属于比较少用的那一批. 我最早知道这两个标签,是在早年学习 reset.css ...
- 5、范围标签<fieldset></fieldset>
<fieldset style="border:0;border:1px solid red;"> <legend style="background- ...
- HTML之:fieldset——一个不常用的HTML标签
2016年4月14日17:10:02记录 一个不常用的HTML标签fieldset,不过我觉得比较有意思,其语法如下: <fieldset><legend>fieldset名称 ...
- fieldset 标签 -- 对表单进行分组
转自:https://xhmaomy-163-com.iteye.com/blog/1066977 fieldset——一个不常用的HTML标签 fieldset 标签 -- 对表单进行分组 在for ...
- 前端学习笔记之HTML body内常用标签
阅读目录 一 HTML语义化 二 字符实体 三 h系列标签 四 p标签 五 img标签 六 a标签 七 列表标签 八 table标签 九 form标签 一 HTML语义化 body中的标签是会显示到浏 ...
- Python-form表单标签
语义:标记表单 #1.什么是表单? 表单就是专门用来接收用户输入或采集用户信息的 #2.表单的格式 <form> <表单元素> </form> 链接:https:/ ...
- html 之表单,div标签等。。。。。。。
一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...
- HTML(form标签)、CSS选择器一
一.表单标签<form> 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互. 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含t ...
随机推荐
- [问与答]为什么 'a' in ('abc') 是True 而 'a' in ['abc'] 是False呢?
Why is 'a' in ('abc') True while 'a' in ['abc'] is False? 原文链接 问 在使用解释器的时候,表达式'a' in ('abc') 返回是True ...
- (五十六)iOS多线程之NSOperation
NSOpertation是一套OC的API,是对GCD进行的Cocoa抽象. NSOperation有两种不同类型的队列,主队列和自定义队列. 主队列运行于主线程上,自定义队列在后台运行. [NSBl ...
- Linux 学习笔记_12_文件共享服务_2_FTP应用--vsftpd
Wu-FTP:古老,配置复杂 Proftp:功能强大 vsftp: 安全,高速,稳定[系统默认的FTP软件] VSFTP服务器配置 启动:/etc/rc.d/init.d/vsftpd start [ ...
- (NO.00002)iOS游戏精灵战争雏形(五)
完成了精灵自己移动之后,我们开始着手实现按住精灵拖动的功能. 要想处理触摸事件,我们需要做2件事: 1.在类的初始化中打开触摸接收属性 2.实现触摸处理回调方法 我们依次来做这2件事. 首先要搞清楚在 ...
- 【Android 应用开发】AndroidUI设计 之 图片浏览器
图片浏览器效果图 : 源码下载地址 : -- CSDN : http://download.csdn.net/detail/han1202012/6875083 -- GitHub : https:/ ...
- i++是否原子操作?并解释为什么???????
不是原子操作.理由: 1.i++分为三个阶段: 内存到寄存器 寄存器自增 写回内存 这三个阶段中间都可以被中断分离开. 2.++i首先要看编译器是怎么编译的, 某些编译器比如VC在非优化版本中会编译 ...
- 优秀设计师应当知道的20大UI设计原则
世界级图形设计大师Paul Rand(保罗.兰德)曾经说过:"设计绝不是简单的排列组合与简单地再编辑,它应当充满着价值和意义,去说明道理,去删繁就简,去阐明演绎,去修饰美化,去赞美褒扬,使其 ...
- JavaScript发布/订阅实例
原文链接: Pub/Sub JavaScript Object原文日期: 2014年6月11日翻译日期: 2014年6月13日 翻译人员: 铁锚 高效AJAX网站的三大杀器: 事件代理, 浏览历史管理 ...
- OpenCV——PS 滤镜, 曝光过度
算法原理可以参考: PS 滤镜,曝光过度 #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include <io ...
- android的ndk开发简介-android学习之旅(93)
环境搭建 1.安装ndk 2.安装cygwin (android是基于linux的Framework,运行的本地库是.SO,而不是.dll库,大部分都实在windows下开发,如果是linux就没这个 ...