Terere-Website/form.html at main · fernandoscjunior/Terere-Website · 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
<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Form page for the WDD131 course Dynamic Web Fundamentals, done by Fernando Costa Jr">
  <meta name="author" content="Fernando da Silva Costa Júnior">
  <title>Form Page</title>
  <link rel="stylesheet" href="styles/form.css">
  <link rel="stylesheet" href="styles/form-large.css">
  <script defer src="scripts/form.js"></script>
</head>

<body>
  <form action="review.html" method="get" id="product-review-form">

    <!-- Product Name -->
    <div class="form-group">
      <label for="product-name">Product name</label>
      <select id="product-name" name="product-name" required>
        <option value="" disabled selected>Select a Product ...</option>

        <!-- Options will be inserted dynamically -->

      </select>
    </div>

    <!-- Rating -->
    <div class="form-group">
      <fieldset class="rating-group">
        <legend>Rating</legend>
        <div class="rating">
          <input type="radio" id="rating5" name="overall-rating" value="5" required>
          <label for="rating5">&#9734;</label>

          <input type="radio" id="rating4" name="overall-rating" value="4" required>
          <label for="rating4">&#9734;</label>

          <input type="radio" id="rating3" name="overall-rating" value="3" required>
          <label for="rating3">&#9734;</label>

          <input type="radio" id="rating2" name="overall-rating" value="2" required>
          <label for="rating2">&#9734;</label>

          <input type="radio" id="rating1" name="overall-rating" value="1" required>
          <label for="rating1">&#9734;</label>
        </div>
      </fieldset>
    </div>

    <!-- Date of Installation -->
    <div class="form-group">
      <label for="installation-date">Installation date</label>
      <input type="date" id="installation-date" name="installation-date" required>
    </div>

    <!-- Useful Features -->
    <div class="form-group">
      <fieldset class="features-group">
        <legend>Useful features</legend>
        <div class="features">
          <input type="checkbox" id="durability" name="usefulFeatures" value="Durability">
          <label for="durability">Durability</label>

          <input type="checkbox" id="ease-of-use" name="usefulFeatures" value="Easy to use">
          <label for="ease-of-use">Easy to use</label>

          <input type="checkbox" id="performance" name="usefulFeatures" value="Performance">
          <label for="performance">Performance</label>

          <input type="checkbox" id="design" name="usefulFeatures" value="Design">
          <label for="design">Design</label>
        </div>
      </fieldset>
    </div>

    <!-- Written Review -->
    <div class="form-group">
      <label for="written-review">Written review</label>
      <textarea id="written-review" name="written-review" rows="4"></textarea>
    </div>

    <!-- User Name -->
    <div class="form-group">
      <label for="user-name">Your Name</label>
      <input type="text" id="user-name" name="user-name">
    </div>

    <!-- Form Submission Button -->
    <div class="form-group">
      <input type="submit" value="Submit your review">
    </div>
  </form>
   <footer>
        <p>©️ <span id="currentyear"></span> Fernando Costa Jr Brazil</p>
        <p id="lastmodified"><span id="lastModified"></span></p>
    </footer>
</body>
</html>