-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathforms.html
117 lines (103 loc) · 5.75 KB
/
forms.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="My GitHub site">
<meta name="author" content="Justin">
<!-- This start file was build by Paul Cheney -->
<title>Justin's forms experiment</title>
<!-- TELLS PHONES NOT TO LIE ABOUT THEIR WIDTH & stops the font from enlarging when a phone is turned sideways-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- STYLE SHEETS -->
<link href="css/normalize.css" rel="stylesheet">
<!-- phone-default -->
<link href="css/small.css" rel="stylesheet">
<!-- enhance-tablet -->
<link href="css/medium.css" rel="stylesheet">
<!-- enhance-desktop -->
<link href="css/large.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,600,600i" rel="stylesheet" type="text/css">
</head>
<body>
<!-- HEADER HERE -->
<header class=".clearfix">
<figure class="logo">
<img src="images/logo.jpg" alt="logo" srcset=""> <!--"images/logo1.png 1x, images/logo2.png s2" used for 1x or 2x pixel density-->
</figure>
<h1>Company Name Here</h1>
<h2>Slogan or Tagline</h2>
</header>
<!-- NAVIGATION HERE -->
<nav class="clearfix">
<button onclick="toggleMenu()">≡</button> <!-- ☰ not, ੆ not, ≡-->
<ul id="primaryNav" class="hide">
<li><a href="index.html">Home</a></li>
<li ><a href="weather.html">Weather app</a></li>
<li class="active"><a href="forms.html">Forms</a></li>
<!--<li><a href="#">Contact</a></li>-->
</ul>
</nav>
<!-- CONTENT HERE -->
<main class="clearfix">
<aside><br><p>Some examples of forms.</p>
<p>There is a design philosophy that says to keep the line of sight in-line all the way down the form, like some of these
forms, where the labels are on top of the fields. I prefer the labels to the side to clearly delineate the
difference between the labels and input, and to not clutter the line of site. This also compresses the height of the form, but makes it wider, which
may not be preferable for a narrow screen.</p>
</aside>
<form method="get" action="thanks.html">
<fieldset>
<legend>Applicant Information</legend>
<div style="display: inline-block;">
<label class="top">First Name* <input type="text" name="fname" required></label>
<label class="top">Last Name* <input type="text" name="lname" required></label>
<label class="top">Phone <input type="tel" name="phone" placeholder="256-123-4567"></label>
<label class="top">E-mail* <input type="email" name="email" required placeholder="[email protected]"></label>
<label class="top">URL <input type="url" name="url" placeholder="http://mysite.com"></label>
</div>
<div style="display: inline-block; width: 450px; margin-left: 30px;">
<label class="side">First Name* <input type="text" name="fname" required></label><br>
<label class="side">Last Name* <input type="text" name="lname" required></label><br>
<label class="side">Phone <input type="tel" name="phone" placeholder="256-123-4567"></label><br>
<label class="side">E-mail* <input type="email" name="email" required placeholder="[email protected]"></label><br>
<label class="side">URL <input type="url" name="url" placeholder="http://mysite.com"></label>
</div>
</fieldset>
<fieldset>
<legend>Course Info</legend>
<div>Audience</div>
<!-- name has to be the same or else they will not act exclusive -->
<label class="sbs"><input type="radio" name="audience" value="beginner"> Beginner</label>
<label class="sbs"><input type="radio" name="audience" value="intermediate"> Intermediate</label>
<label class="sbs"><input type="radio" name="audience" value="advanced"> Advanced</label>
<div>Software Needed</div>
<label class="sbs"><input type="checkbox" name="editing" value="yes"> Photo Editing</label>
<label class="sbs"><input type="checkbox" name="code" value="yes"> Coding</label>
<label class="sbs"><input type="checkbox" name="process" value="yes"> Preprocessor</label>
<label class="sbs"><input type="checkbox" name="client" value="yes"> FTP Client</label>
</fieldset>
<fieldset>
<legend>Funding</legend>
<label class="top">Anticipated Completion Date <input type="date" name="completeDate"></label>
<label class="top">Course Subject
<select name="subject">
<option value="">Please Select ▾</option> <!-- special char is for safari/chrome style being overridden in CSS with -webkit-appearance -->
<option value="software">Software Dev</option>
<option value="creative">Creative Pro</option>
<option value="info">Info Tech</option>
<option value="data">Data Pro</option>
<option value="mfg">Manufacturing</option>
</select>
</label>
<label class="top">How many authors <input type="number" name="authors"></label>
</fieldset>
<input type="submit" value="Propose Course" class="submitButton">
</form>
</main>
<!-- FOOTER HERE -->
<footer>
© 2018 • Justin Hammack
</footer>
<script src="js/scripts.js"></script>
</body>
</html>