A Guide to HTML & CSS Forms (No Hacks!)

In the past, HTML forms presented challenges, often requiring JavaScript and defying CSS control. Fortunately, this is not always the case in today’s web development landscape. We can now explore how to create well-structured forms using only HTML and CSS, benefiting from the improved capabilities of the modern web.

Form-ing the basic structure

Let’s begin by constructing the foundational structure of an HTML form:

<form>
 ... 
</form>

When you’re naturally submitting form data without JavaScript, the action attribute specifies the URL where the form data will be sent. The method attribute should be set to either GET or POST, depending on your purpose (avoid sending sensitive data with GET). Additionally, the lesser-used enctype attribute defines the encoding type of the data being sent. The target attribute can be utilized to display the output in a new tab. JavaScript-based forms might not require these attributes.

<form method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank">
 ... 
</form>

Inputs constitute the essential components of a form, serving as data containers:

<form> <input type="text"><!-- text input -->
 <input type="text" value="Prefilled value">
 </form>

Enhance usability and accessibility by associating labels with inputs. There are three methods to achieve this, but wrapping inputs inside labels is recommended:

<label for="firstName">First name</label> 
<input id="firstName">

Alternatively, ARIA (Accessible Rich Internet Applications) labels can be used:

<input aria-label="First name">

Wrapping inputs within labels offers a clean and effective approach:

<label> 
 First name<input>

</label>

It’s important to distinguish between placeholders and labels:

• Labels describe input expectations.
• Placeholders provide examples of expected input.

Remember, placeholders should not replace labels; they serve to complement and enhance the user experience.

Choosing Input Types

Text-based inputs can utilize placeholders, but there’s a diverse array of input types available:

<input type="button"> 
<input type="checkbox">
<input type="color">
<input type="date"> 
<input type="datetime-local"> 
<input type="email"> 
<input type="file"> 
<input type="hidden"> 
<!-- explained later --> 
<input type="image"> 
<input type="month"> 
<input type="number"> 
<input type="password"> 
<input type="radio"> 
<input type="range"> 
<input type="reset"> 
<input type="search"> 
<input type="submit"> 
<!-- submits a form --> 
<input type="tel"> 
<input type="text"> 
<!-- the default --> 
<input type="time"> 
<input type="url"> 
<input type="week">

Semantic input types play a crucial role in form validation, especially when utilizing native validation, which we’ll explore shortly. Before delving into validation, let’s grasp the art of styling these inputs.

Styling Inputs Overriding default browser styles for inputs can be exasperating. Thankfully, the widely supported appearance: none; property can reset these styles:

input { 
-webkit-appearance: none; 
-moz-appearance: none; appearance: none; 
/* Your custom styling here */ 
}

<input type="text" inputmode="none"> <!-- no keyboard 👀 --> 
<input type="text" inputmode="text"> <!-- default keyboard --> 
<input type="text" inputmode="decimal"> 
<input type="text" inputmode="numeric"> 
<input type="text" inputmode="tel"> 
<input type="text" inputmode="search"> 
<input type="text" inputmode="email"> 
<input type="text" inputmode="url">

This attribute provides enhanced control over input behavior, contributing to a more user-friendly experience.