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.

Form-ing the basic structure

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>

Including Labels for Better Usability & Accessibility

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

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).

ARIA labels

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