aboutsummaryrefslogtreecommitdiff
path: root/posts/default-brower-forms.md
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-07-14 12:26:35 -0400
committerBradley Taunt <bt@btxx.org>2024-07-14 12:26:35 -0400
commite8876fb866c3d89c432dcd04634e9bd2ced18022 (patch)
tree2c9a51310bd9bd8041e5d7bbb85bbfd010e2b514 /posts/default-brower-forms.md
parentc803e304d959f4926a55068d2b11f64bf4c95607 (diff)
Switch things back to smu instead of lowdown
Diffstat (limited to 'posts/default-brower-forms.md')
-rw-r--r--posts/default-brower-forms.md8
1 files changed, 4 insertions, 4 deletions
diff --git a/posts/default-brower-forms.md b/posts/default-brower-forms.md
index ffe928a..c465160 100644
--- a/posts/default-brower-forms.md
+++ b/posts/default-brower-forms.md
@@ -16,7 +16,7 @@ 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:
-~~~html
+```html
<form action="">
<fieldset>
<legend>Personal Details</legend>
@@ -71,7 +71,7 @@ Let's take a look at the HTML of the entire form:
<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.
@@ -81,7 +81,7 @@ 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:
-~~~css
+```css
form label {
display: block;
}
@@ -97,7 +97,7 @@ form input[type="reset"],
form input[type="submit"] {
width: auto;
}
-~~~
+```
Of course, you can always add minor adjustments (like in my demo example above)