-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (66 loc) · 3.48 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<link rel="stylesheet" href="/src/scss/style.scss">
</head>
<body>
<main class="js-form" data-form="1">
<form class="form__wrapper" action="" id="form-1">
<div class="form__question" data-question="1" data-required="true" data-type="text">
<div class="form__group">
<label for="question-1">What's your name?</label>
<input type="text" name="form-1-question-1" id="question-1" data-question="1" data-key="13" required>
<span class="form__hint">Press <strong>enter</strong> ↵ to continue</span>
</div>
</div>
<div class="form__question" data-question="2" data-required="true" data-type="radio">
<div class="form__group">
<p>How are you liking this form so far?</p>
<div class="input__group">
<input type="radio" id="1" name="form-1-question-2" data-question="2" value="1" data-key="49,97" required>
<label for="1">It's okay <span>(1)</span></label>
</div>
<div class="input__group">
<input type="radio" id="2" name="form-1-question-2" data-question="2" value="2" data-key="50,98">
<label for="2">Pretty good <span>(2)</span></label>
</div>
<div class="input__group">
<input type="radio" id="3" name="form-1-question-2" data-question="2" value="3" data-key="51,99">
<label for="3">Stunning <span>(3)</span></label>
</div>
<div class="input__group">
<input type="radio" id="4" name="form-1-question-2" data-question="2" value="4" data-key="52,100">
<label for="4">Give this creator a job <span>(4)</span></label>
</div>
<span class="form__hint">Select option by pressing the corresponding <strong>number</strong> on your keyboard</span>
</div>
</div>
<div class="form__question" data-question="3" data-required="true" data-type="textarea">
<div class="form__group">
<label for="question-3">Something to add?</label>
<textarea name="form-1-question-3" id="question-3" cols="30" rows="10" data-question="3"
required data-key=""></textarea>
</div>
</div>
</form>
<div class="form__results" data-form="form-1">
<p>Thanks for filling in the form, <span data-question="form-1-question-1"></span>.</p>
</div>
</main>
<div class="form__controls">
<div class="form__progress">
<label for="form-1">Form progress</label>
<progress id="form-1" value="0" max="3"> 0 </progress>
</div>
<div class="form__buttons">
<button data-form-button data-action="prev" data-form="form-1">Prev</button>
<button data-form-button data-action="next" data-form="form-1">Next</button>
<button data-form-button data-action="submit" form="form-1" data-form="form-1">Submit</button>
</div>
</div>
<script src="/src/js/app.js"></script>
</body>
</html>