Create an elegant registration form using HTML and CSS. The form should be centered horizontally on the page and include fields for personal information and a submit button. The form should be styled using CSS. This exercise will help you practice form design and CSS styling for user-friendly web forms.
Form Requirements:- First Name: A text field for the user’s first name.
- Last Name: A text field for the user’s last name.
- Password: Password field for account security.
- Age: A number field for the user’s age.
- Date of Birth: A date picker for the user’s date of birth.
- Gender: Radio buttons labeled ‘Male’, ‘Female’, and ‘Other’.
- About: A text area for the user to provide additional information.
- Submit Button: A button to submit the form.
Styling Guidelines:
- Use a soft color palette to make the form look inviting and professional.
- Inputs should have subtle
borders
andpadding
to ensure they are comfortable to use. - Ensure the form has a width as
400px
and is centered on the page. - Use CSS to style the
labels
andinputs
consistently and ensure that the form elements are visually aligned. - The
submit
button should be styled to stand out from the form elements.
HTML Structure:
- The form should be wrapped in a
<form>
element. - Use
<input>
,<textarea>
, and<button>
elements for the form controls. - Organize each form control with its label into a logical grouping, potentially using
<div>
or<fieldset>
elements.
Deliverable:
Submit a static HTML page with the registration form, as well as a CSS stylesheet.
Make sure that your final design is centered on the page and that each form control is clearly distinguishable. This exercise will help you practice form design and CSS styling for user-friendly web forms.