HTML

Forms

Have you ever been on a site, where you could write to the company?
It is smart right?
You can do the same, here is how.

Web forms are a very powerful tool for interacting with users. They are often used to collect data from the user or allowing them to control the user interface. The best known form on the web is probably the search box that sits right in the middle of Googles homepage.

form

How to structure a form

We must tell the browser that we want a form. Therefore are we going to use the form tag. Normally you insert the form tag inside a section tag.

<form>
</form>
1.7.1 Example

Form attributes

The form tag can have 2 attributes

action="https://example.com/" 
method="get" <!--or---> method="post"

Form elements

Inside the form are there some elements and controllers

<label>

The label tag represents a caption for an item in a user interface.
The label text is not only visually associated with the input tag. It is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
You can click on tabel to activate the input, as well as the input itself.

<form>
<label for="cheese">Do you like cheese? </label>
<input type="checkbox" name="cheese" id="cheese">
<form>
1.7.2 Example
Visuel example of 1.7.2

If you want to associate the label with an input element, you need to give the input an ID attribute. The label tag then needs a for attribute whose value is the same as the input's ID.
But you can also nest the input tag inside the label tag

<form>
<label>Do you like peas?
<input type="checkbox" name="peas">
</label>
<br>
<label>Do you like ice cream?
<input type="checkbox" name="iceCream">
</label>
<form>
1.7.3 Example

Visuel example of 1.7.3

<input>

We have input fields in forms

Text input

input elements of type text create basic single-line text fields.

<form>
<label for="textinputID">Text input</label>
<input type="text" id="textinputID" name="textinput">
</form>
1.7.4 Example
Visuel example of 1.7.4

Email input

input elements of type email creates a single-line text field that accepts only e-mail addresses

<form>
<label for="emailID">Email input</label>
<input type="email" id="emailID" name="emailInput">
</form>
1.7.5 Example
Visuel example of 1.7.5

Number input

input elements of type number only accepts numbers

<form>
<label for="num">Write a number</label>
<input type="number" name="houseNumber" id="num">
</form>
1.7.6 Example
Visuel example of 1.7.6

Password input

input elements of type password hides the text inside it

<form>
<label for="pw">Password</label>
<input type="password" name="password" id="pw">
</form>
1.7.7 Example
Visuel example of 1.7.7

<textarea>

textarea allow users to enter a sizeable amount of free-form text

<form>
<textarea name="message" rows="10" cols="30">This is a text area</textarea>
</form>
1.7.8 Example
Visuel example of 1.7.8

Attributes

We have seen a lot of elements with many different attributes. Here is an overview of them.
name - A name attribute to set the name of the associated data point submitted to the server when the form is submitted.
type - Are used in input fields to tell the browser what data the input field has.
for - Are used when you work with labels to indicate which form element they belong to. The element must have an ID to connect the 2 tags.
value - Are used if you want data to be inside the input field.

There are a lot more attributes to form elements

More form controllers

There are many types of from controls that you can use to collect information from visitors.
When you make a form with some controls is it important to make a form element around. You can make a label, so the user knows what they should write in the input fields.

Radio buttons

We have radio buttons

<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
</form>
1.7.9 Example
Visuel example of 1.7.9

Group radiobuttons

It is a good idea to group radio buttons together

<form>
<fieldset>
<legend> Output format </legend>
<input type="radio" name="format" id="txt" value="txt" checked>
<label for="txt">Text file</label>
<input type="radio" name="format" id="zip" value="zip">
<label for="zip">Zip file</label>
</fieldset>
</form>
Example 1.7.10
Output format
Visuel example of 1.7.10

Checkboxes

Checkboxes are another type of input fields

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">Bike</label>
</form>
1.7.11 Example

Visuel example of 1.7.11

Group checkboxes

It is a good idea to group checkboxestogether

<form>
<fieldset>
<legend> I want to receive </legend>
<input type="checkbox" name="drinks" id="check_1" value="milk">
<label for="check_1">Milk</label>
<input type="checkbox" name="drinks" id="check_2" value="water">
<label for="check_2">Water</label>
</fieldset>
</form>
Example 1.7.12
I want to receive
Visuel example of 1.7.12

Select controllers

select element represents a control that provides a menu of options

<form>
<select id="simple" name="simple">
<option disable selected">--Please choose an option--</option>
<option value="banana">Big, beautiful yellow banana</option>
<option value="cherry">Succulent, juicy cherry</option>
</select>
</form>
1.7.13 Example
Visuel example of 1.7.13

Progress

A progress bar represents a value that changes over time up to a maximum value specified by the max attribute

<form>
<progress max="100" value="75">75/100</progress>
</form>
1.7.14 Example
75/100
Visuel example of 1.7.14

Submit buttons

It is important with a button, when you have made your contact form, so you can send your data.

<form>
<label for="firstName">First name:</label>
<input type="text" name="firstName" id="firstName">
<button type="submit">Send</button>
</form>
1.7.15 Example


Visuel example of 1.7.15

We can also reset the input fields with a little help from a button.

<form>
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName">
<button type="submit">Send</button>
<button type="reset" >Reset</button>
</form>
1.7.15.2 Example


Visuel example of 1.7.15.2

Send your data

The data you have in the contact form can you send to another site. We must talk about the 2 attributes the form tag can have.
The action attribute defines where the data gets sent. Its value must be a valid relative or absolute URL. If this attribute isn't provided, the data will be sent to the URL of the page containing the form — the current page.

Form without a method GET and an action URL

There are no URL or file in the action attribute therefore will the information from the form be in the URL

<form method="get" action="#">
<label for="firstName">First name</label>
<input type="text" name="FirstName" id="firstName">
<button type="submit">Send</button>
</form>
1.7.16 Example



Visuel example of 1.7.16

Form without a method GET, but with an action URL

There are now an URL in the action attribute, therefore will we now be sent over to the site, but the data will still be in the URL

<form method="get" action="https://example.com/">
<label for="lastName">Last name</label>
<input type="text" name="lastName" id="lastName">
<button type="submit">Send</button>
</form>
1.7.17 Example



Visuel example of 1.7.17

The reason why it stand there. Is becuase, we have used the get method

Form with a method POST and an action URL

The POST method move the information from the URL into the body of af server request

<form method="post" action="https://example.com/">
<label for="name">Name</label>
<input type="text" name="fullName" id="name">
<button type="submit">Send</button>
</form>
1.7.18 Example



Visuel example of 1.7.18

If you want to see the data to go

  1. Open the developer tools.
  2. Select "Network"
  3. Select "All"
  4. Select "example.com" in the "Name" tab
  5. Select "Headers"

Try Google it




How can we make it?

Tips and trick

Here is some tips and tricks to forms

Labeling Controls

Use the <label> element, and, in specific cases, other mechanisms (e.g. WAI-ARIA, title attribute etc.), to identify each form control

<label for="firstname"> </label>
Example 1.7.20

Grouping Controls

Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify. It also makes it easier for people to focus on smaller and more manageable groups rather than try to grasp the entire form at once.

<fieldset> ... </fieldset>
Example 1.7.21

Validating Input

In addition to providing instructions, validate user input to help users avoid mistakes. HTML5 defines a range of built-in functionality to validate common types of input, such as email addresses and dates

<input type="text" name="name">
<input type="email" name="email">
<input type="number" name="houseNumber">
Example 1.7.22