ApplicationForm/index.html at main · jwalk99star/ApplicationForm · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	  <link rel="stylesheet" href="styles.css" />
    <title>Registration Form</title>
  </head>
  <!-- end head-->

    <body>
      <div class="main">
        <h1>IMF Application</h1>
        <h2>*Clearance Level: Secret Agent*</h2>
        <p>Be Honest. </p>
        <p>(Don't lie. We already know.)</p>
        <!-- end title-->

        <form action="">
          <fieldset>
          <label>Your First & Last Name: <input type="text" name="first-name" required placeholder="Tom Cruise"/></label>
          <label>Secret Agent Code Name: <input type="text" name="last-name" required placeholder="Ethan Hunt"/></label>
          <label>Encrypted Contact Email: <input type="email" name="email" required placeholder="[email protected]"/></label>
          <label>UnHackable Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required placeholder="YouCompleteMe1996"/></label>
          </fieldset>
        <!-- end personal info-->

        <fieldset>
        I am currently a...
        <br/>
        <br/>
        <label><input type="radio" name="account-type" class="inline" /> Government Agent</label>
        <label><input type="radio" name="account-type" class="inline" /> Trained Citizen Vigilante</label>
        <label><input type="radio" name="account-type" class="inline" /> Overconfident Couch Potato </label>
        </fieldset>
        <!-- end "currently"-->

        <fieldset>
          <input type="checkbox" name="terms" class="inline" required />I can keep a secret. <a href="https://nondisclosureagreement.com/wp-content/uploads/2020/11/Basic-Non-Disclosure-Agreement.pdf" target="_blank" rel="noopener noreferrer">Pinky Swear.</a>

      </fieldset>
      <!-- end NDA-->

      <fieldset>
        <label>How many times have you saved the world?<input type="number" name="age" min="0" max="120" />
			  </label>
        <br/>
        <label>What is your best weapon against evil?
          <select name="referrer">
            <option value="">(select one)</option>
            <option value="1">Dazzling Intellect</option>
            <option value="2">Pure Heart</option>
            <option value="3">Cool Tech</option>
            <br/>
            <option value="4">Classified</option>
          </select>
        </label>
        <br/>
        <label>Upload a wicked cool profile picture: <input type="file" name="file" /></label><br/>
        <label>Provide a bio:
          <textarea name="bio" rows="3" cols="30" placeholder="   Danger is my middle name, etc..."></textarea>
			  </label>
      </fieldset>
      <!-- end qualifications-->

      <input id="submit" type="submit" value="Submit" />
      </form>
      <!-- end form-->

      <p class="end-message">
      This message will self destruct. Any second now...
    </p>
   </div>
  </body>
  <!-- end body-->

</html>