The magic of HTML tag fieldset

 Watson Blog September 26, 2017 00:55:52 HTML5/CSS3 comment six hundred and fifty-eight Reading mode

In the actual production of web pages, we sometimes want this effect:
 The magic of HTML tag fieldset

Maybe we can implement it through pictures, but there is a tag in html that can easily help us to implement it. It is the<fieldset>tag.

Fieldset label -- group the form

In the form form, we can group and classify the information in the form. For example, in the form of the registration form, we can divide the registration information into:

Basic information (generally required)

Details (generally optional)

How can we achieve it better? We can consider adding the following two tags to the form form:

Fieldset: group forms. A form can have multiple fieldsets.

Legend: describe the content description of each group.

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

example:

  1. <fieldset>
  2. ????< Factor>WOSN.NET? CSS Web Page Layout</legend>
  3. ????< ul>
  4. ????????< Li>Div+CSS Tutorial? It systematically tells the knowledge about CSS layout</li>
  5. ????????< Li>CSS layout instance? It shows you some instances in wosn.net</li>
  6. ????????< Li>Download CSS templates? You can view some templates</li>
  7. ????????< Li>The works of CSS masters will definitely bring you something</li>
  8. ????</ ul>
  9. </fieldset>

Css stylesheet:

  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-typeHTML标签【fieldset】的妙用 none ;
  21. ???? margin : 8px ? 0? 4px ? 0;
  22. }
  23. li? {
  24. ???? margin-top : 4px ;
  25. }
  26. </style>

The effect is as follows:

 The magic of HTML tag fieldset

 

 Watson Blog
  • This article is written by Published on September 26, 2017 00:55:52
  • This article is collected and sorted by the website of Mutual Benefit, and the email address for problem feedback is: wosnnet@foxmail.com , please keep the link of this article for reprinting: https://wosn.net/633.html

Comment