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

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,iVBORw0KGgoAAAANSUhEUgAAA1sAAACyCAIAAAA7/UKFAAARA0lEQVR4nO3dv08U6ePA8fkvKC0tLS0pLSkpLWlMLP0TSLSgpMTGcHImJF9jUPSCXuItMXcQC6OX3Enukk/28snnhE4tdL4Fsi47M888Mzu7O8u8XoWB2fnxzDKBt88sbJICANBtyawHAADAjClCAICuU4QAAF2nCAEAuq5dRZgk1cYTuX7V3Y6/IQDAHGm+eJIypZtXOlaDqzWybdXzBQCYuYkUYfynpZuH14zMrzH3WXSgmKMrQgCg/VpRhKXtVXqUwMLS/Q9vFRlwMSdVaYcAADPUliKM3NvwwsazLLtabiyGVyvaCgCgtVrxOsL4mCua0mt8lm5kz5X2rwgBgPkyl3OEI4/GrBMvu89w4WVjt7QIA3fDAQCmL9QlN6Kd2+MUizByhfg5y+zUYDbvRpZkQzDmKNlhxz/bAAD13LlzJ7+XAi1148aN53Fyoyrm00BC5bZUaVdVFR5P6cpFU4MxRxkR+VQDANSzsbHx/Hy2fW+VQKOcFmFpymTrp2rhVW2pegVZuv+RPZTuPDk/ZThmEQIATFQg7SZShPGfBhbmrjbIsqJNxinCMVdQhABAm12QIozZJHfOLzDbl91P1fGP7Cr3QIoQAJi5jhZhvf3UKMLSG9bZnWhEAGDKpleEVQMrd0m9A9XbW+NzhDFHUYQAwPS1ogiL7p/WLsLw7eCYcRZNWMbcbo4Zv1vGAEB7TKkIS9OnqRwMbBi/w2bnJps9CgBA46b6OkIAAFpIEQIAdJ0iBADoOkUIANB1ihAAoOsUIQBA1ylCAICuU4Ql7sP9+7O+DGPN+nmiFWZ9GQJzaQ6KcLZ/+dm3VypdA7P9w+MuV1wDQD3Te8+SSu//lt280rHiVy7l2ytVr4Ea/4ep8XaLuVyuuAaAembzLnbhT0s3D6/Z4M/X1LdXyq6B0v/tDF+HMRenImQcrgGgnvYWYekP19KjBBbG8+2V0iKM2Un8/4IUIeNwDQD1tLoII/c2vLDq7GOpGX177W8uJUub/Qt3rLkUuAayF9jwksHH4dWKtqpBDeAaAOpp7+sI44twZA+BH8M1KEIir4GRC6/Sf2kUIU1xDQD1XJw5wpFHS3+sBu4+D1OElF4D2UsuXHjZ/wuVFmG7L1daxDUA1HMBizBmhbTij9idleTm3sc0TdOPezeT4Y9Xdo6Px3j0/MGOdm5eu5QkC4s3126dVlp/cylZWV1dXEgWbvXS9PhwffnyQpIsXF5e6x0PbXV5IUmShcvL64cf02+Nt769vnQpSRYuX98++r7jnaPgsQZl2FtNktVe5uk47q1lBzC08PT4UQOYH5GvIxx0YTbvRpZkQ7B04lwREsk1ANTT6iKsdJd5eKv4gZU6/fba31y6snaYpml6uLa0tHTt9OPe6sLKzvF4jw452riWLK2/PU7T497q1WRQacm19bcjK6RHm8sL1zaOThcu3Nw5TtP04+H6YrK83T8NsuTqau84TY93bi4sLCyvvz1O0/729WRh9TB0rHARDg9gY+nbCZzf1eCcSwYwT2J+xBZdmUUThEWPBjaMoQZwDQD1XITXEcYcIn6oI759ez1cu7K0eZSmR5tLt/b2bi1uHKXp4dqV69vH4z46cLSx+H3WsL+9PKi0xY2jwQrfZhjTNO3dGjyQpunH4/7b3ubNK6dJN7zVcOcNMq/wWMEiPLdV7sKjzaVkebtfPoC5Ev7NkpHCC197yfkpQ0VI41wDQD2tniOM3PPg527RJg0U4bc5veOdlZWd4/728srOcX9zaRB14zx65nwt9VYzldZbHW2N1V6afjxcX7qUXLq6eP3m6sri9yI82yo3yEqPldtuuT13buHZLkoHMFca/wvVipDJcQ0A9cx9EcZs0kQRfty7ubDa661e2zhK06ONxVvb2yvffx1jnEfPnJtsO95ZyaTV+TnCb/rby8ni2V3ls5VLg6z0WA3MEXaoCKte3iNFmDutqAipxzUA1NPdIoy8mzz49nq8s3Jlaenaac/0bi0uLg5H3TiPnulvLp299u5w7VrOa/uGXsY3eMlef3s5ubJ6mH5/QeBRRBHmHivtrS4kSxtHaZr2t1cWwq8jPN67deXq+ts085LEuCSdK5MowtLXM2R3UulypbNcA0A90yjCwBxJ5Aq1DxRYXvlHbH9zKTmbDTveWUmufX8VX/1H+5tLQ4n07VeJFy4vr6/lzNt9/63e5NLV699+rffjYJu13t7a1eTm3seoIMse6/vvH1++vrGz/m1gIyMc/Frxte+/NXy28NLV6+uHx6MHVYRlc4SR+1SExHANAPXMuAiLbpDVLsIiNfZ2yrdXYoowLLt+YFfhFcYcKheeawCoZ+JFWPqzrakcDGyoCBnHmNdA1cvP5co4XANAPVN6HeH88u2VOboG5mioTIhrAKhHEZbw7ZU5ugbmaKhMiGsAqEcRlvDtlTm6BuZoqEyIawCoRxGWuA/z8yN21s8TrTDryxCYS4oQAKDrFCEAQNcpQgCArlOEAABdpwgBALpOEQIAdJ0iBADoOkUIANB1ihAAoOsUIQBA19Uvwrt3794AAOBCqFOEt2/ffg4AwAVSuQgBAOiCiRRhkuTsNndh7b0BANCUGRdhkidmQwAAmjLxIhx8HJmJihAAYMraW4ThDQEAaMqkinC45wL3hRUhAMDMNRxbp/WW/Tet/jpCRQgAMB0TLMK04PZx0VZFC3PnEWUiAEBTSt6zJNL33Z0vwnNHmnARTu6vewMAXAx37tzJj7GiSkvP3vwu/o9f1/glkgbvGk/0r3sDAMy7jY2N5/Xe17hos7CRm8WB3yzJXb/oAwAAaguk3cSLMLww+5AiBACYBEUIANB1rS7CkeXhe8qDJTIRAKASRQgA0HUzK8Ki3yYuujWcW4fiDwBgfK2YIyxdreqrDwEAiDftIgQAoG0UIQBA1ylCAICuU4QAAF2nCAEAuk4RAgB0nSIEAOg6RQgA0HWKcFRr//B1vYG19nQAgPaYUhEG3rNuzHci/uuvv16+fLmzs7Ozs/Py5cu///679q4GQx1zD8MaHN7gjfuqPnsNnlHjzzYA0AbTK8L4TyN9+fLlt99+e/Xq1Z9//tnv9/v9/h9//LG/v39wcPDly5caOxxnMFMYXtFbOWefzEizPR0AoD3muAh//fXXV69e/S/jNFNq7HCcwUx6eINRxRRhpR1GmtCzDQC0wbzeNX7//v3PP//8nwJ7e3vv37+vus+0uRxsfHiRRRj5aNXTnNCzDQC0xLzOET59+vTw8PB9gYODg6dPn0YObBK3WZsa3vAgAwMu2mr4g3Fit9nTAQDaZl6L8MGDB7///ntRo7x79+7BgwdV99nIwCYxvNzsC4wtm4DhecRSE3q2AYCWmNe7xj/++GO4Uba2tqrus1J1TW14RTN88VOD2Rysel6TeLYBgPaYzd8jHOcO5qknT54cHBwUNcrBwcGTJ0/GH1XtcTY1vNy8i0nqwPIZng4A0E7zWoRv3rx59uxZUaPs7u6+efNmzCGNM8hJDy8yBBuZjp3E6QAArTKNIiy9ZVyjVD59+vTixYuffvopGyjPnj178eLFp0+fKu0wO4ZxinASwxv5OP7+7/j93fjpAACtMoM5wtxAqVEtHz58eP78+e7u7sHBwbt37969e3dwcLC7u/vixYsPHz7UHlt8aU1zeCO3j3M/yK4c82mkSTzbAEBLTLsIi3KkRqZ8/fr15OTk9evXjx8/3tra2traevz48evXr09OTr5+/VpjbMODGb8Imx1etlOLPq76aaTJPdsAwMxNtQgDLVK7wD59+nRycnL6/hknJydj3r7MvghvnL01OLzSm9q1A7GSZp9tAKAlpvrXZ3KXp+M1SlPCI5y50lvDIw81+JJNAODCm3gRlibIzAOl/SPMHUPtUbXhdACAVpnNX58BAKA9FCEAQNcpQgCArlOEAABdpwgBALpOEQIAdJ0iBADoOkUIANB1ihAAoOsUIQBA1ylCAICuq1+Ed+/evQEAwIVQpwhv3779HACAC6RyEQIA0AUTLMIkSXI/zl2zSKWjjDnIwMIxjwIA0GaTCp2RpDv9oKir4pcH2jGyI2PWV4QAQKc0HDpFmTWShoGtmp0jDO8wcoKw9CgAAHNtgnOEuZ9W6q2q+Vg64VdahEV7q9qpAABzZNpFWLRy7TnCqoOp1KZJ3s1uRQgAXDBNxk3p7F0jqVdpz1XHowgBgA6a5RxhvYIMB1n4uEXbBoowu0nuEpkIAMyvkvcsiZSz3+IUi38of8RjtGNRmJaOrXS32YWT+2vjAAD13LlzJ7+vcpcOmqb2H78eud8arq6RnisqvOz+w0uyuwoXZO762f3HZGuaphP9a+MAAFVtbGw8r/e+xkWblYrPqexqRfkYk3eBjowpuWwgxpwCAED7BdJuIkWY22SBUBspuQm1V0w4BoowvBAAoOWmV4TZqht+KP7jop2kETOFRQPL7lARAgDdMe05wrTsz7hkKzCbdOG2izxu0eFi1oxcJ/W7xgDAPJhxEeb2XxqswPAcYeRxA0sCuVk646gIAYB5NNUizDZfdoWiibpsCBZtHnnXOPvp8KFL87GoZQEA5s4MfrOk3gqlBVm686JZvcCEX/wMnxwEAObXDO4aAwDQKooQAKDrFCEAQNcpQgCArlOEAABdpwgBALpOEQIAdJ0iBADoOkUIANB1syzCwPt8NPK2xS0R837Kkdu28ByrvglNC08BAJhSEVYtvNz3I45/n+LAajE+f/68v7//6NGj/8t49OhRr9f7/PlzpR1WqqLSN1CupMFzKfqilG4V+LSSxr8uAMCp6c0Rxk+V5dZGaYIUlVONBOn1evv7+/8W2N/f/+WXXyrtMFtFleq2JedS6csxeKjBImz86wIAnGpdEdYuhgYr6uHDh/8LevjwYb1BRo5n0FLDvVhv4rPBcxkuvJiJ26IirD2DO9GvCwB0WXtfRxgWWDMduwi3trb+E7S1tRV5gqUBNLww99FxTqTBc0nzirB0wLlfl/AepnMuAMCw9hZh1Q2L4qlGSN27d+990L179+L3VlSBRYGY+2m9HEwbPZcaRZh7CrWLsNmvCwAwMPEizM4SBeRuFV5zeP3hT3M/jjSFIix9aPBp7lM3k3MZKbncsyjqv8B+ZnIuAMCw1r2OsPShol2VNkq8xouwaHhFYxtZIZuJMzmXopILP9tFg1eEANAe7S3C+DnCbKm0rQjjP8hdPs7pTLoIS2s1XMOKEADaoL1FGL+reS/CQFTNSxHmnlo23+NnSSd9LgDAsPYWYeQcYW5bjFmE9+/fD5fHDz/8EL+3cAaNfJx7doN/c5+BqZ1LTHkHlpR+1aZ5LgDAsJYWYY1NSoswPj52d3d3d3eLsuP00chd5Q4gHKzNzhE2ey7ZwYxEasyXrPbpNH4uAMCpaRdhaQ2Uzg4WzZM1WIT9fn93d/f+/fubGVtbW7u7u//880/0eVd41WDM+lWLcBLnUvSFy32owSJs9lwAgIGpFmG4hHI3KV2Sfag0sEp9/vz5w4cP/y3w77//Vnov4KKRxA94nCJs8FwCYw4MLzJ/YzR7LgDAQHvvGgcmosLr5x4o26PTMRx/wyMsneDMrhyYn5uOQJiWzh2OfDzzcwEAhs3Ze5aUbtKqyCi9kR2zYczyKWh8zK36SgFAx82yCAEAaANFCADQdYoQAKDrFCEAQNcpQgCArlOEAABdpwgBALpOEQIAdJ0iBADoOkUIANB1ihAAoOvqF+Hdu3dvAABwIdQpwtu3bz8HAOACqVyEAAB0gSIEAOg6RQgA0HWKEACg6xQhAEDXKUIAgK5ThAAAXacIAQC67v8BkpeloaeLMRgAAAAASUVORK5CYII=" 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标签的更多相关文章

