Topic02b HTML
Topic02b HTML
47
Introducing Forms
Form Structure
48
Introducing Forms
How Forms Work
W erv
eb e
s
r
4 Request
Introducing Forms
Query Strings
title=Central+Park&where=United+States
<select name="where">
50
Introducing Forms
GET and POST
query string
title=Central+Park&where=United+States
query string 51
52
Form Control Elements
Text Input Controls
53
54
Form Control Elements
New in HTML5 – pattern and datalist
<datalist id="cities">
<option>Calcutta</option>
<option>Calgary</option>
<option>London</option>
<option>Los Angeles</option>
<option>Paris</option>
<option>Prague</option>
</datalist>
55
56
Form Control Elements
Choice Controls <select> using value attribute
?choices=Second
<select name="choices">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
<select name="choices">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
?choices=2
57
58
Form Control Elements
Button Controls (checkbox)
?accept=on&visit=canada&visit=germany
59
<button>
<a href="email.html">
<img src="images/email.png" alt="..."/>
Email
</a>
</button>
60
Form Control Elements
Specialized Controls (file upload)
61
Grumpy
<input type="range" min="0" max="10" step="1" name="happiness" />
Ecstatic
62
Form Control Elements
Specialized Controls (colour)
63
<label>Date: <br/>
<input type="date" ... />
<label>Date: <br/>
<input type="date" ... />
65
66
Table and Form Accessibility
Accessible Form
67
Microformats
68
Microformats
Microformat
information
(hCard)
Microformat
information
(hNews)
Server harvesting
microformat
information
Website aggregating all
the hNews information
from different websites
Report aggregating all
the hCard information
from different websites
69
Microformats
References
70