Web Development Course:
TL;DR – HTML forms are useful in gathering information from website users.
Understanding HTML Forms
HTML forms help you interact with your users by allowing them to send data to your website. To initialize an HTML form, you must use a pair of <form> tags to wrap the form elements (e.g., text input areas and buttons):
<form action="/action_page.php"> First name:<br><input type="text" name="name" value="John"><br> Last name:<br><input type="text" name="surname" value="Snow"><br> <input type="submit" value="Submit"> </form>
Using different form elements, you can let your user choose from a predefined set of options or type in their own text:
|Text input elements||Multiple choice elements|
|Text field||Radio buttons|
|Password field||Dropdown lists|
To specify an input area, you have to use the <input> tags:
<form> <br>First name:<br> <input type="text" name="first name" placeholder="firstname"> <br>Last name:<br> <input type="text" name="lastname" placeholder="lastname"> </form>
You will also need to include a
type attribute to specify what kind of data your HTML form can receive from the user. These are all the values it can take in HTML5:
HTML forms usually also have buttons that allow users to submit the data to the server. To create a clickable button, you can use the
<input> element with the
type attribute and its value defined as
submit. You can also use <button> tags:
<button name="submit"> <strong>Please contact</strong> us today. </button>
Common Elements for HTML Forms
To collect textual multi-line data, you should use the
<textarea> element for your form in HTML. Since the element only requires one type of value, you won't need the
<textarea name="comment" cols="30" rows="3" id="comment">Write your comments here</textarea>
The <label> element defines a label of the input element, allowing the user to have a better understanding of the form:
<label>My Name Field</label> <input type="text" name="myName" class="myNameInput" required/>
The <fieldset> element defines a group of a few similar elements. They will be shown together as one part of an HTML form but represent separate input elements:
<form action="login" method="POST"> <fieldset> <legend>Login Form:</legend> Username: <input type="text" name="user_name"> Password: <input type="password" name="user_password"> <input type="submit" value="Login"> </fieldset> </form>
To describe the elements inside the
<fieldset> element, use <legend>. It helps the user understand what information the
<form> <fieldset> <legend>This is the title</legend> First input: <input type="text" size="30"><br> Second input: <input type="text" size="30"><br> </fieldset> </form>
Multi-choice Forms in HTML
By using the <select> element, you can allow users to choose data from a predefined set of multiple options.
Here are the most common types of such elements:
- Radio buttons
- Dropdown lists
To specify these elements, you need to use the
type attribute with your
<input> elements. In the example below, we create three radio buttons:
<form> <input type="radio" name="day" value="monday" checked>Monday<br> <input type="radio" name="day" value="tuesday">Tuesday<br> <input type="radio" name="day" value="wednesday">Wednesday </form>
The <option> element defines a single option in a multiple choice checklist. You can add as many options as you need:
<select name="housepets"> <option value="cat">Cat</option> <option value="dog">Dog</option> <option value="llama">Llama</option> <option value="rabbit">Rabbit</option> <option value="animal">Animal</option> </select>
Attributes for HTML5 Forms
|accept‑charset||Outlines the character set in the submitted form|
|action||Sets the destination of the data to be processed|
|autocomplete||Stipulates whether the form should be autocompleted (on by default)|
|enctype||Outlines the encoding type for the submitted information|
|method||Stipulates the HTTP method for submitting the form (get or post)|
|name||Names a form in HTML|
|novalidate||Informs the browser to avoid authenticating the form|
|placeholder||Specifies a placeholder text in a textual input field|
|target||Indicates the target webpage where the processed data will be displayed|
Here is a simple example of an HTML5 form with multiple attributes:
<form action="index.php" method="post" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate> <p>Form elements</p> </form>
The action Attribute
As the name implies, the
action attribute outlines the action to be carried out when a user submits the data for processing:
In the example above, when a user clicks the submit button, the data will be relayed to a webpage on the server called index.php.
Writing an action page might be a bit too complicated for a beginner. However, a lot of web hosts actually offer prewritten scripts for these functionalities.
The method Attribute
method attribute outlines the type of HTTP method to be applied for transmitting the input data on your forms in HTML. The method can either be
<form action="index.php" method="get">
<form action="index.php" method="post">
For HTML forms,
post method is the default value. The difference between the two methods is simple: the submitted form data will be included in the URL if you use
get, but not if you use
get allows you to bookmark a certain webpage and create links to it. However, that makes it a poor option for sending sensitive information (e.g., passwords).
HTML Forms: Useful Tips
- Keep in mind that pressing ENTER in a text field that only allows one line of text will act as pressing the Submit button. Therefore, choose text areas whenever more text might be needed.
- Using the
labelattribute increases the clickable area: the user might select an option by clicking on the label as well, not only, e.g., checkbox.
- Do not use a single radio button in your HTML5 form: this element only has a meaning when it is in a group.
Properties for CSS Form: Learn to Style HTML Input Forms
CSS form guide: learn to easily style HTML forms and with CSS form properties. Find out how to use different CSS input type in your code from examples.
A Sorted List of CSS Code Examples: Master Styling HTML Elements
Easily accessible CSS code examples: CSS styles, borders, tables, buttons & more. Discover many CSS examples in this comprehensive CSS code example list.