practical-project-4-Form/index.html at main · Vitorcastanhos/practical-project-4-Form · 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
<!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="style.css" />
    <title>Form Page</title>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Create and share <br />your event.</h1>
        <p>Please fill this form as your first step.</p>
      </header>

      <form id="event-form">
        <fieldset>
          <!-- new tag i have learned, fieldset and legend. tags that are meant to use
            when working with forms. Fieldset is use to group several
            controls as well as labels (<label>) within a web form.
            Legend comes with a border that we can removeit using CSS -->
          <legend>Event Information</legend>

          <div class="input-wrapper">
            <label for="event-title">Event title <span>(minimum 8 caracters)</span></label>
            <input type="text" id="event-title" name="event-title" required minlength="8" />

            <label for="event-link">Event link <span>(start with https://)</span></label>
            <input type="link" id="event-link" name="event-link" required />

            <label for="num">Phone number <span>(only numbers)</span></label>
            <input type="number" id="num" name="num" required />

            <label for="info">More informations</label>
            <textarea name="info" id="info" cols="30" rows="10"></textarea>

            <label for="category">Category</label>
            <select required name="category" id="category">
              <option value="" disabled selected hidden>Event type</option>
              <option value="live">Live</option>
              <option value="podcast">Podcast</option>
              <option value="party">Party</option>
            </select>
          </div>
        </fieldset>

        <fieldset>
          <legend>Privacy</legend>

          <div class="input-wrapper">
            <label for="event-email">Manager email <span>(type a valid email)</span></label>
            <input type="email" name="event-email" id="event-email" required />

            <label for="pass">Password access<span>(minimum 8 caracters)</span></label>
            <input type="password" name="pass" id="pass" required minlength="8" />
          </div>

          <div class="checkbox-wrapper">
            <input id="event-private" type="checkbox" name="event-private" required />
            <label id="event-private" for="event-private">Private event</label>
          </div>
        </fieldset>

        <fieldset>
          <legend>Time and date</legend>

          <div class="wrapper-time">
            <div id="event-date" class="input-wrapper">
              <label for="event-date">Date</label>
              <input type="date" name="event-date" id="event-date" required />
            </div>

            <div class="input-wrapper">
              <label for="event-start">From</label>
              <input type="time" name="event-start" id="event-start" required />
            </div>

            <div class="input-wrapper">
              <label for="event-end">To</label>
              <input type="time" name="event-end" id="event-end" required />
            </div>
          </div>
        </fieldset>
      </form>

      <footer>
        <button id="btn" form="event-form" type="submit">Send</button>
      </footer>
    </div>
  </body>
</html>