diff options
Diffstat (limited to 'build/default-brower-forms/index.html')
| -rw-r--r-- | build/default-brower-forms/index.html | 162 |
1 files changed, 92 insertions, 70 deletions
diff --git a/build/default-brower-forms/index.html b/build/default-brower-forms/index.html index 48c8dfd..b62ab64 100644 --- a/build/default-brower-forms/index.html +++ b/build/default-brower-forms/index.html @@ -1,87 +1,102 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Very Basic Form Styling</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Very Basic Form Styling</h1> +<h1 id="very-basic-form-styling">Very Basic Form Styling</h1> + <p>2019-11-13</p> -<p>Web forms can be great - I'm borderline obsessed with them. I love tinkering with pre-existing logins / sign up pages and I've also open sourced a minimal CSS form-styling plugin: <a href="https://normform.netlify.com/">Normform</a>. While simple CSS plugins like these can be helpful, I often feel like we are over-engineering our web forms. I'm certainly guilty of it.</p> -<p>That's not to say developers should just use default browser styling for their forms and call it a day - that is far from ideal. Just pull-back on adding so much styling garbage to the forms themselves.</p> -<p>Let's check out an embedded demo below to see what some bare-bones form styling could look like:</p> + +<p>Web forms can be great - I’m borderline obsessed with them. I love tinkering with pre-existing logins / sign up pages and I’ve also open sourced a minimal CSS form-styling plugin: <a href="https://normform.netlify.com/">Normform</a>. While simple CSS plugins like these can be helpful, I often feel like we are over-engineering our web forms. I’m certainly guilty of it.</p> + +<p>That’s not to say developers should just use default browser styling for their forms and call it a day - that is far from ideal. Just pull-back on adding so much styling garbage to the forms themselves.</p> + +<p>Let’s check out an embedded demo below to see what some bare-bones form styling could look like:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/oNwzvMa">Live CodePen Example</a></p> -<p>This form isn't going to win any design awards or blow anyone away with its creativity. That's okay - because it gets the job done. Users understand it's a form and items are broken down into digestible chunks. Mission accomplished, right?</p> -<h2>Breaking the form down</h2> -<p>Let's take a look at the HTML of the entire form:</p> -<pre><code><form action=""> - <fieldset> - <legend>Personal Details</legend> - <label for="username">Desired Username:</label> - <input type="text" id="username"> - <label for="name">Full Name:</label> - <input type="text" id="name"> - <label for="email">Email Address:</label> - <input type="email" id="email"> - <label for="date">Date of Birth:</label> - <input type="date" id="date"> - </fieldset> - <br> - <fieldset> - <legend>Contact Details</legend> - <label for="address">Home Address:</label> - <input type="text" id="address"> - <label for="postal">Postal Code:</label> - <input type="text" id="postal"> - <label for="phone">Phone Number:</label> - <input type="tel" id="phone"> - </fieldset> - <br> - <fieldset> - <legend>Select an Option</legend> - <label for="radio-1"> - <input type="radio" id="radio-1" name="radio-choice"> + +<p>This form isn’t going to win any design awards or blow anyone away with its creativity. That’s okay - because it gets the job done. Users understand it’s a form and items are broken down into digestible chunks. Mission accomplished, right?</p> + +<h2 id="breaking-the-form-down">Breaking the form down</h2> + +<p>Let’s take a look at the HTML of the entire form:</p> + +<pre><code><form action=""> + <fieldset> + <legend>Personal Details</legend> + <label for="username">Desired Username:</label> + <input type="text" id="username"> + <label for="name">Full Name:</label> + <input type="text" id="name"> + <label for="email">Email Address:</label> + <input type="email" id="email"> + <label for="date">Date of Birth:</label> + <input type="date" id="date"> + </fieldset> + <br> + <fieldset> + <legend>Contact Details</legend> + <label for="address">Home Address:</label> + <input type="text" id="address"> + <label for="postal">Postal Code:</label> + <input type="text" id="postal"> + <label for="phone">Phone Number:</label> + <input type="tel" id="phone"> + </fieldset> + <br> + <fieldset> + <legend>Select an Option</legend> + <label for="radio-1"> + <input type="radio" id="radio-1" name="radio-choice"> The option is pretty nice - </label> - <label for="radio-2"> - <input type="radio" id="radio-2" name="radio-choice"> + </label> + <label for="radio-2"> + <input type="radio" id="radio-2" name="radio-choice"> This option is a little bit better - </label> - <label for="radio-3"> - <input type="radio" id="radio-3" name="radio-choice"> + </label> + <label for="radio-3"> + <input type="radio" id="radio-3" name="radio-choice"> This option is the best - </label> - </fieldset> - <br> - <fieldset> - <legend>Notifications</legend> - <label for="checkbox-1"> - <input type="checkbox" id="checkbox-1"> + </label> + </fieldset> + <br> + <fieldset> + <legend>Notifications</legend> + <label for="checkbox-1"> + <input type="checkbox" id="checkbox-1"> I would like to receive email notifications - </label> - <label for="checkbox-2"> - <input type="checkbox" id="checkbox-2"> + </label> + <label for="checkbox-2"> + <input type="checkbox" id="checkbox-2"> I would like to subscribe to the weekly newsletter - </label> - </fieldset> - <br> - <input type="reset" value="Reset"> - <input type="submit" value="Submit"> -</form> + </label> + </fieldset> + <br> + <input type="reset" value="Reset"> + <input type="submit" value="Submit"> +</form> </code></pre> -<p>Notice the <code>fieldset</code> and <code>legend</code> elements? I bet you don't see or hear about those HTML items very often. By default, <code>fieldset</code> allows sibling or related inputs to be semantically grouped together. The <code>legend</code> elements give the user great visual cues about which items are grouped together, helping to focus on each section individually as they complete the form. Use these grouping elements as much as possible (when it makes sense of course) for a better guided experience for your users. </p> + +<p>Notice the <code>fieldset</code> and <code>legend</code> elements? I bet you don’t see or hear about those HTML items very often. By default, <code>fieldset</code> allows sibling or related inputs to be semantically grouped together. The <code>legend</code> elements give the user great visual cues about which items are grouped together, helping to focus on each section individually as they complete the form. Use these grouping elements as much as possible (when it makes sense of course) for a better guided experience for your users. </p> + <p>Avoid making your own custom sections and instead use these existing HTML semantics.</p> -<h2>Almost no CSS at all</h2> -<p>Now it's time to style this form with only 6 property declarations:</p> + +<h2 id="almost-no-css-at-all">Almost no CSS at all</h2> + +<p>Now it’s time to style this form with only 6 property declarations:</p> + <pre><code>form label { display: block; } @@ -91,24 +106,31 @@ form input { padding: 10px; width: 100%; } -form input[type="radio"], -form input[type="checkbox"], -form input[type="reset"], -form input[type="submit"] { +form input[type="radio"], +form input[type="checkbox"], +form input[type="reset"], +form input[type="submit"] { width: auto; } </code></pre> + <p>Of course, you can always add minor adjustments (like in my demo example above)</p> + <ul> <li>Legend typeface and sizing</li> <li>Form and fieldset background colors</li> <li>Extra margin and padding</li> -<li>Custom reset / submit buttons</li> +<li>Custom reset / submit buttons</li> </ul> + <p>But the main point of this post is to showcase how little CSS is needed to implement decent web forms - so any further improvements are up to you, dear reader. </p> + <p>Just try not to reinvent the wheel.</p> -<h2>Final rant - don't ignore the reset</h2> -<p>A lot of "modern" web forms have moved away from including the reset input on their forms, which I think is fairly short-sighted. Resetting all form fields might be a smaller edge case, but it is certainly a better option than relying on the user to <i>refresh</i> or in some cases, individually deleting each input. Yikes.</p> + +<h2 id="final-rant---dont-ignore-the-reset">Final rant - don’t ignore the reset</h2> + +<p>A lot of “modern” web forms have moved away from including the reset input on their forms, which I think is fairly short-sighted. Resetting all form fields might be a smaller edge case, but it is certainly a better option than relying on the user to refresh or in some cases, individually deleting each input. Yikes.</p> + <p>Happy form building!</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> |