Legend tag allows a handy heading

This construct uses semantic elements in the markup, namely:

Importantly, it is a width written into the CSS associated with the label that helps form the alignment of the edges of the data entry fields. This width can be modified in the CSS as necessary. As can the line underneath the label, which is not standard, just something I included.

The form itself has not yet started, but does so now.






Inline labels have a class added to the label tag, to allow them to display inline. Vertical positions vary from browser to browser, so eventually, careful CSS will need to be done for any inline labels.






A smaller one

This just shows a small version






Message