Forms

The <form> Elements

Types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
HTML forms are used to collect information from the user.

Content:

Input Type Text
Submit Button
Input Type Radio
Checkbox
Action Attribute
Method Attribute
Fieldset and Placeholder
Drop Down List and Datalist
Password and Emails
Input Type Number
HTML5 added attributes

The <input> Element

The <input> element is the most important form element and can be displayed in several ways, depending on the type attribute.

Type	Description
<input type="text">	Defines a one-line text input field
<input type="radio">	Defines a radio button (for selection one of many choices)
<input type="submit">	Defines a submit button (for submitting the form)
<input type="image">	Defines an image as a submit button (src:"image_location") is necessary

Back to top

Input Type Text

Examples

First example is a simple form:

	    <form>
		   First name:<br>
		   <input type="text" name="firstname"><br>
		   Last name:<br>
		   <input type="text" name="lastname"><br><br>
		   <input type="submit" value="Submit, Macho Réi!">
	    </form>

This is how it will look like in a browser:

Second example has suggestion names inside the boxes already

	    <form>
		   First name:<br>
		   <input type="text" name="firstname" value:"Juvenal"><br>
		   Last name:<br>
		   <input type="text" name="lastname" value:"Lascolino"><br><br>
		   <input type="submit" value="Submit saporraí!">
	    </form>

This is how it will look like in a browser:

Back to top

The Submit Button

<input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

Example:

 
	    <form action ="/action_page.php">
		   First name:<br>
		   <input type="text" name="firstname" value:"Juvenal"><br>
		   Last name:<br>
		   <input type="text" name="lastname" value:"Lascolino"><br><br>
		   <input type="submit" value="Submit saporraí!">
	    </form>

Submit Button as an Image

Image as a submit button.

		<form action="/action_page.php">
        First name: <input type="text" name="fname"><br>
        Last name: <input type="text" name="lname"><br>
        <input type="image" src="https://bit.ly/2nwDmF6" alt="Submit" width="48" height="48">
        </form>

It will render like this:

The Name Attribute

Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that input field will not be sent at all.

Back to top

Radio Button Input

<input type="radio"> defines a radio button

Radio buttons let user select ONE of a limited number of choices:

	    <form>
		   <input type="radio" name="gender"  id="male" value:"male"><label for="male">Male</label><br>
		   <input type="radio" name="gender"  id="female" value:"female"><label for="male">Male</label><br>
		   <input type="radio" name="gender"  id="shupas" value:"chupas" checked><label for="male">Male</label><br>
	    </form>

This is how it will look like in a browser:

You should always put the <label> after the <input type="radio">, and on the same line. There should usually be a space between the <input> and the <label>. You can accomplish this with a little bit of margin, or with simply a typographical space. The <label> should always use for attribute, which specifies that it is connected to the <input> by id. This is an important usability practice, as it allows the user to check and uncheck the box by clicking the label, not just the (too small) checkbox itself. This is even more critical today than it was in the past because of touchscreens — you want to give the user the easiest possible checkbox experience. Good labelling practices

Back to top

Checkbox

Checkboxes are a little unwieldy from a data standpoint. Part of this is that there are essentially two different ways to think about their functionality. Frequently, a set of checkboxes represents a single question which the user can answer by selecting any number of possible answers. They are, importantly, not exclusive of each other. (If you want the user to only be able to pick a single option, use radio boxes or the <select> element.)

Example on how the code is for each line: <input type="checkbox" name="Langs" id="html" value="html"> <label for="html">HTML</label><br>

As in the Radio list, I added the id attribute to <input> so it could link to the <label> tag, which has the attribute for with the same value as the "id" attribute.

You should always put the <label> after the <input type="checkbox">, and on the same line. There should usually be a space between the <input> and the <label>. You can accomplish this with a little bit of margin, or with simply a typographical space. The <label> should always use for attribute, which specifies that it is connected to the <input> by id. This is an important usability practice, as it allows the user to check and uncheck the box by clicking the label, not just the (too small) checkbox itself. This is even more critical today than it was in the past because of touchscreens — you want to give the user the easiest possible checkbox experience. Good labelling practices

Back to top

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data:
<form action="/action_page.php">

If the action attribute is omitted, the action is set to the current page.

Back to top

The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:

<form action="/action_page.php" method="get">

P.S.: instead of "get" one can also use "post":

<form action="/action_page.php" method="post">

GET

The default method when submitting a form data is GET. The submitted form data will be visible in the page address field.

POST

Always use POST if the form data contains sensitive of personal information. The POST method does not display the submitted form data in the page address field.

Back to top

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.

	    <form action="/action_page.php"
	     <fieldset>
	        <legend>Personal information:</legend>
		   First name:<br>
		   <input type="text" name="firstname" value:"Juvenal"><br>
		   Last name:<br>
		   <input type="text" name="lastname" value:"Lascolino"><br><br>
		   <input type="submit" value="Submit saporraí!">
	    </form>

This is how it will look like in a browser:

With the attribute placeholder written "First name here"/"Last name here" inside the text boxes:

Back to top

Drop-down List

On the Drop-down list one needs to use the element <select> and inside of it create the options to be selected using the element <option>, then give each option a value to be chosen:

Exemple from the drop-down list above:

       
		        <select>
		            <option value="none">none</option>
		            <option value="chupas">chupas</option>
		            <option value="dupas">dupas</option>
		            <option value="catumbé">catumbé</option>
		            <option value="bolé">bolé</option>
		            <option value="decovas">decovas</option>
		        </select>

The <datalist> element

There is another way of having options on a form: it's using the <datalist> element.

It contains pre-defined options for an <input> element that one can choose to select or to write anything else.

In the example bellow, one has the options to choose one of the countries suggested or to write another country that is not in the list.

Example:

Back to top

Passwords and Emails

For email use the input type text and for password use the input type password.
The Method Attribute used for the Action Attribute for this kind of information must be "post", not "get".

Back to top

Input Type "number"

<input> elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.

Exemples:

What is your age?

Controlling Step Size

By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a step attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a step value of 10:

Allowing Decimal Values

If you want to enter a value that requires decimals, you'll need to reflect this in the step value (e.g. step="0.01" to allow decimals to two decimal places). Here's a simple example:

Controlling input size

To adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:

CSS:
#number {
width: 3em;
}

Back to top

Text Area

The HTML <textarea> tag is used within a form to declare a textarea element - a control that allows the user to input text over multiple rows.

Exemple:

Back to top

HTML5 added the following attributes for <input>:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

and the following attributes for <form>:

autocomplete
novalidade

To be continue...

For more info about forms visit W3 School on Input Attributes and also their page on HTML Forms.

Back to top

Form Elements