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/oliverfootwear/

http://www.facebook.com/

https://ib.nab.com.au/nabib/index.jsp

http://www.ebay.com.au/



BrowsersThe 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>

<input type="checkbox" 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>

<input type = "radio" 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

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

HTML Validation

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> <input type="checkbox"

name="Rugby Union" id="union"

value="Rugby Union" /> <label for="union">Union</label>

<input type="checkbox" name="NRL" id="nrl"

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

<input type="checkbox" name="AFL"

id="afl" value="AFL" />

<label for="afl">AFL</label><br>

<input type="checkbox" name="NFL"

id="nfl" value="NFL" />

<label for="nfl">NFL</label>

<input type="checkbox" name="Soccer" id="soccer"

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

<br><br>

<label> Terms and Conditions</label> <br>

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

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

<input type="submit" name="submit" id="submit"

value="Join Now" />

<input type="reset" name="reset"

id="reset" value="Reset" />

</form> </body></html>

Opening in Chrome

Opening in Internet Explorer

Opening in Safari

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 theCSS code document

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

CSS Validation

Technology

HTML5 - Forms