Crafting Visually Appealing and Accessible Forms with HTML & CSS

Md. Jamal Uddin
DevsOrigin
Published in
6 min readDec 22, 2023

--

Photo by Mediamodifier on Unsplash

Forms are a crucial component of web development, allowing users to interact with websites. Creating forms that are not only visually appealing but also accessible is essential for providing a positive user experience. In this guide, we’ll walk through the fundamentals and provide examples of how to achieve both.

Table of Contents:

· HTML Structure for Forms
· The Pillars of Appeal:
· Accessibility Ace:
· A Complex Form Example
· Additional Resources
· Conclusion

HTML Structure for Forms

The first step is to create the HTML structure of your form. Use semantic HTML elements to enhance accessibility. Here’s a basic example:

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<input type="submit" value="Submit">
</form>

This form will look like:

Preview of a Basic HTML Form

The Pillars of Appeal:

Before we unleash our creative fire, let’s solidify the foundation. Visual appeal and accessibility are the yin and yang of form design. They’re not just trendy buzzwords but essential for a positive user experience.

  • Color Palette: Don’t underestimate the power of color! Choose a cohesive palette that complements your website’s overall aesthetic. Consider accessibility when selecting hues — ensure adequate contrast for clear visibility, especially for visually impaired users.
Photo by Mario Gogh on Unsplash
  • Typography: Fonts can set the tone for your entire form. Opt for clean, readable fonts that fit your brand and purpose. Avoid overly decorative fonts that might hinder legibility.
Photo by Mika Baumeister on Unsplash
  • Layout & Spacing: Cramming everything together is a recipe for visual chaos. Utilize white space, padding, and margins to create breathing room and guide the user’s eye. Consider a multi-column layout for longer forms to improve scannability.
Photo by Sam Moghadam Khamseh on Unsplash

Apple and Google both created general-purpose design guidelines for their products, which are now industry standards:

Accessibility Ace:

  • Semantic HTML: This isn’t just a fancy term; it’s the key to accessibility! Use proper HTML tags like <label> and <form> to give screen readers and assistive technologies the context they need to understand your form's structure.
Photo by Martin Sanchez on Unsplash
  • Labeling is Key: Every input field needs a clear and concise label. Associate labels with their corresponding fields using the for attribute so that screen readers can announce them accurately.
Photo by Keji Gao on Unsplash
  • Error Prevention & Feedback: Nobody likes confusing error messages. Use clear and actionable language to inform users of any mistakes they make while filling out the form. Provide helpful instructions and hints where needed.
Photo by Clarissa Watson on Unsplash

Let's see an example of how we can use CSS to transform a basic HTML form into a visually appealing and accessible masterpiece.

A basic structure of an HTML form:

<form>
<label for="name">Username:</label>
<input type="text" id="name" name="name">
<label for="email">Password:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>

Output is as previous:

Basic HTML Form

Add style to it:

Update the index.htmlfile with classand id selectors:

<form class="my-form">
<label for="name">Username:</label>
<input type="text" id="name" name="name" class="input-field">
<label for="email">Password:</label>
<input type="email" id="email" name="email" class="input-field">
<button type="submit" class="submit-button">Submit</button>
</form>

Now add styles.css file and add the below code snippet:

.my-form {
width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}

.input-field {
display: block;
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
}

.submit-button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
}

Output:

The same basic HTML Form with Styles

A Complex Form Example

Imagine you want to create a registration form for an online art competition. Participants need to submit various details about their artwork and themselves. Here is the HTML skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Artist Information Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<form action="/submit-artwork" method="post">
<fieldset>
<legend>Artist Information</legend>
<label for="name">Full Name:</label>
<input
type="text"
id="name"
name="name"
required
placeholder="Mr. John"
/>
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
required
placeholder="john@example.com"
/>
<label for="website">Website (Optional):</label>
<input
type="url"
id="website"
name="website"
placeholder="https://example.com"
/>
</fieldset>

<fieldset>
<legend>Artwork Information</legend>
<label for="title">Artwork Title:</label>
<input
type="text"
id="title"
name="title"
required
placeholder="Floral Painting"
/>
<label for="medium">Medium:</label>
<select id="medium" name="medium" required>
<option value="">Select Medium...</option>
<option value="painting">Painting</option>
<option value="sculpture">Sculpture</option>
<option value="photography">Photography</option>
<option value="other">Other (Please Specify)</option>
</select>
<label for="description">Artwork Description:</label>
<textarea
id="description"
name="description"
required
cols="50"
rows="5"
placeholder="Your Artwork description will start here..."
></textarea>
<label for="image">Upload Artwork Image:</label>
<input type="file" id="image" name="image" required />
</fieldset>

<fieldset>
<legend>Additional Details</legend>
<label for="inspiration">Inspiration Source:</label>
<input type="text" id="inspiration" name="inspiration" />
<label for="message">Additional Message (Optional):</label>
<textarea
id="message"
name="message"
cols="50"
rows="5"
placeholder="Your message will start here..."
></textarea>
</fieldset>

<button type="submit">Submit Artwork</button>
</form>
</body>
</html>

Let’s sprinkle some CSS magic to bring it to life!

form {
width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}

fieldset {
margin-bottom: 20px;
}

legend {
font-weight: bold;
padding: 5px 10px;
border-bottom: 1px solid #ddd;
}

label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="email"],
textarea {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
margin-bottom: 10px;
}

select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
margin-bottom: 10px;
}

button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
}

Live preview on CodeSandbox:

A complex form example in HTML and CSS

We have learned about the essential elements required to create accessible and visually appealing forms, from basic structures to complex forms. We now can construct any type of form. If you desire to expand your knowledge, there are additional resources available to assist you.

Additional Resources

Conclusion

When building forms, it's important to ensure that they are both visually appealing and accessible. This can be achieved by starting with a basic structure and adding necessary elements, such as labels and instructions, as well as considering color contrast and other visual design elements. As the form becomes more complex, it's important to maintain consistency and organization throughout. Guidelines, such as using clear and concise language, can also help improve accessibility.

Happy Learning

--

--

Md. Jamal Uddin
DevsOrigin

Software engineer passionate about building and delivering SaaS apps using React Native. Agile enthusiast who occasionally writes blog posts about life and tech