=====
CS 328 - Week 3 Lecture 2 - 2024-01-31
=====
=====
TODAY WE WILL
=====
* announcements
* HTML tables
* start intro to HTML form element
* prep for next class
=====
TWO quick accessibility notes
=====
* img element - IMPORTANT you include an alt attribute
with appropriate descriptive text, describing the image
for use by text-only applications like screenreaders
and in case of issues grabbing the image
* a element - use link text (anchor element content) that
DESCRIBES what is being linked to
PREFERRED:
<p> Please check the <a href="curr-sched.html">course schedule</a>
before March 15. </p>
AVOID!!!!!!!!!!!!!!!!!:
<p> Please check the course schedule
<a href="curr-sched.html">here</a> before March 15. </p>
=====
quick intro to the table element
=====
* block-level element
* DON'T use for formatting pages or forms!!!!
...use for representing actual tabular data!
* elements you should often have in a table element
* caption element - course style, include this with a description
of the table (helps screenreaders, applications, etc.)
* tr element - table row element!
THAT may contain:
* th - table heading element - a table cell containing a table
heading
* COURSE STYLE: th elements should include an attribute
scope, whose value is "row" or "col", to indicate
if it is a row heading or column heading
^ can help screen readers, etc.
* td - table data element - a table cell containing table data
=====
START intro to HTML forms
=====
=====
thinking about HTTPS/HTTP when HTML forms are involved...
=====
* are using HTTPS/HTTP, HyperText Transfer Protocol [Secure], here;
* the heart of the web!
* Very simple request/response protocol
* Web client sends [encrypted] request message,
web server replies with [encrypted] response message
* STATELESS -- each request/response pair is INDEPENDENT!
* so, consider this with HTML forms involved;
* [summarizing/adapting figure from Shishir Gundavaram,
"CGI Programming on the WWW", O'Reilly]
* user enters a URL for an HTML page on the web
into a browser:
URL
browser/client tier --------> web server/application tier
* the web server on the application tier retrieves that
HTML document including a form, and sends it to the
browser on the client tier, and the browser executes
that HTML, displaying the document and the form:
HTML
browser/client tier <-------- web server/application tier
* say the user fills out the form, and clicks its submit
button; browser packages up the form data and sends it
AS PART of this request:
form data
browser/client tier ---------> web server/application tier
* the web server on the application tier may send this
request-including-form-data to another "thing" on the
application tier to process it --
(e.g., a PHP Preprocessor, or a Java Servlet Engine,
or server-side JavaScript processor, or other
Common Gateway Interface (CGI) application on the
application tier)
* this PHP Preprocessor/Java Servlet Engine/
server-side JavaScript processor/other CGI application
MIGHT make request(s) from the DATA TIER to craft
its response!
THEN it sends its completed RESPONSE to the web server,
to send back to the browser:
response/output
browser/client tier<-------------- web server/application tier
... and the browser executes that response,
displaying the results;
=====
HTML form element
=====
* HTML form element
* is EXPECTED to have an action attribute with the
URL of the thing that's supposed to handle that form
* frequently has a method attribute to specify HOW
the form data is to be sent
method="get" <-- default! if not specified
method="post"
* for method="get", name=value pairs with form data are appended
to the end of the action's URL
* for method="post", name=value pairs with form data are still
sent to the action's URL, but they aren't appended to the URL
* form element contains various form widget elements to allow the
user to enter desired data
* like what kind of form widget elements?
* input element is used for SEVERAL different form widgets!!
* it is a VOID element!
* the type attribute's value determines the variety
of form widget you get
* typically, if an input element has a name attribute,
that attribute's value is the name used in the
name=value pair sent for a submitted form
=====
input element with type="submit": submit button
=====
* for example, an input element with type="submit" is
a submit button, asking that the current form contents
be submitted to the form's action URL using the method
specified or implied
* if you give this a value attribute,
that value attribute's value becomes the submit
button's label
* this often does not have a name attribute, but if it does,
then a name=value pair will be submitted when it is clicked,
using the name attribute's value and the value attribute's
value (or the default submit button label if there is no
value attribute)
=====
input element with type="text": single-row textfield
=====
* and an input element with type="text" is a single-row
textfield -- GIVE it a name attribute!
* and: it does not "include" any descriptive labeling text!
* so: good style to logically associate a label element with it!
* there are TWO ways to do this --
for example, one way: give the label element to be
logically associated a for attribute
whose value is the id attribute of that textfield
vvvvvvvvvvv
<label for="lname"> Last Name: </label>
<input type="text" name="lastName" id="lname" />
^^^^^^^^^^
*** IMPORTANT ***
* when an element has an id attribute, it is expected to
have a value that is UNIQUE in that document -- that is,
NO OTHER element in that document should have an id attribute
with the same value!
^ id attribute is supposed to be a UNIQUE IDENTIFIER --
that's a concept you should be familiar with from CS 325! 8-)
*****************
=====
fieldset element
=====
* a fieldset element can go within a form element
to "gather" logical parts together
* if a fieldset element contains a legend element,
its content will appear as part of the fieldset's
border