Skip to content

Commit 4186862

Browse files
aayush105aayush105
authored
Merge pull request #998 from pranavpanmand/add-registration-form
Added Responsive Registration Form Template (HTML & CSS Only) Fixes #997
2 parents cffdf80 + b8bf0ef commit 4186862

File tree

3 files changed

+268
-0
lines changed

3 files changed

+268
-0
lines changed

‎index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,8 @@ <h1>You Dont Need JavaScript</h1>
359359
<a href="./misc/loader-11.html">Loader 11</a>
360360
<a href="./misc/Spiner.html">Loader 12</a>
361361
<a href="./new_Loader/index.html">Loader 13</a>
362+
363+
362364
</td>
363365
</tr>
364366

@@ -444,6 +446,7 @@ <h1>You Dont Need JavaScript</h1>
444446
<a href="./Glassmorphism login page/index.html"
445447
>Glassmorphism Login Page</a
446448
>
449+
<a href="./registration form/index.html">Registration Form</a>
447450
</td>
448451
</tr>
449452

‎registration form/index.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Responsive Registration Form</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
13+
<section class="container">
14+
15+
<header>Registration Form</header>
16+
17+
<form action="#" class="form">
18+
19+
<div class="input-box">
20+
<label>Full Name</label>
21+
<input type="text" placeholder="Enter full name" required>
22+
</div>
23+
24+
<div class="input-box">
25+
<label>Email Address</label>
26+
<input type="text" placeholder="Enter email address" required>
27+
</div>
28+
29+
<div class="column">
30+
31+
<div class="input-box">
32+
<label>Mobile Number</label>
33+
<input type="number" placeholder="Enter mobile number" required>
34+
</div>
35+
36+
<div class="input-box">
37+
<label>Birth Date</label>
38+
<input type="date" required>
39+
</div>
40+
41+
</div>
42+
43+
<div class="gender-box">
44+
45+
<h3>Gender</h3>
46+
47+
<div class="gender-option">
48+
49+
<div class="gender">
50+
<input type="radio" id="check-male" name="gender">
51+
<label for="check-male">Male</label>
52+
</div>
53+
54+
<div class="gender">
55+
<input type="radio" id="check-female" name="gender">
56+
<label for="check-female">Female</label>
57+
</div>
58+
59+
<div class="gender">
60+
<input type="radio" id="check-other" name="gender">
61+
<label for="check-other">Prefer not to say</label>
62+
</div>
63+
64+
</div>
65+
66+
</div>
67+
68+
<div class="input-box address">
69+
70+
<label>Address</label>
71+
<input type="text" placeholder="Enter street address" required>
72+
<input type="text" placeholder="Enter street address line 2" required>
73+
74+
<div class="column">
75+
76+
<div class="select-box">
77+
<select>
78+
<option hidden>Country</option>
79+
<option>India</option>
80+
<option>America</option>
81+
<option>Russia</option>
82+
<option>Australia</option>
83+
</select>
84+
85+
</div>
86+
87+
<input type="text" placeholder="Enter your city" required>
88+
89+
</div>
90+
91+
<div class="column">
92+
93+
<input type="text" placeholder="Enter your region" required>
94+
<input type="number" placeholder="Enter postal code" required>
95+
96+
</div>
97+
98+
</div>
99+
100+
<button>Submit</button>
101+
102+
</form>
103+
104+
</section>
105+
106+
</body>
107+
108+
</html>

‎registration form/style.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
user-select: none;
9+
}
10+
11+
body {
12+
min-height: 100vh;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
padding: 20px;
17+
background: rgb(130, 106, 251);
18+
}
19+
20+
.container {
21+
position: relative;
22+
max-width: 700px;
23+
width: 100%;
24+
background: #fff;
25+
padding: 25px;
26+
border-radius: 8px;
27+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
28+
}
29+
30+
.container header {
31+
font-size: 1.5rem;
32+
color: #333;
33+
font-weight: 500;
34+
text-align: center;
35+
}
36+
37+
.container .form {
38+
margin-top: 30px;
39+
}
40+
41+
.form .input-box {
42+
width: 100%;
43+
margin-top: 20px;
44+
}
45+
46+
.input-box label {
47+
color: #333;
48+
}
49+
50+
.form :where(.input-box input, .select-box) {
51+
position: relative;
52+
height: 50px;
53+
width: 100%;
54+
outline: none;
55+
font-size: 1rem;
56+
color: #707070;
57+
margin-top: 8px;
58+
border: 1px solid #ddd;
59+
border-radius: 6px;
60+
padding: 0 15px;
61+
outline: none;
62+
-webkit-tap-highlight-color: transparent;
63+
}
64+
65+
.input-box input:focus {
66+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
67+
}
68+
69+
.form .column {
70+
display: flex;
71+
column-gap: 15px;
72+
}
73+
74+
.form .gender-box {
75+
margin-top: 20px;
76+
}
77+
78+
.gender-box h3 {
79+
color: #333;
80+
font-size: 1rem;
81+
font-weight: 400;
82+
margin-bottom: 8px;
83+
}
84+
85+
.gender {
86+
outline: none;
87+
-webkit-tap-highlight-color: transparent;
88+
}
89+
90+
.form :where(.gender-option, .gender) {
91+
display: flex;
92+
align-items: center;
93+
column-gap: 15px;
94+
flex-wrap: wrap;
95+
}
96+
97+
.form .gender {
98+
column-gap: 5px;
99+
cursor: pointer;
100+
}
101+
102+
.gender input {
103+
accent-color: rgb(130, 106, 251);
104+
}
105+
106+
.form :where(.gender input, .gender label) {
107+
cursor: pointer;
108+
}
109+
110+
.gender label {
111+
color: #707070;
112+
}
113+
114+
.address :where(input, .select-box) {
115+
margin-top: 20px;
116+
}
117+
118+
.select-box select {
119+
height: 100%;
120+
width: 100%;
121+
outline: none;
122+
border: none;
123+
color: #707070;
124+
font-size: 1rem;
125+
}
126+
127+
.form button {
128+
height: 55px;
129+
width: 100%;
130+
color: #fff;
131+
font-size: 1rem;
132+
font-weight: 400;
133+
border: none;
134+
margin-top: 30px;
135+
cursor: pointer;
136+
border-radius: 6px;
137+
transition: all 0.2s ease;
138+
background-color: rgb(130, 106, 251);
139+
outline: none;
140+
-webkit-tap-highlight-color: transparent;
141+
}
142+
143+
.form button:hover {
144+
background-color: rgb(88, 56, 250);
145+
}
146+
147+
/* Responsive */
148+
149+
@media screen and (max-width: 500px) {
150+
.form .column {
151+
flex-wrap: wrap;
152+
}
153+
154+
.form :where(.gender-option, .gender) {
155+
row-gap: 15px;
156+
}
157+
}

0 commit comments

Comments
 (0)