In this tutorial, we’ll teach you how to create a clean, responsive, and registration form using only HTML and CSS. This form includes fields like name, email, phone, password, and gender selection, and it’s fully responsive for mobile devices.
Step 1: Set Up the Basic HTML Structure
Start with a standard HTML5 document:
NOTES: we have included an external stylesheet (style.css). using <link rel=”stylesheet” href=”style.css”> in the head tag
Step 2: Create the Form Container
Inside the <body>, add a container that holds the entire form:
Step 3: Building the Form Fields
We’ll organize fields into logical groups using semantic HTML:
Full Name & Username (Row 1) etc
all are Repeated for Email & Phone, and Password & Confirm Password, changing only the input types and IDs as above
Gender Selection
NOTES: All radio buttons share the same name="gender" so only one can be selected.
Submit Button
Step 4: Style with CSS
Now let’s STYLE it sing CSS.
Reset & Global Styles
his ensures consistent spacing and modern font rendering.
Full-Page Background (body)
We use a soft purple-to-blue gradient for visual appeal and center the form vertically and horizontally.
Form Container
White background, subtle shadow, and rounded corners
Two-Column Layout (Desktop)
Using flex, we place two fields side-by-side. flex-wrap: wrap ensures they stack on small screens.
Input Fields
Using flex, we place two fields side-by-side. flex-wrap: wrap ensures they stack on small screens.
Radio Buttons
Submit Button
Step 5: Make It Responsive
Add a media query for mobile Resposive devices:
NOTES: On small screens (based on the css style above):
- Form rows become single columns
- Gender options stack vertically
- Everything remains readable and tappable
Final Result (OUTPUT)
