Skip to content

Commit 30185d1

Browse files
Muthu1206Muthu1206
authored
form validation index.html
1 parent ec021c9 commit 30185d1

File tree

1 file changed

+95
-49
lines changed

1 file changed

+95
-49
lines changed

‎form-validation/index.html‎

Lines changed: 95 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,98 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title></title>
5-
<link
6-
rel="stylesheet"
7-
href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
8-
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
9-
crossorigin="anonymous"
10-
/>
11-
<link rel="stylesheet" type="text/css" href="style.css" />
12-
</head>
13-
<body>
14-
<div class="container">
15-
<div class="header">
16-
<h2>CREATE ACCOUNT</h2>
17-
</div>
18-
<form class="form" id="form">
19-
<div class="form-control">
20-
<label>Username</label>
21-
<input type="text" placeholder="beautyndbeast" id="username" />
22-
<i class="fas fa-check-circle"></i>
23-
<i class="fas fa-exclamation-circle"></i>
24-
<small>Error Message</small>
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>Create Account</title>
7+
8+
<!-- Font Awesome Icons -->
9+
<link
10+
rel="stylesheet"
11+
href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
12+
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
13+
crossorigin="anonymous"
14+
/>
15+
16+
<!-- External CSS -->
17+
<link rel="stylesheet" type="text/css" href="style.css" />
18+
</head>
19+
20+
<body>
21+
<div class="container">
22+
<header class="header">
23+
<h2>Create Account</h2>
24+
</header>
25+
26+
<form class="form" id="form" novalidate>
27+
<!-- Username Input -->
28+
<div class="form-control">
29+
<label for="username">Username</label>
30+
<input
31+
type="text"
32+
id="username"
33+
name="username"
34+
placeholder="beautyndbeast"
35+
required
36+
aria-describedby="usernameError"
37+
/>
38+
<i class="fas fa-check-circle"></i>
39+
<i class="fas fa-exclamation-circle"></i>
40+
<small id="usernameError">Error Message</small>
41+
</div>
42+
43+
<!-- Email Input -->
44+
<div class="form-control">
45+
<label for="email">Email</label>
46+
<input
47+
type="email"
48+
id="email"
49+
name="email"
50+
placeholder="[email protected]"
51+
required
52+
aria-describedby="emailError"
53+
/>
54+
<i class="fas fa-check-circle"></i>
55+
<i class="fas fa-exclamation-circle"></i>
56+
<small id="emailError">Error Message</small>
57+
</div>
58+
59+
<!-- Password Input -->
60+
<div class="form-control">
61+
<label for="password">Password</label>
62+
<input
63+
type="password"
64+
id="password"
65+
name="password"
66+
placeholder="password nahi batate"
67+
required
68+
aria-describedby="passwordError"
69+
/>
70+
<i class="fas fa-check-circle"></i>
71+
<i class="fas fa-exclamation-circle"></i>
72+
<small id="passwordError">Error Message</small>
73+
</div>
74+
75+
<!-- Confirm Password Input -->
76+
<div class="form-control">
77+
<label for="confirm">Confirm Password</label>
78+
<input
79+
type="password"
80+
id="confirm"
81+
name="confirm"
82+
placeholder="yeh bhi nahi batate"
83+
required
84+
aria-describedby="confirmError"
85+
/>
86+
<i class="fas fa-check-circle"></i>
87+
<i class="fas fa-exclamation-circle"></i>
88+
<small id="confirmError">Error Message</small>
89+
</div>
90+
91+
<!-- Submit Button -->
92+
<button type="submit">Submit</button>
93+
</form>
2594
</div>
26-
<div class="form-control">
27-
<label>Email</label>
28-
<input type="email" placeholder="[email protected]" id="email" />
29-
<i class="fas fa-check-circle"></i>
30-
<i class="fas fa-exclamation-circle"></i>
31-
<small>Error Message</small>
32-
</div>
33-
<div class="form-control">
34-
<label>Password</label>
35-
<input type="password" placeholder="password nahi batate " id="password" />
36-
<i class="fas fa-check-circle"></i>
37-
<i class="fas fa-exclamation-circle"></i>
38-
<small>Error Message</small>
39-
</div>
40-
<div class="form-control">
41-
<label>Confirm Password</label>
42-
<input type="password" placeholder="yeh bhi nahi batate " id="confirm" />
43-
<i class="fas fa-check-circle"></i>
44-
<i class="fas fa-exclamation-circle"></i>
45-
<small>Error Message</small>
46-
</div>
47-
<button>Submit</button>
48-
</form>
49-
</div>
50-
<script type="text/javascript" src="script.js"></script>
51-
</body>
95+
96+
<script type="text/javascript" src="script.js"></script>
97+
</body>
5298
</html>

0 commit comments

Comments
 (0)