In Web development, Forms are one of the main interfaces between users and the application or website. It allows users to provide data to the website which will be stored or processed in the backend. Examples of where we can use forms are, to enter payment information, feedback forms, etc.
Essentially, form element has two attributes, action and method. The action attributes contains a url to which the data must be sent for processing. The method attributes contains the http verb. About http verbs.
<form action="/" method="POST"> </form>
Form controls are used inside the form tag, that can collect various types of data from users. Some form controls used are dropdown lists, buttons, checkboxes and mostly
<input>. They can be implemented to accept values in specific format and can be associated with labels to provide meaning to both sighted and visually impaired users.
The input element is one of the mostly used form control. It contains
type attribute that denote the type of data it can accept.Examples are
<label for="name">Enter name:</label> <input type="text" id="name" name="user name">
For a label to be associated with an input, the input's
id must match the label's
name attribute acts a reference to the data after the form is submitted.
Email address field
<input type="email" name="email" id="email">
This input with type
multiple allows to enter multiple email ids separated by commas.
<input type="search" name="search" id="search">
The search input creates a basic search box with an 'x' at the end, when clicked clears the value entered. In most modern browsers, the values entered are saved and reused to offer auto-completion.
Phone number field
<input type="tel" name="tel" id="tel">
This field accepts only numbers so it is used for entering phone numbers. When accessed via touch device, it opens a numeric keypad. Moreover, the
pattern is used to give regex constraints.
<input type="number" name="number" id="number" min="1" max="10" step="2">
The number field is similar to the phone number field, but provides arrow buttons at the end to increase or decrease the value. Minimum and maximum constraints can be set through
While incrementing or decrementing, you can increase the value by setting
<input type="range" id="slider" name="amount" min="100" max="1000" step="100" value="500">
The slider is also used to select numbers where an accurate value isn't required. The output element outputs the value selected from the slider.
<input type="color" name="color" id="color">
The color picker displays browsers default color palette in which you can select a color. The value returned is a 6-digit lowercase hexadecimal color.
Date and Time Picker
<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="7" id="myDate">
The date picker also opens browser default date picker when clicked.
step can be set like in the above example. Futhermore, you can give different types to select particular value like month or week.
To select month,
To select week,
To select time,
The displayed time will be in 12 hour format whereas the returned value will be in 24 hour format.
To select date and time,
More on types.
More on attributes.
There are two types of selection inputs. Select dropdown and datalist element.
This allows the user to select a value from a predefined list.
<select name="book"> <option>Alchemist</option> <option>Atomic Habits</option> <option selected>Rich Dad Poor Dad</option> <option>The Green Mile</option> <select/>
A default value can be given using
selected on an option if required.
Additionally, grouping of options inside a list is possible by placing a number of options together inside
<optgroup label="Paulo Coelho"> <option>The Alchemist</option> <option>Eleven Minutes</option> </optgroup>
The datalist also contains option elements like select element. It is then linked with an
input element. As we enter values inside the input, the options that match the given text are shown. It auto-completes the text entered by the user.
<label for="country">Enter country:</label> <input type="text" name="country" id="country" list="mySuggestion"> <datalist id="mySuggestion"> <option>USA</option> <option>India</option> <option>China</option> <option>Canada</option> ... </datalist>
Note: Try datalist with
<input type="range"> and
<input type="color">. Have it a go to see the result.
Radio buttons are essentially used to select only one out of many options. If a user needs to select an option with 5 or less numbers, radio buttons are preferred rather than list.
<div> <label for="red">Red</label> <input type="radio" id="red" name="color" value="red"> <label for="green">Green</label> <input type="radio" id="green" name="color" value="green"> <label for="blue">Blue</label> <input type="radio" id="blue" name="color" value="blue"> </div>
The value of name attribute must be same in a group of radio buttons, so that previously selected option can be disabled while selecting a new one.
Checkboxes are similar to radio buttons. But they allow you to select more than one option in a group.
<div> <label for="coding">Coding</label> <input type="checkbox" id="coding" name="hobbies" value="coding"> <label for="music">Music</label> <input type="checkbox" id="music" name="hobbies" value="music"> <label for="gym">Gym</label> <input type="checkbox" id="gym" name="hobbies" value="gym"> </div>
Note: Most often,
fieldset elements are used to group radio buttons and checkboxes. And, a
legend element is represented as a caption to the
fieldset. Check it out here.
Buttons are used as a clickable input for triggering various actions. There are three types of buttons.
This submits the form that the button is contained within.
This resets the contents user entered in the form to their default.
The textarea element allows you to input text in a text box that can span multiple size. The size can be given through
cols. As a user, you will able to resize it by default. However, it can be controlled with the
resize property in CSS. Unlike
textarea requires a closing tag.
<label for="comment">Feedback</label> <textarea id="comment" name="comment" rows="4" cols="50"> </textarea>
So far we have looked at various ways to input different types of data. Now let's take a look at few ways for outputting data.
A progress bar is used to visually output what the progress is for a task. A real time scenario will be to show how much percent of files have been downloaded.
<progress max="100" value="50">50/100</progress>
For the record, the
min attribute can't be set.
Meters are used to visually display fixed values in a range.
<meter min="0" max="100" value="75" low="33" high="66" optimum="80">75</meter>
The range is split into three parts delimited by low and high. The preferred part, average part and the worst part.
Then the meter is colored based on the value, green if its in the preferred part, yellow if its in the average part or red for worst part.
Note: For both
meter, if the browser does NOT the support the element, the content present inside the element is considered as a fallback and for assistive technologies like screen readers.
Thank you for staying and reading the entire article. If you feel like you don't understand a topic or need more information, the MDN docs are always a good resource. :)
Top comments (1)