Skip to content

Commit 54b0fe0

Browse files
aayush105aayush105
authored
Merge pull request you-dont-need#755 from NithinU2802/feature/form-handling
To add form handling using only css
2 parents 7a9b984 + b730638 commit 54b0fe0

File tree

5 files changed

+251
-0
lines changed

5 files changed

+251
-0
lines changed

‎CSS-Form-Handling/form-preview.png‎

399 KB
Loading

‎CSS-Form-Handling/index.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CSS-Only Form</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="form-container">
12+
<h1>CSS-Only Account Signup</h1>
13+
<p class="subtitle">An interactive form validation — zero JavaScript, pure CSS.</p>
14+
15+
<!-- Success Message (Hidden by default) -->
16+
<div class="success-popup" id="success">
17+
<div class="popup-content">
18+
<h2>🎉 Account Created Successfully!</h2>
19+
<p>Welcome! Your account has been created and you're ready to get started.</p>
20+
<a href="./index.html" class="close-btn">Create Another Account</a>
21+
</div>
22+
</div>
23+
24+
<form class="validation-form" action="#success" method="GET">
25+
<!-- Name Field -->
26+
<div class="input-group">
27+
<label for="name">Full Name <span class="required">*</span></label>
28+
<input
29+
type="text"
30+
id="name"
31+
name="name"
32+
required
33+
minlength="2"
34+
pattern="[A-Z][A-Za-z\s]{2,}"
35+
placeholder="Enter your full name"
36+
/>
37+
<div class="error-message">Please enter a valid name (first letter need to be capital, letters only, minimum 2 letters required)</div>
38+
</div>
39+
40+
<!-- Email Field -->
41+
<div class="input-group">
42+
<label for="email">Email Address <span class="required">*</span></label>
43+
<input
44+
type="email"
45+
id="email"
46+
name="email"
47+
pattern="^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$"
48+
required
49+
placeholder="Enter your email address"
50+
/>
51+
52+
<div class="error-message">Please enter a valid email address</div>
53+
</div>
54+
55+
<!-- Phone Field -->
56+
<div class="input-group">
57+
<label for="phone">Phone Number <span class="required">*</span></label>
58+
<input
59+
type="tel"
60+
id="phone"
61+
name="phone"
62+
required
63+
pattern="^(\d{3}-\d{3}-\d{4}|\d{10})$"
64+
placeholder="435-837-2847"
65+
/>
66+
<div class="error-message">Please enter a valid phone number in the format XXX-XXX-XXXX</div>
67+
</div>
68+
69+
<!-- Password Field -->
70+
<div class="input-group">
71+
<label for="password">Password <span class="required">*</span></label>
72+
<input
73+
type="password"
74+
id="password"
75+
name="password"
76+
required
77+
minlength="6"
78+
placeholder="Enter your password"
79+
/>
80+
<div class="error-message">Password must be at least 6 characters long</div>
81+
</div>
82+
83+
<!-- Terms Checkbox -->
84+
<div class="checkbox-group">
85+
<input type="checkbox" id="terms" name="terms" required>
86+
<label for="terms">
87+
I agree to the <a href="#" target="_blank">Terms and Conditions</a> <span class="required">*</span>
88+
</label>
89+
</div>
90+
91+
<!-- Submit Button -->
92+
<button type="submit" class="submit-button">
93+
Create Account
94+
</button>
95+
</form>
96+
</div>
97+
</div>
98+
</body>
99+
</html>

‎CSS-Form-Handling/styles.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
2+
3+
* { margin: 0; padding: 0; box-sizing: border-box; }
4+
5+
body {
6+
font-family: 'Inter', sans-serif;
7+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
8+
min-height: 100vh;
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
padding: 20px;
13+
}
14+
15+
.container { width: 100%; max-width: 500px; }
16+
17+
.form-container {
18+
background: white;
19+
padding: 40px;
20+
border-radius: 12px;
21+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
22+
}
23+
24+
h1 { text-align: center; color: #374151; font-size: 28px; font-weight: 600; margin-bottom: 8px; }
25+
.subtitle { text-align: center; color: #6b7280; margin-bottom: 32px; font-size: 16px; }
26+
27+
.validation-form { display: flex; flex-direction: column; gap: 20px; }
28+
.input-group, .checkbox-group { display: flex; flex-direction: column; gap: 6px; }
29+
.checkbox-group { flex-direction: row; align-items: flex-start; gap: 12px; }
30+
31+
label { font-weight: 500; color: #374151; font-size: 14px; }
32+
.required { color: #dc2626; }
33+
34+
input[type="text"], input[type="email"], input[type="tel"], input[type="password"] {
35+
padding: 12px 16px;
36+
border: 2px solid #d1d5db;
37+
border-radius: 8px;
38+
font-size: 16px;
39+
transition: all 0.2s ease;
40+
outline: none;
41+
}
42+
43+
input[type="checkbox"] { width: 18px; height: 18px; accent-color: #4f46e5; cursor: pointer; margin-top: 2px; }
44+
.checkbox-group label { cursor: pointer; line-height: 1.5; }
45+
46+
/* Focus and Validation States */
47+
input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
48+
input:valid:not(:placeholder-shown) { border-color: #059669; }
49+
input:invalid:not(:focus):not(:placeholder-shown) { border-color: #dc2626; }
50+
51+
/* Error Messages - only show when field is invalid and touched */
52+
.error-message {
53+
color: #dc2626;
54+
font-size: 14px;
55+
font-weight: 500;
56+
display: none;
57+
margin-top: 4px;
58+
}
59+
60+
.input-group input:invalid:not(:focus):not(:placeholder-shown) + .error-message { display: block; }
61+
62+
/* Submit Button */
63+
.submit-button {
64+
background: #4f46e5;
65+
color: white;
66+
border: none;
67+
padding: 14px 24px;
68+
border-radius: 8px;
69+
font-size: 16px;
70+
font-weight: 600;
71+
cursor: pointer;
72+
transition: all 0.2s ease;
73+
margin-top: 12px;
74+
}
75+
76+
.submit-button:hover { background: #3730a3; transform: translateY(-1px); }
77+
.submit-button:active { transform: translateY(0); }
78+
79+
/* Disable submit when form invalid */
80+
.validation-form:invalid .submit-button {
81+
background: #9ca3af;
82+
cursor: not-allowed;
83+
transform: none;
84+
}
85+
86+
/* Success Popup */
87+
.success-popup {
88+
position: fixed;
89+
top: 0;
90+
left: 0;
91+
width: 100%;
92+
height: 100%;
93+
background: rgba(0, 0, 0, 0.5);
94+
display: none;
95+
align-items: center;
96+
justify-content: center;
97+
z-index: 1000;
98+
}
99+
100+
.success-popup:target { display: flex; }
101+
102+
.popup-content {
103+
background: white;
104+
padding: 40px;
105+
border-radius: 12px;
106+
text-align: center;
107+
max-width: 400px;
108+
margin: 20px;
109+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
110+
}
111+
112+
.popup-content h2 { color: #059669; margin-bottom: 16px; font-size: 24px; }
113+
.popup-content p { color: #374151; line-height: 1.6; margin-bottom: 20px; }
114+
115+
.close-btn {
116+
display: inline-block;
117+
background: #4f46e5;
118+
color: white;
119+
padding: 10px 20px;
120+
border-radius: 6px;
121+
text-decoration: none;
122+
font-weight: 500;
123+
transition: all 0.2s ease;
124+
}
125+
126+
.close-btn:hover { background: #3730a3; transform: translateY(-1px); }
127+
128+
/* Links */
129+
a { color: #4f46e5; text-decoration: none; }
130+
a:hover { text-decoration: underline; }
131+
132+
/* Responsive */
133+
@media (max-width: 640px) {
134+
.form-container { padding: 24px; margin: 10px; }
135+
h1 { font-size: 24px; }
136+
.subtitle { font-size: 14px; }
137+
}

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
4545
- [City Animation Footer](#city-animation-footer)
4646
- [Carousel Effect](#carousel-effect)
4747
- [Counter of Checked Checkboxes](#counter-of-checked-check-boxes)
48+
- [CSS Form Handling](#css-form-handling)
4849
- [Download_buttons](#Download_buttons)
4950
- [Dog Box Animation](#dog-box-animation)
5051
- [Dropdown Menu](#dropdown-menu)
@@ -642,6 +643,20 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
642643

643644
---
644645

646+
## <a id="css-form-handling"></a>CSS Form Handling
647+
648+
[<img src="images/form-preview.png" height="230" title="CSS Form Handling">](CSS-Form-Handling/)
649+
650+
**[⬆ back to top](#quick-links)**
651+
652+
## <a id="Download_buttons"></a>Download_buttons
653+
654+
[<img src="images/Download_buttons.png" title="Download_buttons">](https://codepen.io/Shail-Sharma-the-animator/pen/rNXYMGx)
655+
656+
**[⬆ back to top](#quick-links)**
657+
658+
---
659+
645660
## <a id="Download_buttons"></a>Download buttons
646661

647662
[<img src="images/Download_buttons.png" title="Download_buttons">](https://codepen.io/Shail-Sharma-the-animator/pen/rNXYMGx)

‎images/form-preview.png‎

399 KB
Loading

0 commit comments

Comments
 (0)