How to create a form with div + css maintaining the xhtml semantic structure

In form, we can group and classify information in form. For example, in form of registry form, we can divide registration information
Basic information (required generally)
Details (optional)
So how can we achieve it better? We can consider adding the following two tags to the form:
Fieldset: groups forms. A form can have multiple fieldsets.
Legend: description of each group.
Let's look at the following code:

The code is as follows:	Copy code
<Form id = "" class = "democss" action = ""> <Fieldset> <Legend> Basic Register </legend> <P> First name: <input type = "text" name = "fname" value = ""/> </p> ... </Fieldset> <Fieldset> <Legend> Detailed Register </legend> <P> Interest: <input type = "text" name = "interest" value = ""/> </p> ... </Fieldset> ... </Form>

Fieldset has borders by default, while legend is usually displayed in the upper left corner by default. However, in some pages, we do not want to make the default styles or la s of fieldset and legend affect the appearance of the design scheme. The solution is to set the border of fieldset to 0 in CSS and the display of legend to none.
◆ Label
Label labels should be familiar to everyone. We give a label to the text label in the form, and use the for attribute to associate it with the form component. The effect is to click the text label, the cursor is displayed in the corresponding form component.
Let's look at the following code:

The code is as follows:

Copy code

<Form id = "wwwwebjxcom" class = "democss" action = ""> <Fieldset> <Legend> Basic Register </legend> <P> <Label for = "fname"> First name: </label> <Input type = "text" id = "fname" name = "fname" value = ""/> </P> ... </Fieldset> <Fieldset> <Legend> Detailed Register </legend> <P> <Label for = "interest"> Interest: </label> <Input type = "text" id = "interest" name = "interest" value = ""/> </P> ... </Fieldset> ... </Form>