HTML5 - Forms

Static Websites

HTML 5
CSS
Forms

A demonstration of Form types in HTML 5 coding and styled with CSS

Forms
• Forms are part of a webpage that has multiple
controls that a user enters details in. These
controls include:
– Text fields
– Buttons
– Check boxes
– Colour pickers

Declaring HTML5
• To declare the document type as HTML 5, the
code must start with the doctype tag
<!DOCTYPE HTML>

• The document also requires opening and
closing HTML tags
Opening: <HTML>
Closing: </HTML>

Form Tags
• To declare a form, it requires opening and
closing form tags around the form controls.

Opening:<form>
Closing: </form>

Different types of Forms
• Forms can be used on websites, for multiple
different reasons.
– Signing up for a social networking site
http://www.facebook.com/
– Online Banking
https://ib.nab.com.au/nabib/index.jsp
– Online Shopping
http://www.ebay.com.au/
– Registering for competitions
http://au.prime7.yahoo.com/a1/competitions/oliverf
ootwear/

Browsers
The five most commonly used browsers are:
• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Opera
• Safari

• Not all browsers recognise HTML5 tags. Look at
the bottom of each slide to see what browsers
recognise the form control being used.

Labels
• A label is a tag put in front or above a control
tag to identify what needs to be inserted into
the control field.

Opening: <label>
Closing: </label>

Text Field
• A text field has a default width of 20
characters and is a single line of text.

• A label needs to be placed before a text box to
identify what needs to be inserted.

Text Field code

<input type="text"
id="first"
value="First Name"/>

Email
• The email field is new to HTML5. The field is
designed to accept an email address and will
display an error message if an email address is
not entered.

Email Code

<input type="email"
id="email"
value="Email Address"/>

Telephone

• The telephone field is defined for a telephone
number to be entered in.

Telephone Code

<input type="tel"
id="mobile"
value="Mobile Number"/>

Number

• The number field is used to enter a number. A
number can be typed in or the up and down
arrows used to get to the specific number.

Number Code

<input type="number"
id="postcode"
value="2600"/>

Checkboxes

• A checkbox allows the user to select multiple
boxes, depending on their preferences.

• Labels are needed to identify, the box being
selected.

Checkbox Code
<input type="checkbox"
name="Rugby Union"
id="union"
value="Rugby Union" />
<label for="union">Union</label>

name="NRL"
id="nrl"
value="NRL" />
<label for="nrl">NRL</label>

Radio Buttons

• A radio button is used when only one item is
needs to be selected out of a list of options.

Radio Button Code
<input type = "radio"
name = "agree"
id = "agree"
value = "agree" />
<label for = "agree">Agree</label>

name = "disagree"
id = "disagree"
value = "disagree" />
<label for = "disagree">Disagree</label>

Submit Button
• A submit button is used for when a form
needs to be submitted. Submit buttons are
usually located at the bottom of the form.

• The default word on the button is “Submit”.
This can be changed to a specific word if
desired in the “value” area.

Submit Button Code

<input type="submit"
name="submit"
id="submit"
value="Join Now" />

Reset Button

• A reset button is used to reset all the
information on the form back to default. All
inserted information is cleared.

Reset Button Code

<input type="reset"
name="reset"
id="reset"
value="Reset" />

Validation & Web Browsers
• A website must pass validation to be accessible.

• To validat code, the following websites can be
used.
– HTML: http://validator.w3.org/
– CSS: http://jigsaw.w3.org/css-validator/

• A website should also be made to work in
multiple Web Browsers

HTML Code
<!DOCTYPE HTML>
<html>

<head>
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="assignmentCss.css" media="all" />

</head>
<body>

<form>
<h1>Sign up today</h1>
<label>First Name</label>
<br>
<input type="text"
id="first"
value="First Name"/>

<br>

<label>Last Name</label>
<br>
<input type="text"
id= "last"
value="Last Name"/>

<br>

<label>Email Address</label>
<br>
<input type="email"
id="email"
value="Email Address"/>

<br>

<label>Mobile Number</label>
<br>
<input type="tel"
id="mobile"
value="Mobile Number"/>

<br>

<label>Date of Birth</label>
<br>
<input type="text"
id="dob"
value="DD/MM/YYYY"/>

<br>
<label>Post Code</label>
<br>
<input type="number"
id="postcode"
value="2600"/>

<br>

<label>Favourite Football codes</label>
<br>
name="Rugby Union"
id="union"
value="Rugby Union" />
<label for="union">Union</label>

name="NRL"
id="nrl"
value="NRL" />
<label for="nrl">NRL</label>

name="AFL"
id="afl"
value="AFL" />
<label for="afl">AFL</label>
<br>
name="NFL"
id="nfl"
value="NFL" />
<label for="nfl">NFL</label>

name="Soccer"
id="soccer"
value="Soccer" />
<label for="soccer">Soccer</label>

<br><br>

<label> Terms and Conditions</label>
<br>
name = "agree"
id = "agree"
value = "agree" />
<label for = "agree">Agree</label>

name = "disagree"
id = "disagree"
value = "disagree" />
<label for = "disagree">Disagree</label>

CSS
• Cascading Style Sheets (CSS) is commonly used
for styling HTML code. CSS is usually done in a
seperate document and linked together with a
link placed in the HTML code.

HTML link to CSS sheet
<link rel="stylesheet" type="text/css"
href="assignmentCss.css" media="all" />

• CSS is where all the colours and text styles are
selected.

• Borders can also be set in CSS.

• The section which needs to be styled, must be
declared at the top of the CSS page.

• Background colours
• Border sizes
• Text
• Float
• Location of text

All of the above can be set in the
CSS code document

CSS code
form
{font-size:1.3em;
width: 30em;
float: left;
text-align: left;
margin-right: 0.5em;
display: block
}
input
{
color: black;
background: #F7F2E0;
border
}

HTML5 - Forms

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to HTML5 - Forms

Similar to HTML5 - Forms (20)

Recently uploaded

Recently uploaded (20)

HTML5 - Forms