Forms

Go back to HTML and CSS Index

In this lesson, we will have a look at how to add different forms to a page.

The form element

Forms make it possible to get user input. They are used on eg. contact and registration pages, and to create newsletter sign-ups, search fields and login.

With HTML alone it is not possible to do anything with the data that the user sends - that part is mostly taken care of backend - but we can insert the forms so that they are ready to be dealt with backend.

Any type of form is inserted into the form element:

<form action="#">
<!-- Inputfelter -->
</form>
11.1 | The form element

The action attribute is used to specify where the formdata is to be sent. Since we're not going to go backend at this point, we will just leave it the way it is.

The form element can contain a number of different elements. We will now have a look at some of them.

The input element

There are a number of different types of input fields. One of them is the type text:

input type="text" and input type="submit"

<form action="#">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
<input type="submit" value="Submit">
</form>
11.2 | Input type text

Example

Surrounding all the different form subelements, we have the form element.

The label is added for best accesibility practices. The for attribute is used to connect the label to the input field with that same id value.

In the input element, the type attribute tells the browser what type of content is expected. In most cases, the text value is used. The value of the name attribute is used in relation to the backend-programming and so the value should relate to the expected input value of the form.

The last input element, the one with type="submit", defines a submit button that is used to submit all form values to a form-handler. As stated, this type of input field is rendered as a button.

input type="email"

Using the email value, a different kind of validation takes place - in this field it is eg. required that an @ is present - otherwise it will return an error:

<form action="#">
<label for="myemail">Email:</label>
<input type="email" name="email" id="myemail">
<input type="submit" value="submit">
</form>
11.3 | input type="email"

Example

Try filling in the input field with just a name, not and email, and click the Submit button to see what happens.

input type="password"

Yet another input type is password. By using this type, the characters inserted by the user will get masked:

<form action="#">
<label for="pass">Password:</label>
<input type="password" name="password" id="pass">
<input type="submit" value="Submit">
</form>
11.4 | input type="password"

Example

Try entering some different characters in the form to see the difference.

input type="search"

As the name implies, the input with type="search" is used in connection with search fields:

<form action="#">
<label for="mysearch">Search for:</label>
<input type="search" name="search" id="mysearch">
<input type="submit" value="Search">
</form>
11.5 | input type="search"

Example

input type="checkbox"

Checkboxes let the user select one or more options of a limited number of choices.

<form action="#">
<input type="checkbox" name="mood1" value="happy" id="mood1">
<label for="mood1">Happy</label>
<input type="checkbox" name="mood2" value="tired" id="mood2">
<label for="mood2">Tired</label>
<input type="submit" value="Submit">
</form>
11.6 | input type="checkbox"

Example



input type="radio"

If you want the user to only choose one option, go for radio buttons instead:

<form action="#">
<input type="radio" name="mood" value="happy" id="happy">
<label for="happy">Happy</label>
<input type="radio" name="mood" value="tired" id="happy">
<label for="tired">Tired</label>
<input type="submit" value="Submit">
</form>
11.7 | input type="radio"

Example



Notice that the name value is the same for both options (and it has to be - otherwise it is not one or the other)

input type="color"

The color type lets the user choose a color.

<form action="#">
<label for="mycolor">My favorite color:</label>
<input type="color" name="favcolor" id="mycolor">
<input type="submit" value="Submit">
</form>
11.8 | input type="color"

Example

Be aware that the color type is not supported in neither Internet Explorer 11 nor Safari 9.1 (or any previous versions).

input type="date"

The date type lets the user pick a date in a calendar:

<form action="#">
<label for="mydate">Date of choice:</label>
<input type="date" name="mydate" id="mydate">
<input type="submit" value="Submit">
</form>
11.9 | input type="date"

Example

Be aware that the date type is not supported in neither Internet Explorer 11 (or any previous versions) nor Safari.

The textarea element

If you want to give the user the opportunity to write a longer message or note, use the textarea element instead of the input element:

<form action="#">
<label for="mymsg">My message:</label>
<textarea name="mymsg" id="mymsg" cols="30" rows="10"> </textarea>
<input type="submit" value="Submit">
</form>
11.10 | input type="date"

Example


Notice that the textarea element is not an empty element (one that does not have an end tag) - this one actually has an end tag unlike the input element.

Other form subelements

There are a lot of other form subelements, but I'm not going to include them at this point. If you want to see the list and look at some other examples, here's a list of references: