-
Notifications
You must be signed in to change notification settings - Fork 1
/
DatingWebsite.html
121 lines (115 loc) · 4.12 KB
/
DatingWebsite.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
<!DOCTYPE html>
<html>
<head>
<style>
fieldset{background-color: lightyellow;
border: 10px solid yellow;
margin-bottom: 10px;
width: :720px;}
label{width: 180px;
display: inline-block;
text-align: right;
text-align: top;
}
label:hover { font-size:40px }
.abc {
width: auto;
width: 180px;
display: inline-block;
text-align: right;
text-align: top;
}
textarea{
width: 360px;
height: 50px;
}
.a{
display:inline-block;
text-align: center;
width: 70px;
background-color: darkred;
color: white;
}
.b{
display:inline-block;
text-align: center;
width: 70px;
background-color: rebeccapurple;
color: white;
}
</style>
</head>
<body>
<h1>Please Enter your Details For Our Dating Website!</h1>
<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Your Face</legend>
<label for="YourImage">YourImage:</label>
<input type="file" id="YourImage" name="Image" required ></input>
<br>
<label for="ImagePreview">Image Preview:</label>
<img id="preview"></img>
<br>
</fieldset>
<fieldset>
<legend>Your General Details</legend>
<label for="Name">Name:</label>
<input type="text" id="Name" name="Name" Placeholder="Your Full Name" required></input>
<br>
<label for="Gender" class="abc">Gender:</label>
<input type="radio" id="Gender" name="Gender" required value="Male" >Male</input>
<input type="radio" id="Gender" name="Gender" required value="Female">Female</input>
<br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" value="18" required></input>
<br>
<label for="DOB">Date of birth:</label>
<input type="date" id="DOB" name="DOB" ></input>
<br>
<label for="color">Favourite Color:</label>
<input type="color" id="color" name="color" ></input>
<br>
<label for="country">Which country:</label>
<select name="country" id="country">
<option value="INDIA">INDIA</option>
<option value="USA">USA</option>
<option value="RUSSIA">RUSSIA</option>
<option value="AFRICA">AFRICA</option>
<option value="CHINA">CHINA</option>
<option value="NoSelection">No selection</option>
</select>
<br>
</fieldset>
<fieldset>
<legend>Your Indicators</legend>
<label for="Height">Height:</label><span class="a">
Short</span><input type="range" min="0" max="100" id="Height" name="height" ><span class="b">
Tall</span></input>
<br>
<label for="salary">Salary:</label>
<span class="a">Poor</span><input type="range" min="0" max="100" name="salary" id="salary"><span class="b">Rich</span></input>
<br>
</fieldset>
<fieldset>
<legend>Your Contact Information</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required></input>
<br>
<label for="mobile">Mobile:</label>
<input type="tel" id="mobile" name="mobile"></input>
<br>
<label for="address">Address:</label>
<textarea name="address" id="address" ></textarea>
<br>
<label for="methodsToContact" class="abc">Methods to contact you:</label>
<input type="checkbox" id="methodsToContact" name="methods" value="email" >Email</input>
<input type="checkbox" id="methodsToContact" name="methods" value="whatsapp" >Whatsapp</input>
<input type="checkbox" id="methodsToContact" name="methods" value="in-appchat" >In-appchat</input>
<br>
</fieldset>
<input type="submit" value="Submit!"></input>
</form>
<script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js">
</script>
</body>
</html>