HTML Forms

This Page's Contents

What is a HTML Form?

A form Basic Structure

Define the Form

Define the Form

User Input Fields

text box: Simple: Single line Text Box

text box: Improved: Single line Text Box using 'label for & an ID'

text box: placeholder: Single line Text Box with the label inside the text box

text box Simple Single line Text Box

textarea Multi line Text Box

radio Round Button

checkbox Square check (tick) box

hidden

password

submit

reset

 

HTML5 New input types:

color, date, datetime-local, email, month, number range, search, tel, time, url, week,

 

What is a HTML Form?

HTML Forms are used to obtain information from your web page visitor. If you look at a form you may think that they would be hard to produce, when they are quite simple.

Probably the harder part is transferring the data back to where it can be used. I therefore suggest that at your first attempt you produce a very simple form that collects 1 or 2 items of information, a persons name then have that name e-mailed to your e-mail address.

Usually the data inputted in a form is processed by a Common Gateway Interface Script (CGI Script). These scripts are usually written in Perl.

Not all Hosting Servers allow these scripts, or it may cost more money to use them. Questions to ask your host. For security reasons hosts like to have full control over scripts.

• Do you have a Form to e-mail script or similar scripts that you can use.
• Can you add your own scripts
• Obtain the URL that points to the server directory that contains the scripts.

A form Basic Structure

Define the Form

Input Information

Submit the Information

Define the Form with the <form> tag

<form action="form-sample.php" method="post">

</form>

Or

<form action="form-sample.php" method="get">

</form>

• All the other form elements shown below are placed within the opening <form> & closing </form>
• The action attribute specifies a file that will process the forms inputted data. This is usually on a server, where either your site is hosted or a server on specialised form handling company.
  The file is usually a scripting language file such as PHP, js (javascript), or similar.
  Smaller sites often use a Formmail script file that sends an email containing the data to one or more email addresses.
  Due to security vulnerabilities with some formmail scripts, hosting companies often have there own version installed on the server.
• Methods post & get have subtle differences
  we recomend the post method because it is more secure.

Input Information.

There are several different ways of obtaining information. Choose a way that makes it easy for the user to enter the information.

 

User Input Fields,

These are various types of input boxes that you can use: radio Round Button, checkbox Square check (tick) box, text Single line Text Box, textarea Multi- line Text Box, hidden, password, submit, reset,

HTML5 added several new input types:

color, date, datetime-local, email, month, number range, search, tel, time, url, week,

text - A single line Text Box

• The text box allows the user to input a small amount of alpha, numeric  & keyboard characters onto a single line.
• Typical usage the input of names, sex, age

Text Box Simple Example

 

Text Box Improved Example

 

 

textarea - Multi line Text Box

• The textarea box allows for larger amounts of input over several lines.
• The size of the textarea box can be altered by the user by draging the bottom right corner.
• Typical usage: Addreses, message

Example

 

 

Radio Button Input

 

Defines a radio button.

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

Example, Select your Age group

21 or under
22 to 64
Pensioner

 

 

<form>

<p>Example, Select your Age group</p>

<input type="radio" name="Age-Group" value=" 21 or under" checked>21 or under<br> <input type="radio" name="Age-Group" value="22 to 64">22 to 64<br>

<input type="radio" name="Age-Group" value=Pensioner"> Pensioner

</form>

Pre select an option with checked

The page designer can pre select one of the options by placing the attribute checked at the end of the desired value.

Note: The user can still select any of the options

Check Box

• The check box is very similar to radio buttons. the main difference is that any number of check boxes can be selected.
• They can also be pre selected, using the checked attribute

 

 

Select your Favourite Colour(s)

White
Black
Red
Green
Blue

 

Attributes

 

maxlength, size,

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, size, step.

and the following attributes for <form>:

autocomplete, novalidate.

placeholder attribute

• The placeholder attribute places the label or expected format inside the text box.
• Can be used with input boxes: text, search, url, tel, email, and password.

size attribute

• The size attribute stipulates the width of the input box in number of characters required.
• Can be used with input boxes: text, search, tel, url, email, and password.

placeholder & size Example

text box: placeholder:

Sample Validation

<script type="text/javascript">

function hgsubmit()

{ if (/\S+/.test(document.hgmailer.name.value) == false) alert ("Please provide your name.");

else if (/^\S+@[a-z0-9_.-]+\.[a-z]{2,6}$/i.test(document.hgmailer.email.value) == false) alert ("A valid email address is required.");

else if (/\S+/.test(document.hgmailer.comment.value) == false) alert ("Your email content is needed.");

else { document.hgmailer.submit(); alert (' Thank you! \n Your email is sent.'); } }

</script>