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.
Basic Markup:
<form action="/" method="POST">
</form>
Form Controls
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.
Input
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 text, email, number, date.
<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 for.
The 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 email allows user to enter an email with basic in-built validation. Additionally, multiple allows to enter multiple email ids separated by commas.
Search field
<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.
Number field
<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 min and max attributes.
While incrementing or decrementing, you can increase the value by setting step="2".
Slider control
<input type="range" id="slider" name="amount" min="100" max="1000" step="100" value="500">
<output for="slider"></output>
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.
Color Picker
<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. min, max, & 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,
<input type="month">
To select week,
<input type="week">
To select time,
<input type="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,
<input type="datetime-local">
More on types.
More on attributes.
Selection Elements
There are two types of selection inputs. Select dropdown and datalist element.
Select dropdown
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/>.
<optgroup label="Paulo Coelho">
<option>The Alchemist</option>
<option>Eleven Minutes</option>
</optgroup>
Datalist
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
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
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.
Button
Buttons are used as a clickable input for triggering various actions. There are three types of buttons.
Submit Button
<button type="submit"></button>
This submits the form that the button is contained within.
Reset Button
<button type="reset"></button>
This resets the contents user entered in the form to their default.
Generic Button
<button></button>
It is generally used as event listeners with the combination of javascript to trigger events in an interactive UI.
Textarea
The textarea element allows you to input text in a text box that can span multiple size. The size can be given through rows and cols. As a user, you will able to resize it by default. However, it can be controlled with the resize property in CSS. Unlike input, textarea requires a closing tag.
<label for="comment">Feedback</label>
<textarea id="comment" name="comment" rows="4" cols="50">
</textarea>
Output Elements
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.
Progress Bar
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.
Meter
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 progress and 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)
Neat!