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 将自 ...

随机推荐

Rmarkdown：输出html设置
在Rstudio中可自行更改主题样式 --- title: "题目" author: "name" date: "`r format(Sys.time ...
Python | 用Pyinstaller打包发布exe应用
参考:https://jingyan.baidu.com/article/a378c960b47034b3282830bb.html https://ask.csdn.net/questions/72 ...
P1346 电车（dijkstra）
P1346 电车题目描述在一个神奇的小镇上有着一个特别的电车网络,它由一些路口和轨道组成,每个路口都连接着若干个轨道,每个轨道都通向一个路口(不排除有的观光轨道转一圈后返回路口的可能).在每个路口 ...
JAVA中堆栈和内存分配详解(摘抄)
在Java中,有六个不同的地方可以存储数据: 1.寄存器:最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. 2. 栈:存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存 ...
给socks-proxy-agent增加认证
由于需要使用socks代理,查看了nodejs的各种socks库,最终的结论是socks库是其中最完善的,而socks-proxy-agent是以其为基础的封装,可以直接和http模块对接. 不过在尝 ...
Python 3基础教程30-sys模块
本文介绍sys模块,简单打印两个重定向输出. 目前使用机会没有,以后实际用到了,再去研究和学习.
MySQL统计数据库大小
select concat(truncate(sum(data_length)/1024/1024,2),'mb') as data_size, concat(truncate(sum(max_dat ...
[翻译] ASP.NET Core 简介
ASP.NET Core 简介原文地址:Introduction to ASP.NET Core 译文地址:asp.net core 简介翻译:ganqiyin ...
Sql Express数据备份和还原
参考文章:在SQL Server Express版本中没有代理功能如何自动备份数据库首先用以下脚本,生成可以自动备份数据库的存储过程: USE [master] GO SET ANSI_NULLS ...
linux基础优化
[root@moban oldboy]# for oldboy in `chkconfig --list |grep "3:on" |awk '{print $1}' |grep ...

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

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

随机推荐

热门专题