HTML之：fieldset——一个不常用的HTML标签
2016年4月14日17:10:02记录一个不常用的HTML标签fieldset,不过我觉得比较有意思,其语法如下: <fieldset><legend>fieldset名称 ...
JSP 标准标签库（JSTL）之最常用的JSTL标签总结
JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. Apache Tomcat安装JSTL 库步骤如下: 从Apache的标准标签库中下载的二进包(jakarta-t ...
常用HTML meta 标签属性(网站兼容与优化需要)，meta标签
常用HTML meta 标签属性(网站兼容与优化需要),meta标签标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索 ...
一个完整的html 每个标签的含义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
HashTab---Windows资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签
HashTab 是一个优秀的 Windows 外壳扩展程序,它在 Windows 资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签.该标签可以帮助你方便地计算文件的 MD5.SHA1 与 C ...
css的reset和常用的html标签的默认样式整理
先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em; ...
自动回复之实现随机回复与常用Mapper XML标签
[常用Mapper XML标签] 1.基本的:select.insert.update 等 2.可读性.方便拼SQL:where.set.trim 3.减少重复:sql 4.逻辑控制:if.choos ...
使用一个CSS Class去给标签定义Style
使用一个CSS Class去给标签定义Style 类是可重用的样式,可以添加到HTML元素. 下面是一个CSS类声明的例子: <style> .blue-text { colo ...
jquery ajax中支持哪些返回类型以及js中判断一个类型常用的方法？
1 jquery ajax中支持哪些返回类型在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 预期服务器返回的数据类型.如果不指定,jQuery 将自 ...

随机推荐

c# string.format和tostring()
字符说明示例输出 C 货币 string.Format("{0:C3}", 2) ＄2.000 D 十进制 string.Format("{0:D3}", ...
P1991 无线通讯网
P1991 无线通讯网题目描述国防部计划用无线网络连接若干个边防哨所.2 种不同的通讯技术用来搭建无线网络: 每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话. 任意两个配备了一条卫 ...
洛谷P2307 迷宫
怎么又是一道叫迷宫的题呀QWQ 题目链接这道题主要是对并查集的考察,需要注意的坑点在于有可能存在的不止一个联通块. 我们只需要对输入的两个数据进行判断,如果在一个集合中证明有多条路则输出0,如果不在 ...
php杂记——1（基础知识与文件读写）
1.变量前面需要加美元符号"$",常量则不需要: define('PRICE',100); echo PRICE; 2.用一个变量的值作为另一个变量的名称可以得到类似C中的指针变量 ...
oracle 游标例子
CREATE OR REPLACE PROCEDURE PRC_WAP_ACTIVEUSERS(RETCODE OUT VARCHAR2) /***************************** ...
护网杯 three hit 复现(is_numeric引发的二次注入)
1.题目源码 https://github.com/ZhangAiQiang/three-hit 题目并不真的是当时源码,是我根据做法自己写的,虽然代码烂,但是还好能达到复现的目的 ,兄弟们star一 ...
Win7系统下删除文件时出现“正在准备再循环”的解决方法
今天,笔者在备份文件的时候,将一个word文档从移动硬盘复制到桌面.经过一系列“复(meng)杂(bi)”的操作之后,笔者突然发现,文件无法删除了.当右键文件点击“删除”时,出现对话框显示“正在准备 ...
Python 进阶（一些进阶技巧）
个人笔记,基本都摘抄自 Python3 官方文档一. 上下文管理 1. 传统的类方式 Java 使用 try 来自动管理资源,只要实现了 AutoCloseable 接口,就可以部分摆脱手动 col ...
Android stateMachine分析
StateMachine与State模式的详细介绍可以参考文章:Android学习 StateMachine与State模式下面是我对于StateMachine的理解: 先了解下消息处理.看下Sta ...
Daily Scrum02 12.04
第二轮迭代已经进行到了白热化阶段,大家在被编译搞的水深火热的同时依然没有忘记我们的具有颠覆性的团队项目.虽然第一轮迭代我们的成绩不错,但是一定要克服时间不充裕,任务互相冲突的困难,克服不可避免的舆论压 ...

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

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

随机推荐

热门专题