Start with adding the text Personal Details to an h2 element.
Below the heading, add a form element with a class attribute set to "personal-details-form".
Inside the form element,
Add a label element with text Username with a for attribute set as username. Below that, add an input element with the placeholder attribute set as Renu Sen to allow users to enter their name.
Below that, add a label element with the text Password with a for attribute set as password. Below that, add an input element to allow user to enter their password.
Below that, add a label element with the text Address with a for attribute set as address. Below that, add a text area element with the placeholder attribute set as World Trade Center, Kharadi, Pune, Maharashtra 41101 to allow user to enter their full address.
Make sure the element has 4 rows and 50 columns.
Below that, add a label element with the text Favourite Ice Cream Flavour with a for attribute set as flavour.
Below that, add a dropdown menu for the users to select their favorite ice cream flavours.
Selections should have options for the following flavours:
- Chocolate
- Vanilla
- Strawberry
- Pista
- Butterscotch
The option value should match the flavor, but in lowercase.
Below that, add a label element with the text Phone Number with a for attribute set as phone-number. Below that, add an input element with the placeholder attribute set as +911234567890 to allow user to enter their phone number.
Below the phone number field, add a div element with a class of "button-container".
Inside this div element, add two Button elements.
The first one, upon clicking, should reset all the data entered in the form. This button should have the text Reset
.
The second button should have the text Submit
.
When clicked, this button should submit the form.
Make sure to specify their types.
You need to ensure that if we click any of the labels, the input element associated with it should be highlighted.
Don't add any unnecessary id
, name
or class
attribute.