forms/elements.html at main · Grows2Code-Season-3/forms · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Form element examples</title>
    <style>
      label {
        display: block;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <h1>Form element examples</h1>

    <form
      action="https://handlers.education.launchcode.org/request-parrot"
      method="POST">

    <h2>Basic text inputs</h2>

    <label>First name:
      <input type="text" name="fname" />
    </label>

    <label>Last name:
      <input type="text" name="lname" />
    </label>

    <h2>Other text inputs</h2>

    <label>Birthdate:
      <input type="date" name="bday" />
    </label>

    <label>Something secret:
      <input type="password" name="secret" />
    </label>

    <label>Email:
      <input type="email" name="email" />
    </label>

    <label>An essay:
      <textarea name="essay"></textarea>
    </label>

    <h2>Other inputs</h2>

    <h3>Favorite fruit:</h3>

    <label>Apple
      <input type="radio" name="fruit" value="apple" />
    </label>
    <label>Orange
      <input type="radio" name="fruit" value="orange" />
    </label>
    <label>Banana
      <input type="radio" name="fruit" value="banana" />
    </label>

    <label>Favorite vegetable:
      <select name="veg">
        <option value="carrot">Carrot</option>
        <option value="broccoli">Broccoli</option>
        <option value="peas">Peas</option>
        <option value="cauliflower">Cauliflower</option>
        <option value="kale">Kale</option>
      </select>
    </label>

    <h3>Colors you like:</h3>

    <label>Red<input type="checkbox" name="colors" value="red" /></label>
    <label>Green<input type="checkbox" name="colors" value="green" /></label>
    <label>Pink<input type="checkbox" name="colors" value="pink" /></label>
    <label>Purple<input type="checkbox" name="colors" value="purple" /></label>

    <button>Submit</button>
    </form>
  </body>
</html>