Web-Development/Part3.html at master · sami1riaz/Web-Development · 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
114
115
<!DOCTYPE HTML>
<html>

  <head>
    <title> Dating Website </title>
    <style>
      fieldset {background: lightyellow; border: 10px solid yellow; margin-bottom: 10px; width: 720px; vertical-align: middle}

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

      .autowidth {width: auto}

      .rangealign {text-align: center}
      .rightlabel {background-color: purple; color: white; display: inline-block; padding: 2px; text-align: center; width: 50px}
      .leftlabel {background-color: red; color: white; display: inline-block; padding: 2px; text-align: center; width: 50px}

      textarea {width: 360px; height: 50px}

      label:hover { font-size:20px }
      input:hover { font-size:20px }

    </style>

      <h1> PLEASE ENTER YOUR DETAILS FOR OUR WEBSITE!</h1>

  </head>

  <body>

      <form action="http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="POST" enctype="multipart/form-data">

        <fieldset>
          <legend> Your Face </legend>
            <label for="avatar"> Your Image: </label>
              <input type="file" name="Profile Picture" required> <br>
            <label for="preview"> Image Preview: </label>
              <img id="preview"> <br>
        </fieldset>

        <p> </p>

        <fieldset>
          <legend> Your General Details </legend>

            <label for="fullname"> Name: </label>
              <input type="text" name="fullname" placeholder="Your Full Name" required> <br>

            <label for="gender"> Gender: </label>
              <input type="radio" class="autowidth" name="Gender" value="male">Male <input type="radio" class="autowidth" name="Gender" value="female"> Female </input> <br>

            <label for="age"> Age: </label>
             <input type="number" name="Age" required> <br>

            <label for="Dateofbirth"> Date of Birth: </label>
             <input type="Date" name="Date of Birth"> <br>

            <label for="FavouriteColour"> Favourite Colour: </label>
             <input type="color" name="Color"> <br>

            <label for="WhichCountry"> Which Country: </label>
             <select name="Countries">
                            <option value="NA"> None </option>
                            <option value="PAK"> Pakistan </option>
                            <option value="CHN"> China </option>
                            <option value="CAN"> Canada </option>
                            <option value="USA"> USA </option>
                            <option value="UK"> United Kingdom </option>
                          </select> <br>
        </fieldset>

        <p> </p>

        <fieldset>
          <legend> Your Indicators </legend>

            <label for="Height"> Height: </label>
              <span class="leftlabel"> Short </span>
              <input type="range" class="rangealign" min='0' max='100' name="height">
              <span class="rightlabel" class="rangealign"> Tall </span> <br>

            <label for="Salary"> Salary: </label>
              <span class="leftlabel"> Poor </span>
              <input type="range" class="rangealign" min='0' max='100' name="salary">
              <span class="rightlabel"> Rich </span>
        </fieldset>

        <p> </p>

        <fieldset>
          <legend> Your Contact Information </legend>

            <label for="email"> Email: </label>
             <input type="email" name="Email Address" required> <br>

            <label for="MobileNumber"> Mobile: </label>
             <input type="tel" name="Mobile Number"> <br>

            <label for="Address"> Address: </label>
             <textarea rows="3" cols="20" name="Home Address"> </textarea> <br>

            <label for="MethodToContactYou"> Method To Contact You: </label>
             <input type="checkbox" class="autowidth" value="Email" name="email"> Email <input type="checkbox" class="autowidth" value="WhatsApp" name="whatsapp"> Whatsapp <input type="checkbox" value="In-App Chat" name="in-appchat"> In-App Chat <br>
        </fieldset>

        <input type="submit">

      </form><br>

      <script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js"></script>


    </body>


  </html>