More HTML Forms, Part 2

More Control Elements and Validation

Course weeks and topics
1. Intro to HTML 5	6. Page Layout with CSS
2. First Web Page	7. HTML Tables
3. Developing a Web Site	8. HTML Forms
4. Design with CSS	9. Multimedia
5. Midterm	10.Term Project

More HTML Forms, Part 2ContentsIntroductionMore 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="hike">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">Long trail accesskey="l<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
email
number
password
tel
Note: tel does not do much validation, but on most browsers, it will pop up a numeric keypad.
and more

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

ASP.NET Core MVC Lecture Notes by Brian Bird is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.