-
Notifications
You must be signed in to change notification settings - Fork 0
/
interactive.html
90 lines (78 loc) · 3.05 KB
/
interactive.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧮</text></svg>">
<link rel="stylesheet" href="main.css">
<title>Interactive</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="./index.html">about</a></li>
<li><a href="./typography.html">typography</a></li>
<li><a href="./media.html">media</a></li>
<li><a href="#">interactive/input</a></li> <!-- # => active -->
<li><a href="./data.html">data</a></li>
</ul>
</nav>
</header>
<main>
<section class="bordered">
<span class="indicator">Buttons</span>
<button>Click me</button>
<details>
<summary>read more...</summary>
<p><a href="https://github.com/jonasfroeller">GitHub</a></p>
</details>
</section>
<section class="bordered">
<span class="indicator">Inputs</span>
<fieldset title="Groups related elements in a form">
<legend>Fieldset</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</fieldset>
<br>
<form>
<legend>Default Form:</legend>
<br>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
<br>
<textarea rows="4" cols="50">This is a multiline text area</textarea> <br>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</section>
</main>
<footer>
<address>
Email: <a href="[email protected]">[email protected]</a><br>
</address>
<time datetime="">
<script> document.write(new Date); document.querySelector("time").setAttribute("datetime", new Date) </script>
</time> <br>
<a href="https://github.com/jonasfroeller/JoneCSS">JoneCSS</a> <cite>by Jonas Fröller</cite>
</footer>
</body>
</html>