diff options
Diffstat (limited to 'posts/default-brower-forms.md')
| -rw-r--r-- | posts/default-brower-forms.md | 145 |
1 files changed, 73 insertions, 72 deletions
diff --git a/posts/default-brower-forms.md b/posts/default-brower-forms.md index 804e656..ffe928a 100644 --- a/posts/default-brower-forms.md +++ b/posts/default-brower-forms.md @@ -16,61 +16,62 @@ This form isn't going to win any design awards or blow anyone away with its crea Let's take a look at the HTML of the entire form: - - <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"> - This option is a little bit better - </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"> - I would like to receive email notifications - </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> +~~~html +<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"> + This option is a little bit better + </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"> + I would like to receive email notifications + </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> +~~~ Notice the `fieldset` and `legend` elements? I bet you don't see or hear about those HTML items very often. By default, `fieldset` allows sibling or related inputs to be semantically grouped together. The `legend` 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. @@ -80,23 +81,23 @@ Avoid making your own custom sections and instead use these existing HTML semant Now it's time to style this form with only 6 property declarations: - - form label { - display: block; - } - form input { - display: inline-block; - margin-bottom: 10px; - padding: 10px; - width: 100%; - } - form input[type="radio"], - form input[type="checkbox"], - form input[type="reset"], - form input[type="submit"] { - width: auto; - } - +~~~css +form label { + display: block; +} +form input { + display: inline-block; + margin-bottom: 10px; + padding: 10px; + width: 100%; +} +form input[type="radio"], +form input[type="checkbox"], +form input[type="reset"], +form input[type="submit"] { + width: auto; +} +~~~ Of course, you can always add minor adjustments (like in my demo example above) |