https://validator.w3.org/nu/?doc=https%3A%2F%2Fshrouded-mountain-23667.herokuapp.com%2Fform
- fieldset
- Separating label and input elements
- Checkbox
name <br />tag
Last active
October 21, 2016 21:05
-
-
Save matbrady/eeedb2732ef9770ed1cde088684de768 to your computer and use it in GitHub Desktop.
Heather F. HW: Form https://shrouded-mountain-23667.herokuapp.com/form
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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
Here’s a link about autofill attributes for forms:
https://medium.com/@grigs/autofill-what-web-devs-should-know-but-dont-d8f32575253c