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

　　在form表单中，我们可以对form中的信息进行分组归类，如注册表单的form，我们可以将注册信息分组成
　　　　基本信息（一般为必填）
　　　　详细信息（一般为可选）
　　那我们如何更好的来实现呢？我们可考虑在表单form中加入下面两个标签：
　　　　fieldset：对表单进行分组，一个表单可以有多个fieldset。
　　　　legend：说明每组的内容描述。

格式：

　　<fieldset>
　　　　<legend>health information</legend>
　　　　　　height: <input type="text"/>
　　　　　　weight: <input type="text"/>
　　</fieldset>

html:

<HTML>

   <head>
      <meta charset="utf-8" />
      <title></title>
   </head>

   <body>
      <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>

      </form>
   </body>

</HTML>

result:

aaarticlea/png;base64,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" alt="" />

html_1：

<fieldset style="width:300;height:150;border:1px dashed red" align="center">
   <legend style="width:100px;border:1px dashed #ff9966;background-color:#ff0000;text-align:center;font-family:arial;font-weight:bold">
      1234
   </legend>
</fieldset>

result_1：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVwAAADBCAIAAAAM+59SAAAEcklEQVR4nO3coXIUWRiG4f8uIiORK5HIyEjugMiVuQRkNGplqkAgIyMjkZGRkcjIQUDP9peZoQine3py5nmqDT0LVQzbL8N3UqnPn7+4XC7X+qoVwIgoAEEUgCAKQBAFIIgCEEQBCKIABFGY2acP/19Vvy53/vAOSxCFmY3/X3e96BKFhYjCzERBFF4bUZjZEo/TU9U/VZU376vOqqrqpOqi6vvopbuqt1VVdVp1tePXfF9VVdd7/r2wBO/7zJaIwmX9sr7zrZ57W/W046WPG7/g7fCSKBwD7/vM9vsUPQ4fB55F4d+qqrqsWlV9Hz5H3FStqq6q3gwv3Wz8xNXoc4coHAnv+8z2uCk8Do/uxcazfVZ1WnU3/PByxxP+taqqzvLm1agye42CTWEhojCz/UbhfdX9qA67/suff/Pf5s3zqqp6V/UwuvkwVOZcFI6GKMxsidOH30fh47ApbC3F6fDPinEpHkThmIjCzPZehN9HYf1vgbttrz5UnQwVWA0Tw3+jOtgUjsGO933zT8Wdv76z92tXFNZFuNn9cy+Gh/+p6mR0SLFMFA7kT7CDOy+xOwpMYolHaGsUroebt3n/XdWbqm/DD9dRuKvtzvf5e2ESonBYDmNTWH8xwuZf9RfDlLgaZsWquj+EKNgUpjJNFJjKYUThbNvjfZ29WNv84qWVofGYiMLMDiAKjxuP/bNPDeuvgD4dZkVROGaiMLO9F6GriyXYFGa2+HP1qi8m8cJ3UhRmtvhz9aovJiEKh8X3U/jry6YwlWmiwFR8Ozbfju21EQUgiAIQbArQu2k2BVGAbogCEJw+AC1EAQiiAASbAvTO0AgEUQCC0weghSgAQRSAYFOA3hkagSAKQHD6ALQQBSCIAhBsCtA7QyMQRAEITh+AFqIABFEAgk0BemdoBIIoAMHpA9BCFIAgCkCwKUDvDI1AEAUgOH0AWogCEEQBCDYF6J2hEQiiAASnD0ALUQCCKADBpgC9MzQCQRSA4PQBaCEKQBAFINgUoHeGRiCIAhCcPgAtRAEIogAEmwL0ztAIBFEAgtMHoIUoAEEUgGBTgN4ZGoEgCkBw+gC0EAUgiAIQbArQO0MjEEQBCE4fgBaiAARRAIJNAXpnaASCKADB6QPQQhSAIApAsClA7wyNQBAFIDh9AFqIAhBEAQg2BeidoREIogAEpw9AC1EAgigAwaYAvTM0AkEUgOD0AWghCkAQBSDYFKB3hkYgiAIQnD4ALUQBCKIABJsC9M7QCARRAILTB6CFKABBFIBgU4DeGRqBIApAcPoAtBAFIIgCEGwK0DtDIxBEAQhOH4AWogAEUQCCTQF6Z2gEgigAwekD0EIUgCAKQLApQO8MjUAQBSA4fQBaiAIQRAEINgXonaERCKIABKcPQAtRAIIoAMGmAL0zNAJBFIDg9AFoIQpAEAUg2BSgd5MNjT8vd9xxp4M7L+ETARBEAQiiAARRAIIoAEEUgCAKQBAFIIgCEEQBCKIABFEAgigAQRSAIApAEAUg/ACU99LDq+pNnwAAAABJRU5ErkJggg==" alt="" />

fieldset——一个不常用的HTML标签的更多相关文章

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

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

  2. JSP 标准标签库（JSTL）之最常用的JSTL标签总结

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

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

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

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

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

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

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

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

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

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

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

  8. 使用一个CSS Class去给标签定义Style

    使用一个CSS Class去给标签定义Style 类是可重用的样式,可以添加到HTML元素. 下面是一个CSS类声明的例子: <style>   .blue-text {     colo ...

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

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

随机推荐

  1. R语言学习笔记（十）：零碎知识点(21-25)

    21--assign() assign函数可以通过变量名的字符串来赋值 > assign('a', 1:3) > a [1] 1 2 3 > b <- c('a') > ...

  2. hdu1233 继续畅通工程 （最小生成树——并查集）

    还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  3. SQL Server附加数据库拒绝访问错误解决方法

    今天在MsSQL里附加数据库时提示操作系统错误5(拒绝访问),这里我没给出了两个解决方案供大家解决问题. 方案一:切换登录方式 出现这种情况是由于用“混合验证方式”(SQL Server身份验证)登录 ...

  4. spring location设置本地路径

    <context:property-placeholder location="file:D:/jdbc.properties"/> 直接在路径前加上 file:

  5. 「日常训练」「小专题·USACO」 Ski Course Design （1-4）

    题目 以后补 分析 mmp这题把我写蠢哭了 我原来的思路是什么呢? 每轮找min/max,然后两个决策:升min/降max 像这样子dfs找最优,然后花式剪枝 但是一想不对啊,这才1-4,哪有那么复杂 ...

  6. ES5新增数组方法（4）：every

    检查数组元素的每个元素是否符合条件. // 数组中的元素全部满足指定条件返回true let arr = [1, 3, 5, 7, 9]; console.log(arr.every((value, ...

  7. webpack使用时可能出现的问题

    1.在配置完webpack.config.js准备进行热加载开发时,修改React内容浏览器不会自动局部刷新,而且会console出一些提示: The following modules couldn ...

  8. cocos2d-x 场景切换

    场景切换的方法 场景切换是通过导演类director实现的,其中的相关方法如下: director.run(new_scene).该方法可以运行场景,只能在启动第一个场景时调用该方法.如果已运行场景, ...

  9. devstack环境搭建

    1. devstack部署 参考Quick Start,推荐使用ubuntu16.04进行安装 1.1 配置ubuntu国内源 修改/etc/apt/sources.list内容为 deb http: ...

  10. Annoy解析

    Annoy是高维空间求近似最近邻的一个开源库. Annoy构建一棵二叉树,查询时间为O(logn). Annoy通过随机挑选两个点,并使用垂直于这个点的等距离超平面将集合划分为两部分. 如图所示,图中 ...