Fieldsets and other options in forms

Tweet

Fieldsets helps to group together common fields in a form with a rectangular box and a heading around it. There are other options(name, disabled, readonly, etc..), where one must know the functioning of it, so that they know how the form works instead of giving only the physical structure or elements in a form.

Fieldsets

<fieldset>
<legend>Personal Details</legend>
<!-- some code missing -->
</fieldset>

<fieldset>
<legend>Company Details</legend>
<!-- some code missing -->
</fieldset>

<fieldset>
<legend>Address</legend>
<!-- some code missing -->
</fieldset>

Like fieldset is described in the introduction, it is used to group and add a border that is shown above in the picture. The legend element breaks the fieldset border and displays the text as heading to the fieldset.

name Attribute

A form is sent to a form-processing script, where the values of the forms are taken to do further process accordingly. But, how does it differentiate the various input elements and multiple checkboxes, etc... Due to that, the name attribute is used applied to each element and this makes it easy for the script to read the form.

disabled Attribute

The disabled(disabled="disabled") attribute can be used in input, textarea, or select elements. When the form field is disabled, their values won't be sent or the user won't be able to change the value. This option is sometimes used in Javascript.

read-only Attribute

This readonly attribute(readonly="readonly"), can be used for fields like input and textarea elements. This is similar to disabled attribute, and it won't allow user to edit the form fields. But, the only difference to the disabled is that, the value will be sent when the form is submitted.

For any doubts and clarifications, please comment below.