Does the use of the fieldset HTML tag have meaning beyond grouping forms?

后端 未结 6 1946
予麋鹿
予麋鹿 2021-01-17 07:16

Usually, I\'ve seen it with forms, but I\'ve found it helpful to group related sets of data (eg when you have multiple tables on a page, using a fieldset around each table o

6条回答
  •  梦毁少年i
    2021-01-17 08:15

    fieldset is about form control group. By grouping related form controls, authors can divide a form into smaller, more manageable parts, improving the usability disaster that can strike when confronting users with too many form controls.

    That does not means a fieldset always group fields within a form, even though the specification discuss fieldset only within the context of user interacting with form...

    So the "abuse" can come from the fact the HTML 4 and XHTML specs do not require fieldset and legend to be contained within form elements. FIELDSET can even be the child of the BODY element. It's valid syntax to put fieldsets outside forms.

    But, when you describe something as a fieldset that isn't really a fieldset, you just cause confusion.

    It's best to think of HTML / XHTML tags as describing the meaning of an element rather than how it will look. Then you can use CSS to make the element look like whatever you want.

    If you group data for presentation purpose, you can find here a nice CSS alternative.

    For reference:

    .fieldset {
    border-right: 1px solid #75736E;
    border-bottom: 1px solid #75736E;
    border-left: 1px solid #F2F0EE;
    border-top: 1px solid #F2F0EE;
    padding: 10px 3px 3px 3px;
    
    }
    
    .outer {
    border-left: 1px solid #75736E;
    border-top: 1px solid #75736E;
    border-right: 1px solid #F2F0EE;
    border-bottom: 1px solid #F2F0EE;
    width: 200px; /* CHANGE THIS FOR BOX SIZE */
    } 
    
    .legend {
    float: left;
    margin-left: 15px;
    margin-top: -8px;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
    background: #FFF;
    } 
    
    
    Lipsum.com Is The Best
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec congue fermentum metus. Quisque vel ante. Cras purus metus, dignissim at, luctus et, sollicitudin eget, urna. Maecenas eget lacus. Aenean bibendum risus non erat mattis semper. Aliquam placerat nibh eget lacus. Sed blandit eleifend justo. Nam elit. Fusce feugiat orci id eros facilisis laoreet. Integer vestibulum condimentum purus. Proin vehicula congue lacus. Quisque placerat diam nec enim. Nunc lorem. Maecenas nec sem sed nulla tristique faucibus.

提交回复
热议问题