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>
&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——一个不常用的HTML标签的更多相关文章

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

    fieldset 标签 -- 对表单进行分组 在form表单中,我们可以对form中的信息进行分组归类,如注册表单的form,我们可以将注册信息分组成 基本信息(一般为必填) 详细信息(一般为可选) ...

  2. 转载:给bash的提示符设置不同的颜色 一个很常用的功能,效果如下:

    原文来自:http://www.cnblogs.com/cyttina/archive/2013/01/08/2850406.html 一个很常用的功能,效果如下: 这样就可以很轻易的将输入的指令和其 ...

  3. jquery ajax中支持哪些返回类型以及js中判断一个类型常用的方法?

    1 jquery ajax中支持哪些返回类型在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 预期服务器返回的数据类型.如果不指定,jQuery 将自 ...

  4. JSP 标准标签库(JSTL)之最常用的JSTL标签总结

    JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. Apache Tomcat安装JSTL 库步骤如下: 从Apache的标准标签库中下载的二进包(jakarta-t ...

  5. 常用HTML meta 标签属性(网站兼容与优化需要),meta标签

    常用HTML meta 标签属性(网站兼容与优化需要),meta标签 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索 ...

  6. 一个完整的html 每个标签的含义

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. HashTab---Windows资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签

    HashTab 是一个优秀的 Windows 外壳扩展程序,它在 Windows 资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签.该标签可以帮助你方便地计算文件的 MD5.SHA1 与 C ...

  8. css的reset和常用的html标签的默认样式整理

    先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em; ...

  9. 自动回复之实现随机回复与常用Mapper XML标签

    [常用Mapper XML标签] 1.基本的:select.insert.update 等 2.可读性.方便拼SQL:where.set.trim 3.减少重复:sql 4.逻辑控制:if.choos ...

随机推荐

  1. Android反编译工具的使用-Android Killer

    今天百度搜索“Android反编译”搜索出来的结果大多数都是比较传统的教程.刚接触反编译的时候,我也是从这些教程慢慢学起的.在后来的学习过程中,我接触到比较方便操作的Android反编译.在这,我将使 ...

  2. Codeforces Round #359(div 2)

    A:= v = B:^ w ^ C:一天n个小时,一个小时m分(n,m十进制),一个手表有两部分,左边表示时,右边表示分,但都是7进制,而且手表上最多只能有7个数字且数字不能重复,现在要你算出能正确表 ...

  3. [BZOJ3156]防御准备(斜率优化DP)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3156 分析: 简单的斜率优化DP

  4. [BZOJ1016][JSOI2008]最小生成树计数(结论题)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1016 分析: 首先有个性质:如果边集E.E'都可以表示一个图G的最小生成树(当然E和E ...

  5. codevs 4543 treap 模板

    type rec=record lc,rc,v,rnd,size,w,fa:longint; end; var n,root,tot,ans,opt,x,i,po:longint; tr:array[ ...

  6. linux 权限

    ls -la 查看文件 drwxr-xr-x 2 root root 4096 ...... 第一个d:代表目录:-代表文件 后面三个一组:r:读:w:写:x:执行 第一个root 代表所属用户: 第 ...

  7. getopt

    头文件 #include<unistd.h> 定义函数 int getopt(int argc,char * const argv[ ],const char * optstring); ...

  8. Java面试常考知识点

    1.  什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. Jav ...

  9. C++中函数的默认参数和C语言中volatile的学习

    1.函数默认参数 1 int func(int a,int b=10) 2 { 3 return a*b; 4 } 5 6 int main() 7 { 8 int c=func(2); 9 cout ...

  10. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...