-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
187 lines (163 loc) · 8.09 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-1ZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9s+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="./script.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<div class="title">Student Registration Form
</div>
<form action="POST" data-netlify="true">
<div class="form">
<div class="inputfield">
<label>First Name</label>
<input type="text" class="input" id="name" name="fname" placeholder="Enter first name" maxlength="30"
pattern="[A-Za-z]{1,32}" title="Enter only alphabets" required>
</div>
<div class="inputfield">
<label>Last Name</label>
<input type="text" class="input" id="name" name="lname" placeholder="Enter last name" maxlength="30"
pattern="[A-Za-z]{1,32}" title="Enter only alphabets" required>
</div>
<div class="inputfield" id="gender">
<label for="">Gender</label>
<input type="radio" name="gender" id="radio" value="Male">Male
<input type="radio" name="gender" id="radio" value="Female">Female
</div>
<div class="inputfield">
<label for="">Age</label>
<input type="text" class="input" name="age" placeholder="Enter your age" maxlength="2" pattern="^[0-9]{2}$"
required placeholder="Enter your age" title="Enter numbers only">
</div>
<div class="inputfield">
<label for="">Date of Birth</label>
<input type="date" class="input" name="dob" required>
</div>
<div class="inputfield">
<label>Email Address</label>
<input type="email" class="input" name="email" placeholder="Enter your email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$" required>
</div>
<div class="inputfield">
<label>Password</label>
<input type="password" class="input" id="password" name="" placeholder="Enter your password min 8 characters"
autocomplete="off" onkeyup='check()' pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
maxlength="100" minlength="8" required>
</div>
<div class="inputfield">
<label>Confirm Password</label>
<input type="password" onkeyup='check()' class="input" id="confirm-password" name=""
placeholder="Confirm password" autocomplete="off" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
maxlength="100" minlength="8" required>
</div>
<p id="message"></p>
<div class="inputfield">
<label for="">Phone Number</label>
<div class="custom-select" id="phone-codes">
<select id="phone-code">
<option value="+91">+91</option>
</select>
</div>
<input type="tel" class="input" name="phone-number" maxlength="10" id="phone-number"
placeholder="Enter your phone number" pattern="[7-9]{1}[0-9]{9}" title="Please enter valid phone number">
</div>
<div class="inputfield">
<label>Address</label>
<textarea class="textarea" name="address" id="" cols="30" rows="5" placeholder="Enter your address"
pattern="^[a-zA-Z][a-zA-Z0-9-_.]{5,12}$" maxlength="100" required></textarea>
</div>
<div class="inputfield">
<label>State</label>
<div class="custom_select">
<select id="state" name="state" required>
<option value="">--Select your state--</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Ladakh">Ladakh</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Puducherry">Puducherry</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West Bengal</option>
</select>
</div>
</div>
<div class="inputfield">
<label>Pin Code</label>
<input type="text" class="input" name="pincode" placeholder="Enter your pin code" maxlength="6"
pattern="^[0-9]{6}$" required>
</div>
<div class="inputfield" id="hobbies" >
<label for="">Hobbies</label>
<div class="hobbies" >
<input type="checkbox" name="Hobbies" id="" value="Music">
<label for="">Music</label>
<input type="checkbox" name="Hobbies" id="" value="Movies">
<label for="">Movies</label>
<input type="checkbox" name="Hobbies" id="" value="Sports">
<label for="">Sports</label>
<input type="checkbox" name="Hobbies" id="" value="Travel">
<label for="">Travel</label>
</div>
</div>
<div class="inputfield">
<label>Upload Photo</label><p id="file-size">*Max size 100kb.</p>
<input type="file" name="myfile" id="myfile" placeholder="Upload your photo" rows="7" required />
</div>
<div class="inputfield terms">
<label class="check">
<input type="checkbox" name="check" value="Declared" required>
<span class="checkmark"></span>
</label>
<p>I hereby declare that the above information provided is true and correct.</p>
</div>
<div class="inputfield" required>
<div data-netlify-recaptcha="true"></div>
</div>
<div class="inputfield btns" id="btn">
<button type="submit" value="Register" class="btn" onclick="checkPassword()">Register</button>
<button type="reset" value="Reset" class="btn">Reset</button>
</div>
</div>
</form>
</div>
</body>
</html>