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="" />

最新文章

  1. 【Linux】lsof 命令,记一次端口占用查询
  2. Hadoop 苦旅(1)——准备以及Cygwin安装
  3. jquery选中下拉列表的某个值
  4. MEF简单示例
  5. 在windows下使用linux命令
  6. lintcode:交错正负数
  7. Oracle 存储过程实例
  8. React Native底|顶部导航使用小技巧
  9. jQuer __Ajax DOM
  10. javaweb下载文件模板
  11. ab命令
  12. Perl的命令行参数和ARGV
  13. JS实现异步提交
  14. 怎么把mkv转成mp4,有什么方法
  15. RabbitMQ安装详解
  16. java网络编程ServerSocket类 和Socket类的常用构造方法及其方法
  17. linux学习笔记-12.输入输出重定向及管道
  18. Codeforces Round #Pi (Div. 2)(A,B,C,D)
  19. nyoj737区间dp(石子合并)
  20. D题:数学题(贪心+二分)

热门文章

  1. Python3 模块、包调用&amp;路径
  2. java图片识别 [Tesseract-OCR]
  3. linux ln 建立软链接-- 基于dubbo-zookeeper服务的 服务jar 引用公共的 lib
  4. Android stadio bug
  5. 【目录】Spring 源码学习
  6. Android系统自带样式
  7. PHP的array_merge()合并数组
  8. python发起请求提示UnicodeEncodeError
  9. 爬取妹子图(requests + BeautifulSoup)
  10. const char and static const char