Fieldsets group form controls and labels into organized sections. Much like a div or other structural element, thefieldset is a block level element that wraps related elements, however specifically within a form for better organization. Fieldsets by default also include a border outline that can be modified using CSS.
A legend provides a caption, or heading, for a fieldset. The legend element wraps text describing the controls that fall within the fieldset. The HTML code should include the legend directly after the opening fieldset tag. Thelegend itself will appear on the page within the top left part of the fieldset border. The appearance of the legendon a page may be changed with CSS.
Form & Input Attributes
To accommodate all of the different form, input, and control elements there are a number of attributes and corresponding values. These attributes and values serve a lot of different functions including the ability to disable controls, add form validation, and so forth. Below are some of the more popular and useful attributes.
The disabled Boolean attribute turns off an element or control so that it is not available for interaction or input. Elements that are disabled will not send any values to the server for form processing.
Applying the disabled Boolean attribute to a fieldset will disable all of the controls within the fieldset. If thetype attribute has a hidden value, the disabled Boolean attribute is disregarded.
The placeholder HTML5 attribute provides a tip within the control of an input and disappears once the control is clicked in, or gains focus. The placeholder attribute only applies to inputs with a type attribute value of text, email,search, tel, or url.
The main difference between the placeholder and value attributes is that the value text stays in place during focus unless manually deleted by a user. This is great for pre-populating data, such as personal information for a user, but not for providing suggestions. The difference between the two attributes can be seen below.
The required HTML5 attribute enforces that an element or control contain a value upon being submitted to the server. Should an element or control not have a value an error message will be displayed requesting a user complete the required field. Currently error message styles are controlled by the browser and are unable to be styled with CSS. Elements, on the other hand, can be styled using the :optional and :required CSS pseudo-classes.
Validation also occurs specific to a control’s type. For example, an input with a type attribute value of email will require that not only a value exist within the input, but that it also includes a valid email format.
Other form and input attributes include, but are not limited to the following. Please feel free to research and look into these attributes as necessary.