coffee-survey-form-website/index.html at main · Pandatlas/coffee-survey-form-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
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee Survey Form</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <header>
        <h1 id="title">Coffee Survey Form</h1>
        <p id="description">This survey aims to gather information about your coffee consumption habits.</p>
    </header>

    <form id="survey-form">

        <label id="name-label" for="name">Enter your name: <input required id="name" type="text" placeholder="Jane Doe"></label>
        <label id="email-label" for="email">Enter your email: <input required id="email" type="email" placeholder="jane.doe@gmail.com"></label>
        <label id="number-label" for="age">Enter your age: <input id="number" type="number" min=13 max=99 placeholder=13></label>

        <!-- dropdown -->
        <label id="dropdown-label" for="dropdown">How often do you drink coffee?
            <select id="dropdown">
                <option value="">(select one)</option>
                <option value="1">Multiple times a day</option>
                <option value="2">Once a day</option>
                <option value="3">A few times a week</option>
                <option value="4">Occasionally</option>
                <option value="5">Rarely or never</option>
            </select>
        </label>

        <!-- radio buttons -->
        <label id="time-label">What time do you usually drink coffee?
            <label class="choice" for="morning"><input value="morning" type="radio" name="time"> Morning</label>
            <label class="choice" for="afternoon"><input value="afternoon" type="radio" name="time"> Afternoon</label>
            <label class="choice" for="evening"><input value="evening" type="radio" name="time"> Evening</label>
            <label class="choice" for="night"><input value="night" type="radio" name="time"> Night</label>
        </label>

        <!-- checkboxes -->
        <label id="additional-label">Do you add any extras to your coffee? (Select all that apply)
            <label class="choice" for="milk"><input value="milk" type="checkbox" name="additional"> Milk/Cream</label>
            <label class="choice" for="sugar"><input value="sugar" type="checkbox" name="additional"> Sugar/Sweetener</label>
            <label class="choice" for="syrup"><input value="syrup" type="checkbox" name="additional"> Flavoured Syrups</label>
            <label class="choice" for="whip"><input value="whip" type="checkbox" name="additional"> Whipped Cream</label>
            <label class="choice" for="cocoa"><input value="cocoa" type="checkbox" name="additional"> Cinnamon/Cocoa Powder</label>
            <label class="choice" for="none"><input value="none" type="checkbox" name="additional"> None</label>
        </label>

        <!-- text area -->
        <label id="textarea-label">Why do you drink coffee?
            <textarea id="why" type="textarea" placeholder="Without coffee in the morning, I am a monster!"></textarea>
        </label>

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

    </form>

</body>

</html>