CIS2336 - CH5: HTML Tables and Forms

What is a query string?

A query string is part of a URL that assigns values to specified parameters. The main purpose of query strings is to receive and send data to the server.

In what situations would you use a radio button? A checkbox?

A radio button is used when you want the user to select a single item from a small list of choices you provide. A checkbox is used when you want to receive a yes/no or on/off response from the user.

What is URL encoding?

URL encoding (percent-encoding) is converting characters into a format that can be transmitted over the internet. URLs can only be sent over the Internet using the ASCII character-set, but most of the time, they contain characters outside the set. -ex: "Hello User" = Hello%20User

What is web accessibility?

Web accessibility refers to the assistive technologies, various features of HTML that work with those technologies, and different coding and design practices that can make a site more usable for people with visual, mobility, auditory, and cognitive disabilities.

What is schemna.org and how does it relate to semantic markup?

Schema.org is a semantic vocabulary of tags (or microdata) that you can add to your HTML to improve the way search engines read and represent your page. Search engines use the information marked up using vocabulary from schema.org to organize additional information and make the information more semantic.

What are some of the main additions to form construction in HTML5?

Some of the main additions to form construction in HTML5 are pattern attribute, placeholder attribute, and <datalist> element.

specialized controls - color

<input type="*color*" name="black" /> -allows the web page to get color data from the user

specialized controls - file upload

<input type="*file*" name="photo" /> -used to upload a file from the client to the server

HTML form elements

<button> <datalist> <fieldset> <form> <input> <label> <legend> <option> <optgroup> <select> <textarea> <output>

table accessibility

-Use tables for data, not layout -Use the <caption> element -Connect cells with a textual description in the header

query strings

-a series of name=value pairs separated by the *&* character -browser packages user data input into this

microformat

-a small pattern of HTML markup and attributes to represent common blocks of information such as people, events, and news stories so that the information in them can be extracted and indexed by software agents

<datalist> element

-allows you to define a list of elements that can appear in a drop-down autocomplete style list for a text element

pattern attribute

-allows you to specify a regular expression pattern that the user input must match -*pattern*="[a-z][0-9][a-z] [0-9][a-z][0-9]"

schema.org

-an increasingly popular semantic vocabulary used in microformats -aims to create and promote schemas for structured data on the Web and is supported by Google, Microsoft, and Yahoo -search engines use the information marked up using vocabulary from schema.org to provide additional structured information -https://search.google.com/structured-data/testing-tool/u/0/

GET

-browser locates the user's form input in the subsequent HTTP request -data can be clearly seen in the address bar. This may be an advantage during development but a disadvantage in production -data remains in browser history and cache. Again, this may be beneficial to some users, but a security risk on public computers -data can be bookmarked (adv and disadv) -limit on the number of characters in the form data returned

date and time controls

-date -time -datetime -datetime-local -month -week

specialized controls - number and range controls

-number: <input type="*number*" min="1" max="5" name="rate" /> -range: <input type="*range*" min="0" max="10" step="1" name="happiness" /> -both provide a way to input numeric values that eliminate the need for client-side numeric validation

form accessibility

-provide keyboard alternatives and text alternatives -use <fieldset>, <legend>, and <label> elements

forms

-provide the user with an alternative way to interact with a web server

placeholder attribute

-provides guidance to the user about the expected format of the input -*placeholder*="L#L #L#"

button controls

-submit -reset -button -image

text input controls

-text -textarea -password -search -email -tel -url *<input type="..." ... />*

POST

-the form data is located in the HTTP header after the HTTP variables -data can contain binary data -data is hidden from user -submitted data is not stored in cache, history, or bookmarks

checkbox

-used for getting yes/no or on/off responses from the user -<input type="*checkbox*" name="..." ..>

hCard

-used semantically mark up contact information for a person -http://microformats.org/wiki/hcard

choice controls <select>

-used to create a multiline box for selecting one or more items -*<select name="choices"> ... </select>*

radio buttons

-useful when you want the user to select a single item from a small list of choices and you want all the choices to be visible -<input type="*radio*" name="..." ...>

choice controls <select> using value attribute

-value attribute of <option> element is used to specify what value will be sent back to the server in the query string when that option is selected -optional, but it not specified, then the text within the container is sent instead

What are the two different ways of passing information via the URL?

1. GET 2. POST

how forms work

1. request 2. browser returns HTML document that contains a form 3. use fills in form and submits the form 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

What are microformats? What is their purpose?

Microformats are a way convey metadata, extra information about your content, to make it easier for others to understand and reuse. They are a set of standards for marking up different types of information that provides a way to consistently structure that information. The purpose of microformats is to it easier to share and reuse information across different applications and websites.

What is the difference between HTTP GET and POST? What are the advantages/disadvantages of each?

HTTP GET has the form data encoded by a browser into a URL. HTTP POST has the form data appear within a message body. The adv and disadv of GET: -data can be clearly seen in the address bar. This may be an advantage during development but a disadvantage in production -data remains in browser history and cache. Again, this may be beneficial to some users, but a security risk on public computers -data can be bookmarked (adv and disadv) -limit on the number of characters in the form data returned The adv and disadv of POST: -data can contain binary data -data is hidden from user -submitted data is not stored in cache, history, or bookmarks

What is the purpose of the action attribute?

The purpose of the action attribute is to specify the URL of a form processor (like PHP script) -ex: <form *action*="/action_page.php">