Skip to content

Instantly share code, notes, and snippets.

@matbrady

matbrady/form.css

Last active October 21, 2016 21:05
Show Gist options
  • Save matbrady/eeedb2732ef9770ed1cde088684de768 to your computer and use it in GitHub Desktop.
Save matbrady/eeedb2732ef9770ed1cde088684de768 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
form.css
body {
text-align: center;
}
form {
display: inline-block;
text-align: left;
margin: 0 auto;
max-width: 800px;
}
section {
border-top: 5px solid #800080;
}
.form-button-submit {
color: #fff;
background-color: #800080;
border: none;
}
Raw
form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Form</title>
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" media="screen">
<link rel="stylesheet" href="css/base.css" media="screen">
<link rel="stylesheet" href="css/form.css" media="screen">
</head>
<body>
<!-- Used various MDN and w3school pages for references -->
<form class="" action="" method="post">
<section>
<h2>
<legend>Personal information</legend>
</h2>
<label>
Full Name<br />
<input type="text" name="name" placeholder="Your full name" />
</label>
<br />
<label>
Email<br />
<input type="text" name="email" placeholder="[email protected]" />
</label>
<br />
<label>
Would you like your email address viewable to other members?<br />
<input type="radio" name="email_viewable" value="yes" />Yes, please share my email with other members<br />
<input type="radio" name="email_viewable" value="no" />No, don't share my email<br />
</label>
</section>
<section>
<h2>
<legend>Lesson information</legend>
</h2>
<label>
Lesson Title<br />
<input type="text" name="lesson">
</label>
<br />
<label>
What will the students do?<br />
<textarea name="students" rows="8" cols="40" value="studnents" placeholder="i.e. actionable statement from the student's perspective"></textarea>
</label>
<br />
<label>
Lesson Audience (check all that apply)<br />
<input type="checkbox" name="pk2" value="pk2" />PK-2<br />
<input type="checkbox" name="35" value="35" />3-5<br />
<input type="checkbox" name="68" value="68" />6-8<br />
<input type="checkbox" name="hs" value="hs" />HS<br />
</label>
<br />
</section>
<button type="submit" name="button" class="form-button-submit">Submit</button>
</form>
</body>
</html>
Raw
notes.md
@tedw
Copy link

tedw commented Oct 21, 2016

<label> has to be a direct child of <fieldset>

@tedw
Copy link

tedw commented Oct 21, 2016

We prefer to have labels as separate elements, not wrapping inputs.

<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname" placeholder="Your full name" />

@tedw
Copy link

tedw commented Oct 21, 2016

Emails inputs can use the type="email" attribute to enable browser validation and use the email keyboard on mobile devices.

@tedw
Copy link

tedw commented Oct 21, 2016

Here’s a link about autofill attributes for forms:
https://medium.com/@grigs/autofill-what-web-devs-should-know-but-dont-d8f32575253c

@tedw
Copy link

tedw commented Oct 21, 2016 •
edited
Loading

Good link on form validation
https://medium.com/@roblcopeland/how-can-i-make-my-forms-a-little-more-accessible-1726d63210f2

HTML5 input reference
http://www.wufoo.com/html5/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment