i

Learn HTML and CSS in 10 Days

Organizing Form Element

Capturing the data with the help of the input element is half the battle. Organizing form controls and elements are the other half. Whenever the user is filling the forms, it is important that they should know what to fill where.

With the help of labels, fieldsets, and legends, we can guide the users as well as organize our forms in a much better way.

Label

Labels help in providing headings or captions for form controls. To set up the label, we use the element. The label should have text that defines the controls or inputs they pertain to.

The label should have a ‘for’ attribute whose value should be same as that of the ‘id’ attribute on the form control the label corresponds to.

If needed, then the element may bind from controls, such as checkboxes or radio buttons. Doing that offers the omission of 'id' as well as 'for' attributes.

Fieldset

Fieldsets group helps in forming labels and controls in an organized section. The element is a block-level element that binds related elements, especially inside a element in an organized manner.

Legend

A legend sets up a heading or caption for the element. The elements bind the text that describes the form controls that fall inside the fieldset. The code should have a element just after the opening tag.