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

转自：https://xhmaomy-163-com.iteye.com/blog/1066977

　　在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;">#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="" />

Me discréditer résister, peut supporter beaucoup de compliments!

fieldset 标签 -- 对表单进行分组的更多相关文章

spring mvc使用@InitBinder 标签对表单数据绑定
在SpringMVC中,bean中定义了Date,double等类型,如果没有做任何处理的话,日期以及double都无法绑定. 解决的办法就是使用spring mvc提供的@InitBinder标签 ...
HTML5<fieldset>标签
1.<fieldset>标签对表单中的相关元素进行分组. 2.<fieldset>标签会在相关表单元素周围绘制边框. <!DOCTYPE html><html ...
HTML <fieldset> 标签将表单内的相关元素分组
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...
HTML5的fieldset标签
定义和用法 fieldset 元素可将表单内的相关元素分组,绘制一个带标题的框,有如winform开发中的panel. <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的 ...
（十）jQuery对表单、表格的操作
一.表单应用 1.HTML中的表单大致由三部分组成 (1).表单标签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...
python 之前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签）
11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
html常用标签6-表单标签
1.表单的初始化标签 <form action="#" method="get"> </form> ...
1. HTML <fieldset> 标签
定义和用法 fieldset 元素可将表单内的相关元素分组. <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> ...
第5章 jQuery对表单、表格的操作及更多应用
本章主要是对前面4章的小结和应用. 一. 表单form应用表单分为3个组成部分 (1)form标签表单可包含文本域,复选框,单选按钮等等.表单用于向指定的 URL 传递用户数据. (2)表单域 - ...

随机推荐

java位运算笔记
位运算: ~(非)-->二进制数进行0和1的互换样例: public class Test { public static void main(String[] args) { System. ...
英语发音规则---R字母
英语发音规则---R字母一.总结一句话总结: 1.在词首和词中时,字母r常读作摩擦辅音/r/? red /red/ n. 红色 ruler /'ruːlə/ n. 尺:统治者 rub /rʌb/ ...
hdoj--3440--House Man（差分约束）
House Man Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
17.UNP第一章简介
获取时间的客户端代码: //客户端程序 #include "unp.h" int main(int argc, char **argv) { int sockfd, n; ]; s ...
10. Regular Expression Matching[H]正则表达式匹配
题目 Given an input string(s) and a pattern(p), implement regular expression matching with support for ...
Redis学习笔记（九）命令进阶：Pub/Sub（发布/订阅）操作
原文链接:http://doc.redisfans.com/pub_sub/index.html Redis的Pub/Sub模型可以应对工作中的一些简单应用,涉及到复杂应用还是推荐使用诸如Rabbit ...
adplus 抓取dump
工具所在路径 C:\Program Files\Windows Kits\10\Debuggers\x64 cmd窗口切换目录倒adplus所在路径下,输入抓取命令.adplus -hang -p ...
stackoverflow 加载特慢解决方案，配置 hosts 屏蔽速度慢的第三方 API
127.0.0.1 ajax.googleapis.com www.googletagservices.com www.gravatar.com 127.0.0.1 securepubads.g.do ...
C# Distanct List集合
简单一维集合的使用 List<int> ages = new List<int> { 21, 46, 46, 55, 17, 21, 55, 55 }; List<str ...
Unity类继承关系图
UnityEngine(命名空间) 其他命名空间其他类 Object(类) 其他类(继承自Object) Component(类)(继承自Object) 其他类(继承自Component) Tran ...

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

fieldset 标签 -- 对表单进行分组的更多相关文章

随机推荐

热门专题