join: new@juude

get alerts for new articles


join: new@juude

get alerts for new articles


The Form

Html5's new form elements go a long way in helping create a mistake free form. Not all functions of each element work in all browsers (March 2012) but if the new input element is not read by a particular browser then the user gets the old input box and will still be able to fill out the information correctly.

Validate - required

The form will now validate without any additional scripting you just need to add "required" to any of the form's user elements.

Form Tag

All the form elements including the submit button are placed within the opening and closing form tags.

Submission Methods

There are two different submission methods for a form "POST" and "GET".
Post: You would normally use for a form when collecting information from a user.
Get: You would normally use when data is returned as in a search.

go to top of page

Connect to

Server Side Script
Although we are going to connect to a php script you do not have to know php in order to write the script.

action= the file name of the server side script, in this case address.php.
<form method="post" action="address.php">
Input elements and submit button


Is used to separate different sections of the form. A border is placed around a group of elements (see below).


A label is used for the title of each element of the form

<input type="email" >


a multi-line text input area

Select Menu/List


go to top of page



There is not a closing tag for the input element.

Type indicates the purpose of the input element and in turn requires the user to enter the correct information. For example if the type is email <input type="email"> then the user will be required to enter an email address in order to submit the form
<input type=text>
<input type="datetime"> NEW
<input type="datetime-local"> NEW
<input type="date"> NEW
<input type="month"> NEW
<input type="time">
<input type="week"> NEW
<input type="number"> NEW
<input type="range"> NEW
<input type="email"> NEW
<input type="url"> NEW
<input type="search"> NEW
<input type="tel"> NEW
<input type="color"> NEW
<input type="password">

<input type="checkbox">

The check box is used if you want the user to check more than one item from a group of items. If you want the user to only check one item then you should use the Radio Button

<input type= "radio">

Inorder for the user to check only one radio button all buttons must have the same name.

<input type="submit or reset">

The value determines the text on the button
<input type="submit" value="submit">
<input type="reset" value="reset">

File upload control,

<input type="file">
<input type="image">

Hidden Input Control

Cannot be seen or used by the user
<input type="hidden>

go to top of page

Other Attributes

autocomplete NEW

autocomplete ="on" or "off"
value is stored so that the form can be prefilled later

autofocus NEW
the element is focused as soon as the document is loaded

dirname NEW
Enables submission of a value for the directionality of the element, and gives the name of the field that contains that value.

elements represent a disabled control

used with type="submit" and type="image", specifies the URL of the file that will process the input control when the form is submitted

formnovalidate NEW
The input item does not have to validate when the form is submitted

formtarget="_blank" etc indicates where to display the response that is received after submitting the form. New window etc.

go to top of page

list NEW
list =id reference, The value of the id attribute on the datalist with which to associate the element

min and max
min and max=" "
min or max length of the element

When you have a form that sends a message from your website, the multiple attribute allows the user to select multiply receipients.

must match server side script and will be listed in email etc.

novalidate NEW

input password field

pattern NEW
to check the value of the control represented by its element 

placeholder=" "
Will be shown in the input box as a hint

required NEW
specifies that the input item must be filled out inorder to submit the form

step NEW
step=" "
specifies the number of intervals for an input field

target NEW
target="_blank" etc
browsing context

go to top of page