Historically, HTML forms have been quite tricky — firstly, because at least a little bit of JavaScript was required, and secondly, because no amount of CSS could ever make them behave.
However, this isn’t necessarily true in the case of the modern web, so let’s learn how to mark up forms using only HTML and CSS.
Start off with the <form>
element.
Nothing fancy here. Just covering the basic structure.
<form>
...
</form>
If you’re submitting the form data naturally (that is, without JavaScript), you’ll need to include the action
attribute, where the value is the URL you’ll be sending the form data to. The method
should be GET
or POST
depending on what you’re trying to achieve (don’t send sensitive data with GET
).
Additionally, there’s also the lesser-used enctype
attribute which defines the encoding type of the data being sent. Also, the target
attribute, although not necessarily an attribute unique to forms, can be used to show the output in a new tab.
JavaScript-based forms don’t necessarily need these attributes.
<form method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank">
...
</form>
Forms are made up of inputs, which expect data values.
<form>
<input type="text"><!-- text input -->
<input type="text" value="Prefilled value">
</form>
Every input needs a label.
A label is a text descriptor that describes what an input is for. There are three ways to declare a label, but one of them is superior to the other two. Let’s dive into these now.
Adjacent labels require the most code because we need to explicitly declare which input the label describes. To most, this is counterintuitive because we can instead wrap inputs inside labels to achieve the same effect with less code.
That being said, the adjacent method may be necessary in extenuating circumstances, so here’s what that would look like:
<label for="firstName">First name</label>
<input id="firstName">
As you can see from the example above, the for
attribute of the <label>
must match the id
attribute of the input, and what this does is explain to input devices which text descriptor belongs to which input. The input device will then relay this to users (screen readers, for example, will dictate it via speech).
While semantic HTML is better, ARIA (Accessible Rich Internet Applications) labels can compensate in their absence. In this case, here’s what a label might look like in the absence of an actual HTML <label>
:
<input aria-label="First name">
Unfortunately, the downside of this approach is the lack of a visual label. However, this might be fine with some markups (for example, a single-input form with a heading and placeholder):
<h1>Subscribe</h1>
<form>
<input aria-label="Email address" placeholder="bruce@wayneenterpris.es">
</form>
(I’ll explain what placeholders are for in a moment.)
#html #css #web-development #programming #developer