一个不常用的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> &nbsp;&nbsp; <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的更多相关文章

  1. 表单标签 fieldset legent

    书写表单时可以提供简单样式的标签 <fieldset> <legent></legent> <input type="text" > ...

  2. 生僻标签 fieldset 与 legend 的妙用

    谈到 <fieldset> 与 <legend>,大部分人肯定会比较陌生,在 HTML 标签中,属于比较少用的那一批. 我最早知道这两个标签,是在早年学习 reset.css ...

  3. 5、范围标签<fieldset></fieldset>

    <fieldset style="border:0;border:1px solid red;"> <legend style="background- ...

  4. HTML之:fieldset——一个不常用的HTML标签

    2016年4月14日17:10:02记录 一个不常用的HTML标签fieldset,不过我觉得比较有意思,其语法如下: <fieldset><legend>fieldset名称 ...

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

    转自:https://xhmaomy-163-com.iteye.com/blog/1066977 fieldset——一个不常用的HTML标签 fieldset 标签 -- 对表单进行分组 在for ...

  6. 前端学习笔记之HTML body内常用标签

    阅读目录 一 HTML语义化 二 字符实体 三 h系列标签 四 p标签 五 img标签 六 a标签 七 列表标签 八 table标签 九 form标签 一 HTML语义化 body中的标签是会显示到浏 ...

  7. Python-form表单标签

    语义:标记表单 #1.什么是表单? 表单就是专门用来接收用户输入或采集用户信息的 #2.表单的格式 <form> <表单元素> </form> 链接:https:/ ...

  8. html 之表单,div标签等。。。。。。。

    一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...

  9. HTML(form标签)、CSS选择器一

    一.表单标签<form> 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互. 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含t ...

随机推荐

  1. [问与答]为什么 'a' in ('abc') 是True 而 'a' in ['abc'] 是False呢?

    Why is 'a' in ('abc') True while 'a' in ['abc'] is False? 原文链接 问 在使用解释器的时候,表达式'a' in ('abc') 返回是True ...

  2. (五十六)iOS多线程之NSOperation

    NSOpertation是一套OC的API,是对GCD进行的Cocoa抽象. NSOperation有两种不同类型的队列,主队列和自定义队列. 主队列运行于主线程上,自定义队列在后台运行. [NSBl ...

  3. Linux 学习笔记_12_文件共享服务_2_FTP应用--vsftpd

    Wu-FTP:古老,配置复杂 Proftp:功能强大 vsftp: 安全,高速,稳定[系统默认的FTP软件] VSFTP服务器配置 启动:/etc/rc.d/init.d/vsftpd start [ ...

  4. (NO.00002)iOS游戏精灵战争雏形(五)

    完成了精灵自己移动之后,我们开始着手实现按住精灵拖动的功能. 要想处理触摸事件,我们需要做2件事: 1.在类的初始化中打开触摸接收属性 2.实现触摸处理回调方法 我们依次来做这2件事. 首先要搞清楚在 ...

  5. 【Android 应用开发】AndroidUI设计 之 图片浏览器

    图片浏览器效果图 : 源码下载地址 : -- CSDN : http://download.csdn.net/detail/han1202012/6875083 -- GitHub : https:/ ...

  6. i++是否原子操作?并解释为什么???????

    不是原子操作.理由: 1.i++分为三个阶段: 内存到寄存器 寄存器自增 写回内存 这三个阶段中间都可以被中断分离开.  2.++i首先要看编译器是怎么编译的, 某些编译器比如VC在非优化版本中会编译 ...

  7. 优秀设计师应当知道的20大UI设计原则

    世界级图形设计大师Paul Rand(保罗.兰德)曾经说过:"设计绝不是简单的排列组合与简单地再编辑,它应当充满着价值和意义,去说明道理,去删繁就简,去阐明演绎,去修饰美化,去赞美褒扬,使其 ...

  8. JavaScript发布/订阅实例

    原文链接: Pub/Sub JavaScript Object原文日期: 2014年6月11日翻译日期: 2014年6月13日 翻译人员: 铁锚 高效AJAX网站的三大杀器: 事件代理, 浏览历史管理 ...

  9. OpenCV——PS 滤镜, 曝光过度

    算法原理可以参考: PS 滤镜,曝光过度 #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include <io ...

  10. android的ndk开发简介-android学习之旅(93)

    环境搭建 1.安装ndk 2.安装cygwin (android是基于linux的Framework,运行的本地库是.SO,而不是.dll库,大部分都实在windows下开发,如果是linux就没这个 ...