HTML标签【fieldset】的妙用

2017年9月26日00:55:52 发表评论 221
阿里云优惠券

在实际制作网页中,我们有时会要这样的效果:
HTML标签【fieldset】的妙用

或许我们能通过图片实现,但是在html中有一个标签很轻松的帮我们实现,他就是<fieldset>标签。

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

在form表单中,我们可以对form中的信息进行分组归类,如注册表单的form,我们可以将注册信息分成:

基本信息(一般为必填)

详细信息(一般为可选)

那我们如何更好的来实现呢?我们可考虑在表单form中加入下面两个标签:

fieldset:对表单进行分组,一个表单可以有多个fieldset。

legend:说明每组的内容描述。

  1. 格式:
  2.   <fieldset>
  3.     <legend>health?information</legend>
  4.       height:?<input?type="text"/>
  5.       weight:?<input?type="text"/>
  6.   </fieldset>

实例:

  1. <fieldset>
  2. ????<legend>WOSN.NET?CSS网页布局</legend>
  3. ????<ul>
  4. ????????<li>Div+CSS教程?系统的讲述了关于CSS布局的知识</li>
  5. ????????<li>CSS布局实例?向你呈现了wosn.net中的一些实例</li>
  6. ????????<li>CSS模板下载?你可以查看一些模板</li>
  7. ????????<li>CSS大师的作品定会让你有所收获</li>
  8. ????</ul>
  9. </fieldset>

css样式表:

  1. <style>
  2. *?{
  3. ????font-size:12px;
  4. ????margin:0;
  5. ????padding:0;
  6. }
  7. fieldset?{
  8. ????padding:10px;
  9. ????margin:10px;
  10. ????width:270px;
  11. ????color:#333;
  12. ????border:#06c?dashed?1px;
  13. }
  14. legend?{
  15. ????color:#06c;
  16. ????font-weight:800;
  17. ????background:#fff;
  18. }
  19. ul?{
  20. ????list-style-type:?none;
  21. ????margin:8px?0?4px?0;
  22. }
  23. li?{
  24. ????margin-top:4px;
  25. }
  26. </style>

效果如下:

HTML标签【fieldset】的妙用

 

历史上的今天:

  • 博主微信
  • 赶快加我来聊天吧
  • weinxin
  • 站长技术资源群
  • 群号:483950522
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: