=====
CS 328 - Week 4 Lecture 1 - 2026-02-09
=====
=====
TODAY WE WILL:
=====
* announcements
* CLIENT TIER - a few more HTML form widgets
* prep for next class
=====
* should be starting Homework 3!
* deadline for at-least-1st-attempts: 11:59 pm Friday, Feb. 13
* all files are submitted on nrs-projects using
~st10/328submit
* BUT! Problem's 1's "second database" files are
submitted with a homework number of *** 33 ***
and Problems 2-onward use a homework number of *** 3 ***
* (it is very reasonable to have .sql files in a
directory that is not under public_html,
so remember to run ~st10/328submit from each
directory that has files to submit)
* if you haven't finished them yet,
should still be reading/working through Chapters 1 and 2
of the course zyBooks
* we'll start our coverage of PL/SQL on Wednesday
* there is not a zyBooks chapter for this;
* I will be posting some resources to supplement the
in-class examples
=====
strict-style HTML debugging tip:
=====
* click the source/show source checkbox in the class
strict-style validators to have it show a LINE-NUMBERED
version of the source along with its comments
* easier to jump to the line-number mentioned in a message,
and scan PREVIOUS lines looking for what actually
caused the message;
* ALSO lets you verify that you are validating the version
you think you are (that you saved the latest change, or that
you copied the latest change to an .xhtml copy)
=====
a FEW of the many optional attributes for
input element with type="text"
=====
* size - approximately how wide this textbox should display
* CSS CAN change this!
* does not affect how MUCH the user can attempt to enter!
* maxlength - the maximum number of characters one can
type in this textfield
* this DOES affect how much the user can attempt to enter!
* required - ONLY include if a user MUST enter something
into this element -- then, following strict-style, you'd put:
required="required"
....for this so-called binary attribute
* in 328lect04-1.html-so-far, for form version including:
<input type="text" name="hum_name" id="username"
size="10" maxlength="7" required="required" />
when I entered st10 into this textfield and clicked its
form's submit button, here was the resulting URL:
https://nrs-projects.humboldt.edu/~st10/?hum_name=st10
* pattern - value is a (JavaScript-style) regular expression;
input values must match this pattern for the form to
be submitted
* MDN reference page for this attribute:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/pattern
* from the above link:
"The pattern attribute, when specified, is a regular
expression which the input's value must match for the value to
pass constraint validation. It must be a valid JavaScript
regular expression, as used by the RegExp type, and as
documented in our guide on regular expressions."
* so: its syntax is indeed JavaScript's regular expression syntax
* JUST as an example:
[a-z]+[0-9]+
...SHOULD match any set of characters
that starts one or more lowercase letters
followed by one or more digits
* in 328lect04-1.html-so-far, for form version including:
<input type="text" name="hum_name" id="username"
size="10" maxlength="7" required="required"
pattern="[a-z]+[0-9]+" />
the browser would NOT submit the form until I entered
something matching this pattern into this textfield --
for example, would not accept these:
st
10
st10moo
10st
but, when I entered st10 into this textfield and clicked its
form's submit button, here again was the resulting URL:
https://nrs-projects.humboldt.edu/~st10/?hum_name=st10
=====
radio button - input element with type="radio"
=====
* a set of logically-related elements where
selecting one UN-SELECTS any previous selection
* traditionally displayed as a circle that is
"filled in" for the selection
* good for choose-exactly-one (and you don't have TOO many options)
* (why better if not too many options?
Because need room on the form for the radio
button and its label for EACH option)
* EACH of a set of logically-related radio buttons
MUST have the same value for their name attribute
* (that is what MAKES them logically-related --
that is how you specify that selecting it should
UN-select any other with the same name attribute value)
* each of that set SHOULD have a different *value*
attribute -- that's the value that will be
sent in the name=value pair when its form is submitted
* good style: in each logical set of radio buttons, specify a
default radio button to be INITIALLY selected by giving it the
attribute checked="checked"
* then the user can't accidentally submit a form
with NONE of the radio buttons in a logical set
selected!
* (and once a user selects any, they cannot go back
to none selected, so it is frustrating design to
use radio buttons if a choice of NONE of the options
is supposed to be possible...)
* ideally, this default/initial radio button selected
would be a common choice that users make
* good style: have a logically-connected label
for each radio button
* in 328lect04-1.html-so-far, for form version including:
<fieldset>
<legend> PL/SQL subroutines </legend>
<p>
<input type="radio" name="plsql_sub" id="procedure"
value="proc" />
<label for="procedure"> Procedure </label>
</p>
<p>
<input type="radio" name="plsql_sub" id="function"
value="funct" checked="checked" />
<label for="function"> Function </label>
</p>
<p>
<input type="radio" name="plsql_sub" id="trigger"
value="trig" />
<label for="trigger"> Trigger </label>
</p>
</fieldset>
when I:
* entered st10 into the previously-described textfield,
* clicked the radio button logically-related to the label
with content Procedure, and
* clicked the form's submit button,
here was the resulting URL:
https://nrs-projects.humboldt.edu/~st10/?hum_name=st10&plsql_sub=proc
=====
checkbox - input element with type="checkbox"
=====
* lets a user check, or uncheck, an option
* traditionally displayed as a small square that is empty
if that option has not been selected, and that has
a check-mark within it if that option has been selected
* good for when a user can choose 0 or more
from a set of options - each can be selected or
un-selected independently of all the others
* should have a name attribute!
* name attribute's value will be the name in the name=value sent
IF this checkbox is selected when the form is submitted
* so, NOTE: when a form is submitted,
NO name=value pair is sent for an un-selected
checkbox!
* what will the value be for a selected checkbox's name=value pair?
* IF there is NO value attribute for that checkbox, it will be
the value on:
anchovies=on
* IF there IS a value attribute, it will be that value attribute's
value
* if you include binary attribute
check="checked", that checkbox will be
initially checked
* good style: as a form designer, use your power for good, not evil!
...don't try to TRICK the user into checking a checkbox
by initially checking it, unless you honestly think that
will benefit//be convenient for the user
* good style: use a label element to logically associate a label
with each checkbox
* in 328lect04-1.html-so-far, for form version including:
<fieldset>
<legend> PL/SQL Optional Parts </legend>
<p>
<input type="checkbox" name="param" id="parameter" />
<label for="parameter"> Parameters </label>
</p>
<p>
<input type="checkbox" name="loc_dcl" id="local_decl"
checked="checked" />
<label for="local_decl"> Declaration Block </label> \
</p>
<p>
<input type="checkbox" name="exc" id="exception" />
<label for="exception"> Exception Block </label>
</p>
</fieldset>
when I:
* entered st10 into the previously-described textfield,
* clicked the radio button logically-related to the label
with content Function,
* selected the checkbox logically-related to the label
with content Parameters,
* UNselected the checkbox logically-related to the label
with content Declaration Block,
* selected the checkbox logically-related to the label
with content Exception Block, and
* clicked the form's submit button,
here was the resulting URL:
https://nrs-projects.humboldt.edu/~st10/?hum_name=st10&plsql_sub=funct¶m=on&exc=on
when I:
* entered st10 into the previously-described textfield,
* clicked the radio button logically-related to the label
with content Function,
* UNselected the checkbox logically-related to the label
with content Parameters,
* UNselected the checkbox logically-related to the label
with content Declaration Block,
* UNselected the checkbox logically-related to the label
with content Exception Block, and
* clicked the form's submit button,
here was the resulting URL:
https://nrs-projects.humboldt.edu/~st10/?hum_name=st10&plsql_sub=funct
when I:
* entered st10 into the previously-described textfield,
* clicked the radio button logically-related to the label
with content Function,
* selected the checkbox logically-related to the label
with content Parameters,
* selected the checkbox logically-related to the label
with content Declaration Block,
* selected the checkbox logically-related to the label
with content Exception Block, and
* clicked the form's submit button,
here was the resulting URL:
https://nrs-projects.humboldt.edu/~st10/?hum_name=st10&plsql_sub=funct¶m=on&loc_dcl=on&exc=on
=====
password field - input element with type="password"
=====
* looks like a single-line textfield,
but user's input is masked when they type into it
(appears on-screen as dots or asterisks)
* NOTE that if the form's method="get",
this field's entry WILL be after the action URL in
plaintext!!
* NOTE that if the action's URL is http (not https),
the password is in plaintext and sniffable on the
network even if method="post"!!
* good style: have a logically-connected label
for each password field
* in 328lect04-1.html-so-far, for form version including:
<p>
<label for="secret"> Secret word: (10 chars max) </label>
<input type="password" name="secret_word" id="secret"
maxlength="10" />
</p>
when I:
* entered dt5 into the previously-described textfield,
* left the initially-selected radio button logically-related
to the label with content Function selected,
* left the initially-selected checkbox logically-related
to the label with content Declaration Block selected,
(and did nothing to the other checkboxes),
* typed moo into the password field logically-related
to the label with content Secret word: (10 chars max), and
* clicked the form's submit button,
here was the resulting URL:
https://nrs-projects.humboldt.edu/~st10/?hum_name=dt5&plsql_sub=funct&loc_dcl=on&secret_word=moo
=====
* See MORE form widgets in zyBooks Chapter 2,
and we'll be trying out those discussed today and more from
Chapter 2 on upcoming lab exercises and homeworks.
=====
=====
* Wednesday: we'll start our in-class discussion of PL/SQL!
=====
=====
NOTES about examples of TWO more HTML widget elements
added AFTER CLASS (with demos added to 328lect04-1.html
AFTER CLASS)
=====
=====
textarea element
=====
* an inline element
* it CAN have content
* should have a name attribute
* The value of its name attribute will be the name for
the name=value pair sent for this textarea when its
form is submitted.
* optional rows attribute
* specifies how many rows are displayed (height!)
* optional cols attribute
* specifies roughly how many "characters" are displayed (width!)
* note that this is approximate, especially if the display font
is not monospaced (where, for example, a W is wider than an i !)
* good style: have a logically-connected label
for each textarea element
* if a textarea element happens to include content, that content
will be the initial text showing within the textarea element
when the form is displayed.
* Fun fact: if there are blanks or newline in this content,
it WILL be included within the textarea when the form is
displayed!
* Using a placeholder attribute along with empty content
can be convenient, but note that:
1. A placeholder attribute's value may not be read by
screen reader software, so do not use this in place
of a logically-associated label.
2. This placeholder attribute's value will not be sent
as the value for the textarea if the user has not entered
anything in this textarea when the form is submitted.
3. If the textarea element has ANY content --
even a single blank! --
that content OVERRIDES the placeholder attribute
and you WON'T see the placeholder attribute's value
in your displayed textarea!!!!!
SO: when you have a placeholder attribute, put the
textarea's end tag RIGHT after its start tag!!
* Whatever (non-placeholder) content is appearing within
the textarea when the form is submitted will become the
value for the name=value pair sent for this textarea.
And, if there are blanks or newline in this content, it
will be converted to URL-friendly character
equivalents and included in the value submitted!
=====
select element - drop-down box
=====
* an inline element
* it CAN have content
* This can work better than radio buttons when user
is selecting EXACTLY ONE from a larger set of
specific options.
* By default, it is select-just-one, and selecting another
unselects the previous selection.
* (Can use attribute multiple="multiple" to allow user
to allow multiple values at a time, BUT,
as pointed out in the course zyBook Chapter 2:
"Many users are unaware of how to choose multiple options from
[a select element with attribute multiple="multiple"],
so a good practice is to use checkboxes instead.")
* BASIC syntax:
<select name="desired-name">
<option value="whatever1"> shows in drop-down </option>
<option value="whatever2"> shows in drop-down </option>
<option value="whatever3" selected="selected"> shows initially
</option>
</select>
* by default, displays just one option at a time --
optional size attribute can be used to specify if you'd like
more options to be displayed at a time
* select element should have a name attribute!
* name attribute's value will be the name in the name=value sent
when its form is submitted
* Note that an option element's content is what the user will
see in the displayed drop-down box
* good style: within a select element, each option element
should have a value element
* then, when its form is submitted, the value of the selected
option element's value attribute will be sent as the value
in this select element's name=value pair
* Use attribute selected="selected" for the SINGLE option element
whose content you'd like to be INITIALLY selected/showing when
the form is created.
* good style: have a logically-connected label
for each select element