HTML Forms

Form Introduction

A form is a way to send information to a server. It can contain a variety of different input types, including the following: text, password, checkbox, radio, textarea, submit, file, or button. A form works by enclosing a section of HTML in the <form> and </form> tags. Inside of a form element, there are typically several input elements, including one submit type. Also, there can be layout-formatting HTML inside the form to organize the appearance of the document, and a form requires a closing tag (</form>).

Sample Form:

First name:
Last name:

Sample Form's Code:

<form action="submit.php" method="get">
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname"><br>
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname">
<br>
<input type="submit">
</form>


action attribute

The code for a form follows the following rules: A form has required attribute "action". action specifies to which page the data should be sent when the form is submitted.

<form action="submit.php" method="get">

method attribute

The attribute "method" describes how to send the form data. The two options are "get" and "post". If "method" is not specified, the default is "get". "get" sends the data using the URL of the page, which would make the next page's URL "submit.php?firstname=john&lastname=doe". get is used when a page should be able to be bookmarked with the form data filled in already, or when the information is short (there is a limit to how long a url can be). The other option, "post", has no limit on how long the data can be. It also cannot be bookmarked, and leaves no indication of form data in the URL.

<form action="submit.php" method="get">
<form action="submit.php" method="post">

input elements

Inside of a form, there can be any number of "input" elements. They usually have an attribute "type" which specifies which type of input to make, default being "text". The options for type are: text, password, checkbox, radio, submit, reset, file, hidden, image, and button. Input types do not have a closing tag.

<input type="text" id="firstname" name="firstname">


text

Used for standard input of text, default size is 20 characters

password

Used for input of passwords, text displays as asterisk characters, but is handled the same as text

checkbox

Used to select none, some, or all of a group of elements

radio

Used for exclusive selection of elements (Only one can be selected)

submit

Submit button submits the form

reset

Reset button resets all input elements

file

Used to select a file to send with the form.

hidden

An invisible element that is sent along with the form, value can't be changed.

image

Used to create a graphical submit button

button

Creates a push button with no behavior

label element

A label element has a "for" attribute that corresponds to the "id" of an input element. Each "id" must be unique -- a label cannot be for more than one input element. Each label element must also have a closing tag (</label>).

<label for="firstname">First name:</label>