Skip to content

Commit 42f782f

Browse files
wecoded-devwecoded-dev
authored
Create forms.html
1 parent f03428f commit 42f782f

1 file changed

Lines changed: 132 additions & 0 deletions

File tree

‎forms.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
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>Premium Forms.css Demo</title>
7+
<link href="forms.css" rel="stylesheet">
8+
<!-- Google Fonts -->
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600&display=swap" rel="stylesheet">
10+
</head>
11+
<body>
12+
<!-- Premium Form Section -->
13+
<div class="form-section form-section-royal form-animate">
14+
<div class="form-section-header">
15+
<h2 class="form-section-title">Royal Application Form</h2>
16+
</div>
17+
18+
<form class="form-stacked form-stagger">
19+
<!-- Floating Label Input -->
20+
<div class="form-floating form-floating-royal">
21+
<input type="text" class="form-input form-input-royal" id="fullName" placeholder=" " required>
22+
<label for="fullName" class="form-label">Full Name</label>
23+
</div>
24+
25+
<!-- Animated Input with Glow -->
26+
<div class="form-group">
27+
<label for="email" class="form-label">Email Address</label>
28+
<input type="email" class="form-input form-input-glow" id="email" required>
29+
</div>
30+
31+
<!-- Royal Select -->
32+
<div class="form-group">
33+
<label for="title" class="form-label">Royal Title</label>
34+
<select class="form-input form-select form-select-royal" id="title">
35+
<option>Select Title</option>
36+
<option>Duke/Duchess</option>
37+
<option>Count/Countess</option>
38+
<option>Baron/Baroness</option>
39+
</select>
40+
</div>
41+
42+
<!-- Enhanced Textarea -->
43+
<div class="form-group">
44+
<label for="message" class="form-label">Royal Proclamation</label>
45+
<textarea class="form-input form-textarea form-textarea-royal" id="message" rows="4" placeholder="State your proclamation..."></textarea>
46+
<div class="form-char-counter">0/500</div>
47+
</div>
48+
49+
<!-- Checkbox Group -->
50+
<div class="form-group">
51+
<label class="form-label">Royal Privileges</label>
52+
<div class="form-check form-check-royal">
53+
<input type="checkbox" class="form-check-input" id="privilege1">
54+
<label for="privilege1" class="form-check-label">Castle Access</label>
55+
</div>
56+
<div class="form-check form-check-royal">
57+
<input type="checkbox" class="form-check-input" id="privilege2">
58+
<label for="privilege2" class="form-check-label">Royal Gardens</label>
59+
</div>
60+
</div>
61+
62+
<!-- Radio Group -->
63+
<div class="form-group">
64+
<label class="form-label">Succession Line</label>
65+
<div class="form-radio">
66+
<input type="radio" class="form-radio-input" name="succession" id="direct">
67+
<label for="direct" class="form-radio-label">Direct Line</label>
68+
</div>
69+
<div class="form-radio">
70+
<input type="radio" class="form-radio-input" name="succession" id="collateral">
71+
<label for="collateral" class="form-radio-label">Collateral Line</label>
72+
</div>
73+
</div>
74+
75+
<!-- Range Slider -->
76+
<div class="form-group">
77+
<label for="nobility" class="form-label">Nobility Score</label>
78+
<input type="range" class="form-range form-range-royal" id="nobility" min="0" max="100">
79+
</div>
80+
81+
<!-- File Upload -->
82+
<div class="form-group">
83+
<label class="form-label">Coat of Arms</label>
84+
<div class="form-file">
85+
<input type="file" class="form-file-input" id="coatOfArms" accept="image/*">
86+
<label for="coatOfArms" class="form-file-label">
87+
Upload Coat of Arms
88+
</label>
89+
</div>
90+
</div>
91+
92+
<!-- Toggle Switch -->
93+
<div class="form-group">
94+
<label class="form-switch form-switch-royal">
95+
<input type="checkbox" class="form-switch-input">
96+
<span class="form-switch-slider"></span>
97+
<span class="form-switch-label">Royal Announcement</span>
98+
</label>
99+
</div>
100+
101+
<!-- Password with Strength -->
102+
<div class="form-group">
103+
<label for="password" class="form-label">Royal Seal Password</label>
104+
<input type="password" class="form-input" id="password" required>
105+
<div class="form-password-strength">
106+
<div class="form-password-strength-bar form-password-weak"></div>
107+
</div>
108+
</div>
109+
110+
<!-- Search Input -->
111+
<div class="form-group">
112+
<label for="search" class="form-label">Search Royal Archives</label>
113+
<input type="search" class="form-input form-search" id="search" placeholder="Search...">
114+
</div>
115+
</form>
116+
</div>
117+
118+
<!-- Modern Form Layout -->
119+
<div class="form-section form-animate">
120+
<div class="form-grid">
121+
<div class="form-group">
122+
<label for="firstName" class="form-label">First Name</label>
123+
<input type="text" class="form-input form-input-modern" id="firstName">
124+
</div>
125+
<div class="form-group">
126+
<label for="lastName" class="form-label">Last Name</label>
127+
<input type="text" class="form-input form-input-modern" id="lastName">
128+
</div>
129+
</div>
130+
</div>
131+
</body>
132+
</html>

0 commit comments

Comments
 (0)