All about forms in HTML
1. The <form>
element
<form action="/my-handling-form-page" method="post"> </form>
All of its attributes are optional, but it's standard practice to always set at least the action and method attributes:
The action attribute defines the location (URL) where the form's collected data should be sent when it is submitted. The method attribute defines which HTTP method to send the data with (usually get or post).
2. The <label>
, <input>
and <textarea>
elements
<form action="/my-handling-form-page" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email">
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</form>
3.label element
the use of the for attribute on all <label>
elements, which takes as its value the id of the form control with which it is associated — this is how you associate a form control with its label.
There is great benefit to doing this — it associates the label with the form control, enabling mouse, trackpad, and touch device users to click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users
4.input element
On the <input>
element, the most important attribute is the type attribute. This attribute is extremely important because it defines the way the <input>
element appears and behaves.
5.textarea vs input
the syntax of <input>
vs. <textarea></textarea>
. This is one of the oddities of HTML. The <input>
tag is an empty element, meaning that it doesn't need a closing tag. <textarea>
is not an empty element, meaning it should be closed with the proper ending tag. This has an impact on a specific feature of forms: the way you define the default value. To define the default value of an <input>
element you have to use the value attribute like this:
<input type="text" value="by default this element is filled with this text">
On the other hand, if you want to define a default value for a <textarea>
, you put it between the opening and closing tags of the <textarea>
element, like this:
<textarea>by default this element is filled with this text</textarea>
6.button element
we need to add a button to allow the user to send, or "submit", their data once they have filled out the form. This is done by using the element
<button type="submit">Send your message</button>
The <button>
element also accepts a type attribute — this accepts one of three values: submit, reset, or button.
i>submit
A click on a submit button (the default value) sends the form's data to the web page defined by the action attribute of the <form>
element.
ii>reset
A click on a reset button resets all the form widgets to their default value immediately
iii>button
A click on a button button does... nothing! That sounds silly, but it's amazingly useful for building custom buttons — you can define their chosen functionality with JavaScript.