CIS195 Web Authoring 1: HTML
HTML Forms, Part 2
| Topics by Week for the Eight-Week Term | |
|---|---|
| 1. Intro to HTML | 5. Layout with CSS |
| 2. More HTML, file paths | 6. HTML Tables |
| 3. Site structure and navigation | 7. HTML Forms |
| 4. Formatting with CSS, Midterm | 8. Multimedia, Final |
| Topics by Week for the Ten-Week Term | |
|---|---|
| 1. Intro to HTML | 6. Layout with CSS |
| 2. More HTML, file paths | 7. CSS Flexbox and Grid |
| 3. Site structure and navigation | 8. HTML Forms |
| 4. Formatting with CSS | 9. Multimedia |
| 5. Midterm, Project Propposal | 10. Tables, Project Completion |
| 11. Final | |
Contents
IntroductionMore Control ElementsSelection ListsSelection of multiple itemsOption groups for selection lists Option Buttons Access KeysInput ValidationValidation using HTML5 input typesValidation using the required attributeValidation using regular expressionsRegex references
Introduction
Announcements
Review due dates
Answer questions about the lab assignment or anything else
More Control Elements
Selection Lists
Selection lists present the user with a set of options from which they may select one (or more?). Selection lists are often displayed by the browser as a drop-down list or a scrollable list.
xxxxxxxxxx<label for="trail">Hiking Trails</label><select name="hike" id="trail" size="3"> <option value="pisgah">Mt. Pisgah Summit</option> <option value="spencer">Spencer Butte</option> <option value="fall">Fall Creek</option> <option value="alsea">Alsea Falls</option></select>The size attribute determines how many options are shown without scrolling the list.
If you set size="1", the control will give you a drop-down selection list when you click on it.
Selection of multiple items
By default, only one selection is allowed. Setting the attribute
multiple="multiple"allows the shift or control keys to be used when selecting multiple items.Shift: lets you select items in a continuous range.
Control: lets you select multiple single items.
Option groups for selection lists
Option Groups allow a developer to organize the options into labeled groups:
xxxxxxxxxx<select name="hike" id="trail" size="4"> <optgroup label="Near Eugene"> <option value="pisgah">Mt. Pisgah Summit</option> <option value="spencer">Spencer Butte</option> </optgroup> <optgroup label="Further Out"> <option value="fall">Fall Creek</option> <option value="alsea">Alsea Falls</option> </optgroup></select>Practice: Select element on W3Schools
Reference: Select element on MDN
Option Buttons
Also known as radio buttons
The checked attribute specifies the default selection
xxxxxxxxxx<input type="radio" name="difficulty" value="easy" checked>Easy<br><input type="radio" name="difficulty" value="intermediate">Moderately challenging<br/><input type="radio" name="difficulty" value="challenging">Very challenging<br />Radio buttons can be grouped by the name attribute.
Selection of buttons with the same name will be mutually exclusive.
xxxxxxxxxx<input type="radio" name="length" value="short">Short trail<br><input type="radio" name="length" value="long">Long trail<br><input type="radio" name="steepness" value="flat">Level trail<br>`<input type="radio" name="steepness"value="intermediate">Steep trail<br>Radio button practice on W3Schools
Access Keys
The accesskey attribute specifies a keyboard shortcut for moving the focus to a particular element.
xxxxxxxxxx<input type="radio" name="length" value="short" accesskey="s">Short trail<br><input type="radio" name="length" value="long" accesskey="l">Long trail<br> To use the access key in Chrome, Edge or Safari, hold down the alt key while pressing the shortcut key. In Firefox, hold down the alt and shift keys while pressing the access key.
Access Key Practice on W3Schools
Input Validation
We can improve the way our form works and give our users a better experience, if we let them know when they have entered information that isn't valid for a particular form field. There are several ways we can do this using HTML. (There are even more ways to do this with JavaScript running on our web page or with other code running on a server.)
Validation using HTML5 input types
These <input> types are all essentially variants of the "text" type, but they limit the range of characters that the user is allowed to enter and/or change the appearance of the control to match the input type.
date—In addition to the input box, this will pops up a date picker in the web browser.email—Only allows text in the format of a valid email address to be entered.number—In addition to the input box, this will pop up a number pad in the web browser.password—Hides the text that is entered.range—A range of valid values can be specified.
Code example:
xxxxxxxxxx<input type="email" name="name" placeholder="person@example.com"> Running in the browser:
Validation using the required attribute
Use the required attribute to ensure that the user enters something in a field.
Code example:
xxxxxxxxxx<input type="tel" name="telephone" required>Running in the browser:
Validation using regular expressions
The pattern attribute allows us to use a special pattern-matching string called a regular expression, also called a regex.
Code example:
xxxxxxxxxx<input name="zip" placeholder="97405-1234" pattern="^\d{5}(-\d{4})?$">Running in the browser:
Here is the meaning of the symbols in the pattern attribute:
| Meaning of Regular Expression Symbols | |
|---|---|
^ | Start of the string. |
\ | denotes that the charter following it is not a literal character and should be interpreted as special |
\d{5} | Match 5 digits |
(?:…) | Grouping |
[-\s] | Match a space or a hyphen |
\d{4} | Match 4 digits |
? | The pattern before it is optional |
$ | End of the string |
Regex references
Web Authoring Lecture Notes by Brian Bird 2018, revised , are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.