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>
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>
<select>
<option> One </option>
<option> Two </option>
<option> Three </option>
</select>
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"/>
</datalist>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
Fieldset tag in the form
<fieldset>
<legend>Personalia:</legend>
<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">
</fieldset>
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 {
display:none;
}
@media screen and (min-width:40rem) {
.from {
display:block;
}
}
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 {
display:block;
margin-top:10px;
}
input , textarea , option , select {
font-family:courier;
background-color:black;
color:white;
font-size:1.3rem;
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.