Understand accessible web form

Easy-to-Use Web Form Guide

In today's digital age, the internet has become an integral part of our lives, facilitating everything from shopping and communication to research and education. As businesses and organizations strive to create a robust online presence, one key aspect that often takes center stage is web forms. These forms are the gateway to a multitude of services, from e-commerce transactions to newsletter subscriptions, job applications, and beyond.

The critical role of forms

Well-designed accessibility forms make it possible to sell products and services. What forms are essential for

  • Sales

  • Building mail lists and followers

  • Collecting feedback

  • Developing two-way relationships with clients

Bad Forms

  • Reduce sales

  • Squander building client lists

  • Block feedback

  • Project lack of interest in user input

  • Project an unprofessional or unserious site

Using HTML5 input types that provide the desired input

Form in HTML

Basic properties of an HTML5 Form

  • action parameter tells browsers where to send the data, usually a URL to the backend server

  • autocomplete parameter can be on or off, controlling whether or not a browser's complete feature operates on the form

  • The method parameter is determined by the backend that manages the data, either get or post

  • enctype specifies how the form data should be encoded when submitting it to the server (only for method="post")

<form action="/action_page.php" method="get" autocomplete="on">

Form Input Types

Form input elements are used to collect data from users on a web page. There are various input types available that you can use, depending on the type of data you want to collect.

Color input

<!-- for and name attribute helps to lick label and input together
fe when you click on the label the input will be in focus mode -->
<label for="color">Select a color </label>
<input type="color" id="color" name="color">

Date input

<label for="date">Choose a date </label>
<input type="date" id="date" name="date" />

Email input

<label for="email">Your Email </label>
<input type="email" id="email" name="email" />

Number input

<label for="number">Enter a number </label>
<input type="number" id="number" name="number" />

The range input

<label for="range">Choose a value from 1(poor) to 5(great) </label>
<input type="range" id="range" name="range" min="1" max="5"/>

The search input

<label for="search">Search!</label>
<input type="search" id="search" name="search" />
This will depend heavily on how browser's vender develop this input
search type for chrome we will not have the search icon

The tel input

<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" />
Its good for mobile devices -> it will offer us a number keyboard when
we enter value to the input

The time input

<label for="time">Best time to reach you </label>
<input type="time" id="time" name="time" />

The URL input

<label for="url">Your URL: </label>
<input type="url" id="url" name="url" value="https://" />
We can inject the https value to make it easy to our users :)

Enhance Input for validation

In HTML5, you can enhance input validation by using various attributes and elements. Here are some ways to improve input validation:

Setting the required input

<label for="email">Your Email</label>
<input type="email" id="email" label="email" size="25" maxLength="60"
required />

Setting a constrained input

<label for="number">How many iphones do you need </label>
<input type="number" id="number" name="number" min="1" max="100"
step="1" required />

<label for="deliver">Choose a delivery date </label>
<input type="date" id="deliver" name="deliver" min="2020-01-01" 
max="2025-01-01" />

Making entry intuitive with auto-focus

<label for="email">Your Email</label>
<input type="email" id="email" label="email" size="25" maxLength="60"
required autofocus />
By default even if it has only one input , the input won't be focus and
it costs users an extra click

Providing options with select menus

<label for="select">Choose one ......... <label>
    <option> One </option>
    <option> Two </option>
    <option> Three </option>

Data List provides the ability for users to type in from the list
  <label for="browser">Choose your browser from the list:</label>
  <input list="browsers" name="browser" id="browser"/>
  <datalist id="browsers">
    <option value="Edge"/>
    <option value="Firefox"/>
    <option value="Chrome"/>
    <option value="Opera"/>
    <option value="Safari"/>


Fieldset tag in the form

  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="Submit">

Inviting and accessible Inputs

On a mobile device, users have a small screen, and displaying the whole label and input might not be ideal. Let's take a look at this example:

With a little trick, we can make our user's experience better by displaying input with a placeholder

<label class="from" for="from">From</label>
<input type="search" id="from" name="from" placeholder="From" />

.from {

@media screen and (min-width:40rem) {
   .from {

Using a placeholder to replace the label is not a bad idea

Styling Input

What style characteristics should we add to our form?

  • Font color

  • Margins

  • Padding

  • Alignment

  • Font family

  • Borders

  • Corner radii

label,select {
input , textarea , option , select {
   padding: .5rem;

This article discusses the importance of web forms in today's digital age, highlighting their critical role in sales, building mailing lists, collecting feedback, and developing client relationships. It provides a comprehensive guide to using HTML5 input types, form elements, and input validation techniques, as well as tips for creating intuitive, accessible, and well-styled forms.