Static Websites HTML 5 CSS FormsA 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/
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.
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.
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
<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>
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 textAll of the above can be set in theCSS code document