HTML-CSS/BasicDatingWebsite_with_css.html at master · yyk16293/HTML-CSS · GitHub

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
<!DOCTYPE html>
<html>
<head>
  <title>Dating Website</title>
  <style type="text/css">
    fieldset
    {
      background: lightyellow;
      border: 10px solid yellow;
      margin-bottom: 10px;
      width: 720px;
    }

    label
    {
      display: inline-block;
      width: 180px;
      vertical-align: top;
      text-align: right;
    }

    textarea
    {
      width: 360px;
      height: 50px;
    }
    .special
    {
      width: 60px;
      display: inline-block;
      color: white;
      text-align: center;
      vertical-align: top;
      background-color: Purple;
      box-shadow: 40px;
    }
    .specials
    {
      width: 60px;
      display: inline-block;
      color: white;
      text-align: center;
      vertical-align: top;
      background-color: maroon;
    }

  </style>
<body>

<h1>Please Enter Your Details For our Dating Website</h1>

<form method="post" enctype="multipart/form-data" action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php">
  <fieldset>
    <legend>Your Face</legend>
    <label for="image_you">Your image:</label><input type="file" required> <br>
    <img id="preview"><label for="image_prev">Image preview:</label></img>
  </fieldset>
  <br>

  <fieldset>
    <legend>Your General Details</legend>
    <label for="name">Name:</label>
    <input type= "text" placeholder="Your Full name" autofocus required></input> <br>
    <label for="gender" required>Gender:</label>
    <input type="radio" class="width-set" name="Male" required>Male</input>
    <input type="radio" class="width-set" name="Female" required>Female</input> <br>
    <label for="age">Age:</label>
    <input type="number" name="age" value=18 required></input>  <br>
    <label for="Date of Birth">Date of Birth:</label>
    <input type="date" name="DOB" required/>  <br>
    <label for="Favorite color:">Favorite color:</label>
    <input type="color" name="color" required/> <br>
    <label for="Which country:">Which country:</label>

   <select>
   <option value="" selected="selected"></option>
   <option value="USA">USA</option>
   <option value="UK">UK</option>
   <option value="RUSSIA">RUSSIA</option>
   <option value="FINLAND">FINLAND</option>
   <option value="BELARUS">BELARUS</option>
   </select>

  </fieldset>
  <br>

  <fieldset>
   <legend>Your indicators</legend>
       <label for="height">Height:</label><span class="specials">Short</span><input type="range" min="0" max="100"><span class="special">Tall</span><br>
       <label for="salary">Salary:</label><span class="specials">Poor</span></label><input type="range" min="0" max="100"><span class="special">Rich</span>
  </fieldset>

  <fieldset>
   <legend>Your Contact Information</legend>
       <label for="ema_il" required>Email:</label>
       <input type="email" name="email"></input> <br>
       <label for="telephone">Mobile:</label>
       <input type="tel" name="Mobile"> </input><br>
       <label for="address">Address:</label>
       <textarea></textarea><br>
       <label for="contacting">Method to contact you:</label>
       <input type="checkbox" class="width-set" name="contact_email"> Email
       <input type="checkbox" class="width-set" name="contact_whatsapp"> Whatsapp
       <input type="checkbox" class="width-set" name="contact_chat"> In-app chat
  </fieldset>
  </br>

  <input type="submit"  value="SUBMIT"/>
</form>


</body>
</html>