CS计算机代考程序代写 Forms

Forms
47
Introducing Forms
Form Structure

Details

Title:

Country:
Choose a countryCanadaFinlandUnited States

48

Introducing Forms
How Forms Work
3 User fills in form and submits the form
4 Request
1 Request
2 Browser returns HTML document that contains a form
This request is usually for some type of server-side script that will process the form data.
49
The user’s form data is sent to the server within the request.
5
Introducing Forms
Query Strings


title=Central+Park&where=United+States
50
Web server

Introducing Forms
GET and POST

query string

query string
HTTP Header
GET /process.php?title=Central+Park&where=United+States http/1.1
POST /process.php http/1.1
Date: Sun, 21 May 2017 23:59:59 GMT
Host: www.mysite.com
User-Agent: Mozilla/4.0
Content-Length: 47
title=Central+Park&where=United+States
51
Form Control Elements
52

Form Control Elements
Text Input Controls
53
Form Control Elements
Text Input Controls
54

Form Control Elements
New in HTML5 – pattern and datalist

55
Form Control Elements
Choice Controls ( )
56

Form Control Elements
Choice Controls

using value attribute
FirstSecondThird
FirstSecondThird
?choices=Second
?choices=2
57
Form Control Elements
Button Controls (radio)
North America
South America
Asia
58

Form Control Elements
Button Controls (checkbox)
I accept the software license

Where would you like to visit?
Canada
France
Germany
?accept=on&visit=canada&visit=germany
59
Form Control Elements
Button Controls (checkbox)







Email




Edit

60

Form Control Elements
Specialized Controls (file upload)

…
Upload a travel photo

…

61
Form Control Elements
Specialized Controls (number and range controls)
Rate this photo:

Grumpy

Ecstatic
Controls as they appear in browser that doesn’t support these input types
62

Form Control Elements
Specialized Controls (colour)
Control as it appears in browser that doesn’t support this input type
Background Color:

63
Form Control Elements
Date and Time Controls
Date:





64

Form Control Elements
Date and Time Controls
Date:




65
Table and Form Accessibility
Accessible Tables
• Use tables for data, not layout
• Use the

element
• Connect cells with a textual description in the header

Famous Paintings Title Artist Year Width Height

66

Table and Form Accessibility
Accessible Form
Title:

Country:
Choose a countryCanadaFinlandUnited States
67
Microformats
68

Microformats
Microformat information (hNews)
Microformat information (hCard)
Server harvesting microformat information
Report aggregating all the hCard information from different websites
Website aggregating all the hNews information from different websites
69
Microformats
References
hCard, which is used to semantically mark up contact information for a person
• http://microformats.org/wiki/hcard.
Schema.org aims to create and promote schemas for structured data on the Web. Google’s on-line testing tool helps developers test their semantic markup and microformats
• https://search.google.com/structured- data/testing-tool/u/0/
70