0% found this document useful (0 votes)
20 views12 pages

Topic02b HTML

Forms allow users to enter, select, and interact with different types of data through various input and button elements. The document discusses the structure and functionality of forms, including how data is submitted and processed, and different form control elements like text fields, checkboxes, radio buttons, and file uploads.

Uploaded by

Gourav Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
20 views12 pages

Topic02b HTML

Forms allow users to enter, select, and interact with different types of data through various input and button elements. The document discusses the structure and functionality of forms, including how data is submitted and processed, and different form control elements like text fields, checkboxes, radio buttons, and file uploads.

Uploaded by

Gourav Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Forms

47

Introducing Forms
Form Structure

<form method="post" action="process.php">


<fieldset>
<legend>Details</legend>
<p>
<label>Title: </label>
<input type="text" name="title" />
</p>
<p>
<label>Country: </label>
<select name="where">
<option>Choose a country</option>
<option>Canada</option>
<option>Finland</option>
<option>United States</option>
</select>
</p>
<input type="submit" />
</fieldset>
</form>

48
Introducing Forms
How Forms Work

3 User fills in form and


submits the form

2 Browser returns HTML


document that
contains a form
1 Request

W erv
eb e
s

r
4 Request

The user’s form data


is sent to the server
within the request. 5 This request is usually for
some type of server-side
script that will process
the form data.
49

Introducing Forms
Query Strings

<input type="text" name="title" />

title=Central+Park&where=United+States

<select name="where">

50
Introducing Forms
GET and POST

<form method="get" action="process.php">

GET /process.php?title=Central+Park&where=United+States http/1.1

query string

<form method="post" action="process.php">

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 HTTP Header

title=Central+Park&where=United+States

query string 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

<input type="text" ... placeholder="L#L #L#" pattern="[a-z][0-9][a-z] [0-9][a-z][0-9]" />

<input type="text" name="city" list="cities" />

<datalist id="cities">
<option>Calcutta</option>
<option>Calgary</option>
<option>London</option>
<option>Los Angeles</option>
<option>Paris</option>
<option>Prague</option>
</datalist>

55

Form Control Elements


Choice Controls ( <select>)

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

Form Control Elements


Button Controls (radio)

<input type="radio" name="where" value="1">North America<br/>


<input type="radio" name="where" value="2" checked>South America<br/>
<input type="radio" name="where" value="3">Asia

58
Form Control Elements
Button Controls (checkbox)

<label>I accept the software license</label>


<input type="checkbox" name="accept" >

<label>Where would you like to visit? </label><br/>


<input type="checkbox" name="visit" value="canada">Canada<br/>
<input type="checkbox" name="visit" value="france">France<br/>
<input type="checkbox" name="visit" value="germany">Germany

?accept=on&visit=canada&visit=germany

59

Form Control Elements


Button Controls (checkbox)

<input type="submit" />

<input type="reset" />

<input type="button" value="Click Me" />

<input type="image" src="appointment.png" />

<button>
<a href="email.html">
<img src="images/email.png" alt="..."/>
Email
</a>
</button>

<button type="submit" >


<img src="images/edit.png" alt="..."/>
Edit
</button>

60
Form Control Elements
Specialized Controls (file upload)

<form method="post" enctype="multipart/form-data" ... >


...
<label>Upload a travel photo</label>
<input type="file" name="photo" />
...
</form>

61

Form Control Elements


Specialized Controls (number and range controls)

<label>Rate this photo: <br/>


<input type="number" min="1" max="5" name="rate" />

Grumpy
<input type="range" min="0" max="10" step="1" name="happiness" />
Ecstatic

Controls as they appear in browser


that doesn’t support these input types

62
Form Control Elements
Specialized Controls (colour)

<label>Background Color: <br/>


<input type="color" name="back" />

Control as it appears in browser that


doesn’t support this input type

63

Form Control Elements


Date and Time Controls

<label>Date: <br/>
<input type="date" ... />

<input type="time" ... />

<input type="datetime" ... />

<input type="datetime-local" ... />

<input type="month" ... />


64
Form Control Elements
Date and Time Controls

<label>Date: <br/>
<input type="date" ... />

<input type="time" ... />

<input type="datetime" ... />

<input type="datetime-local" ... />

<input type="month" ... />

<input type="week" ... />

65

Table and Form Accessibility


Accessible Tables

• Use tables for data, not layout


• Use the <caption> element
• Connect cells with a textual description
in the header
<caption>Famous
Paintings</caption>
<tr>
<th scope="col">Title</th>
<th scope="col">Artist</th>
<th scope="col">Year</th>
<th scope="col">Width</th>
<th scope="col">Height</th>
</tr>

66
Table and Form Accessibility
Accessible Form

<label for="f-title">Title: </label>

<input type="text" name="title" id="f-title"/>

<label for="f-country">Country: </label>

<select name="where" id="f-country">


<option>Choose a country</option>
<option>Canada</option>
<option>Finland</option>
<option>United States</option>
</select>

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

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy