html5 - forms
TRANSCRIPT
![Page 1: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/1.jpg)
Static Websites
HTML 5 CSS
Forms
A demonstration of Form types in HTML 5 coding and styled with CSS
![Page 2: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/3.jpg)
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>
![Page 4: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/4.jpg)
Form Tags
• To declare a form, it requires opening and closing form tags around the form controls.
Opening:<form> Closing: </form>
![Page 5: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/5.jpg)
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/
![Page 6: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/6.jpg)
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.
![Page 7: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/7.jpg)
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>
![Page 8: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/8.jpg)
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.
![Page 9: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/9.jpg)
Text Field code
<input type="text" id="first" value="First Name"/>
![Page 10: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/10.jpg)
• 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.
![Page 11: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/11.jpg)
Email Code
<input type="email" id="email" value="Email Address"/>
![Page 12: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/12.jpg)
Telephone
• The telephone field is defined for a telephone number to be entered in.
![Page 13: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/13.jpg)
Telephone Code
<input type="tel"
id="mobile" value="Mobile Number"/>
![Page 14: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/14.jpg)
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.
![Page 15: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/15.jpg)
Number Code
<input type="number" id="postcode"
value="2600"/>
![Page 16: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/16.jpg)
Checkboxes
• A checkbox allows the user to select multiple boxes, depending on their preferences.
• Labels are needed to identify, the box being selected.
![Page 17: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/17.jpg)
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>
![Page 18: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/18.jpg)
Radio Buttons
• A radio button is used when only one item is needs to be selected out of a list of options.
![Page 19: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/19.jpg)
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>
![Page 20: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/20.jpg)
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.
![Page 21: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/21.jpg)
Submit Button Code
<input type="submit" name="submit"
id="submit" value="Join Now" />
![Page 22: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/22.jpg)
Reset Button
• A reset button is used to reset all the information on the form back to default. All inserted information is cleared.
![Page 23: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/23.jpg)
Reset Button Code
<input type="reset" name="reset"
id="reset" value="Reset" />
![Page 24: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/24.jpg)
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
![Page 25: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/25.jpg)
HTML Validation
![Page 26: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/26.jpg)
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>
![Page 27: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/27.jpg)
<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>
![Page 28: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/28.jpg)
<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>
![Page 29: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/29.jpg)
<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>
![Page 30: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/30.jpg)
<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>
![Page 31: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/31.jpg)
<input type="submit" name="submit" id="submit"
value="Join Now" />
<input type="reset" name="reset"
id="reset" value="Reset" />
</form> </body></html>
![Page 32: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/32.jpg)
Opening in Chrome
![Page 33: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/33.jpg)
Opening in Internet Explorer
![Page 34: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/34.jpg)
Opening in Safari
![Page 35: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/35.jpg)
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" />
![Page 36: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/36.jpg)
• 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.
![Page 37: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/37.jpg)
• Background colours• Border sizes• Text• Float• Location of text
All of the above can be set in theCSS code document
![Page 38: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/38.jpg)
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}
![Page 39: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/39.jpg)
CSS Validation
![Page 40: HTML5 - Forms](https://reader038.vdocuments.mx/reader038/viewer/2022110309/55844f06d8b42a5b0a8b4a64/html5/thumbnails/40.jpg)