1. CYB 010 HTML Level II CyberAdvantage Seniors
Session I
Chapter 7 - Creating HTML5 Form Inputs

2. Class Outline HTML Forms HTML Form Exercises (4) HTML Form Elements
HTML Form Element Exercises (3)
HTML Input Types
HTML Input Type Exercises (5)
HTML Input Attributes
HTML Input Attribute Exercises (4)
2/25/2014
Copyright © Carl M. Burnett

3. HTML Forms <form> Element <input> Element Text Input
Radio Button Input
Submit Button
Action Attribute
Method Attribute
Name Attribute
<fieldset> Element
2/25/2014
Copyright © Carl M. Burnett

4. Form Element Attributes
Description
name
Name for code
action
URL of processing file
method
Get or Post
target
Where to open page
2/25/2014
Copyright © Carl M. Burnett

5. Input Element Attributes
Description
type
Type of control ie “button”, “text”, “checkbox”
name
Name of Code
disabled
Boolean that disables control
readonly
Boolean that means user can change control value
2/25/2014
Copyright © Carl M. Burnett

6. Input Element - Text Fields
Attributes
Descriptions
type
text, password, or hidden
value
Default value
maxlength
Max Characters
size
Width of the field in characters
autofocus
A boolean attribute to set focus on
placeholder
Puts a default value or hint in the field. Value is removed when user’s cursor enters the control
2/25/2014
Copyright © Carl M. Burnett

7. The HTML for Text Fields
Quantity:<input type="text" name="quantity" value="1"
size="5" readonly><br><br>
Username:<input type="text" name="username"
autofocus><br><br>
Password:<input type="password" name="password"
maxlength="6"
placeholder="Enter your password"><br><br>
Hidden:<input type="hidden" name="productid"
value="widget">
Example
2/25/2014
Copyright © Carl M. Burnett

8. Attributes of Radio Buttons and Check Boxes
Descriptions
type
Radio or checkbox
value
Value Submitted
checked
Boolean
Crust:<br>
<input type="radio" name="crust" value="thin">
Thin Crust<br>
<input type="radio" name="crust" value="deep" checked>
Deep Dish<br>
<input type="radio" name="crust" value="hand">
Hand Tossed<br><br>
Toppings:<br>
<input type="checkbox" name="topping1" value="pepperoni">
Pepperoni<br>
<input type="checkbox" name="topping2" value="mushrooms">
Mushrooms<br>
<input type="checkbox" name="topping3" value="olives">
Olives
Example
2/25/2014
Copyright © Carl M. Burnett

9. HTML that uses fieldset and legend elements
<form name="order" action="order.php" method="post">
<fieldset>
<legend>Crust</legend>
<input type="radio" name="crust" id="crust1"
value="thin">
<label for="crust1">Thin Crust</label><br>
<input type="radio" name="crust" id="crust2"
value="deep">
<label for="crust2">Deep Dish</label><br>
<input type="radio" name="crust" id="crust3"
value="hand">
<label for="crust3">Hand Tossed</label>
</fieldset>
<br>
Example
2/25/2014
Copyright © Carl M. Burnett

10. URL when form submitted with “get” method
HTML for Form
<form name=" _form" action="subscribe.php"
method="post">
<p>Please enter your address to subscribe to
our newsletter.</p>
<p> <input type="text" name=" "></p>
<p><input type="submit" name="submit"
value="Subscribe"></p>
</form>
URL when form submitted with “get” method
subscribe.php? =zak%40modulemedia.com&submit=Subscribe
Example
2/25/2014
Copyright © Carl M. Burnett

11. Session 1 – Form Exercises
2/25/2014
Copyright © Carl M. Burnett

12. HTML Form Elements <select> Element <textarea> Element
<button> Element
HTML5 Form Elements
<datalist> Element
<keygen> Element
<output> Element
2/25/2014
Copyright © Carl M. Burnett

13. Select Element Attributes Optgroup and Option Element
Descriptions
optgroup
Label
Text used to identify group
option
value
Value sent to server
selected
Boolean value
Style:<br>
<select name="style_and_size">
<optgroup label="The New Yorker">
<option value="ny10">10"</option>
<option value="ny12">12"</option>
<option value="ny16">16"</option>
</optgroup>
<optgroup label="The Chicago">
<option value="chi10">10"</option>
<option value="chi12">12"</option>
<option value="chi16">16"</option>
</select>
Example
2/25/2014
Copyright © Carl M. Burnett

14. Textarea Element Attributes
Descriptions
rows
Approximate number of rows
cols
Approximate number of columns
wrap
Text wrap specifications: hard | soft (default)
HTML for Text Area
Comments:<br>
<textarea name="comments" placeholder="If you have any comments, please enter them here.">
</textarea>
CSS for Text Area
textarea {
height: 5em;
width: 25em;
font-family: Arial, Helvetica, sans-serif; }
Example
2/25/2014
Copyright © Carl M. Burnett

15. Buttons and Button Element Attributes
Descriptions
type
Submit, Reset, button, or image
value
Text to display
src
Relative or Absolute URL of image
alt
Alternate Text
height
Pixels or Percent
width
2/25/2014
Copyright © Carl M. Burnett

16. Four buttons that are created by the input element
<input type="button" name="message" value="Alert Me">
<input type="submit" name="checkout" value="Checkout">
<input type="reset" name="resetform" value="Reset">
<input type="image" src="images/submit.jpg"
alt="Submit button" width="114" height="42">
A button that is created by the button element
<button type="submit">
<img src="images/addtocart.png" width="30"
height="23" alt="Add to Cart">Add to Cart
</button>
Example
2/25/2014
Copyright © Carl M. Burnett

17. HTML5 Form Element - <datalist>
<form action="action_page.php">   <input list="browsers">   <datalist id="browsers">     <option value="Internet Explorer">     <option value="Firefox">     <option value="Chrome">     <option value="Opera">     <option value="Safari">   </datalist> </form>
2/25/2014
Copyright © Carl M. Burnett

18. HTML5 Form Element - <keygen>
<form action="action_page.php">   Username: <input type="text" name="user">   Encryption: <keygen name="security">   <input type="submit"> </form>
2/25/2014
Copyright © Carl M. Burnett

19. HTML5 Form Element - <output>
<form action="action_page.asp"   oninput="x.value=parseInt(a.value)+parseInt(b.value)">   0   <input type="range"  id="a" name="a" value="50">     <input type="number" id="b" name="b" value="50">   =   <output name="x" for="a b"></output>   <br><br>   <input type="submit"> </form>
2/25/2014
Copyright © Carl M. Burnett

20. Session 1 – Form Element Exercises
2/25/2014
Copyright © Carl M. Burnett

21. HTML Input Types Input Type: text Input Type: password
Input Type: submit
Input Type: radio
Input Type: checkbox
Input Type: button
HTML5 Input Types
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
2/25/2014
Copyright © Carl M. Burnett

22. The HTML for a color control
<label for="firstcolor">Choose your first background
color:</label>
<input type="color" name="firstcolor" id="firstcolor">
In Opera
Example
2/25/2014
Copyright © Carl M. Burnett

23. Attributes for the date and time controls
Descriptions
min
Minimum value
max
Maximum value
Date and time:  
<input type="datetime" name="datetime"><br><br>
Local date and time:  
<input type="datetime-local"
name="datetimelocal"><br><br>
Month:  
<input type="month" name="month"><br><br>
Week:  
<input type="week" name="week"><br><br>
Time:  
<input type="time" name="time"><br><br>
Date:  
<input type="date" name="date">
In Opera
Example
2/25/2014
Copyright © Carl M. Burnett

24. Attributes for the number and range controls
Descriptions
min
Minimum value
max
Maximum value
step
The increase and decrease by user clicks or up and down arrow keys
<h3>Your information:</h3>
<form name="test_form" action="test.php" method="get">
<label for="investment">Monthly investment: </label>
<input type="number" name="investment"
id="investment" min="100" max="1000"
step="100" value="300"><br><br>
<label for="book">Rate the book from 1 to 5: </label>
<input type="range" name="book" id="book"
min="1" max="5" step="1"><br><br>
<input type="submit" name="submit"
value="Submit Survey">
</form>
Example
2/25/2014
Copyright © Carl M. Burnett

25. The type attribute for email, url, and tel controls
Attributes
Descriptions
A control for receiveing address (Implies Validation)
url
A control for receiving a URL (Implies Validation)
tel
A control for receiving a telephone number (Does not Imply Validation)
<form name=" _form" action="survey.php"
method="post">
<h3>Your information:</h3>
<label for=" ">Your address:</label>
<input type=" " name=" " id=" "
required><br>
<label for="link">Your web site:</label>
<input type="url" name="link" id="link"
list="links"><br>
<label for="phone">Your phone number:</label>
<input type="tel" name="phone" id="phone"
required><br><br>
<input type="submit" name="submit"
value="Submit Survey">
</form>
Example
2/25/2014
Copyright © Carl M. Burnett

26. A search function that uses a search control
<form method="get" action="
<input type="search" name="q" size="30"
maxlength="255">
<input type="hidden" name="domains"
value="
<input type="hidden" name="sitesearch"
<input type="submit" name="search" value="Search">
</form>
Example
2/25/2014
Copyright © Carl M. Burnett

27. Session 1 – Input Type Exercises
2/25/2014
Copyright © Carl M. Burnett

28. HTML Input Attributes value readonly disabled size maxlength 2/25/2014
Copyright © Carl M. Burnett

29. HTML5 Attributes <Input> <form> autocomplete autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
<form>
autocomplete
novalidate
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
2/25/2014
Copyright © Carl M. Burnett

30. The HTML5 attributes for data validation
Descriptions
autocomplete
Set attribute to off – disables auto-completion
required
Boolean attribute – Form submitted empty browser display error message
novalidate
Boolean attribute to tell browser not to validate form
HTML that uses the validation attributes
The CSS3 pseudo-classes for validation
Name: <input type="text" name="name" required><br>
Address: <input type="text" name="address"
novalidate><br>
Zip: <input type="text" name="zip" required><br>
Phone: <input type="text" name="phone"
required autocomplete="off"><br>
<input type="submit" name="submit" value="Submit Survey">
:valid
:invalid
input[required]
Example
Selector for controls with required attribute
:required
2/25/2014
Copyright © Carl M. Burnett

31. Additional Form Controls
fileupload
tabindex
accesskey
regular expressions
progress
meter
2/25/2014
Copyright © Carl M. Burnett

32. Attributes of the input element for a file upload control
Descriptions
accept
The types of files accepted for upload.
multiple
Boolean attribute to upload more than one file.
HTML for a file upload control
<form name="upload_form" action="send .php"
method="post" enctype="multipart/form-data">
Attach an image:<br>
<input type="file" name="fileupload"
accept="image/jpeg, image/gif">
</form>
Example
2/25/2014
Copyright © Carl M. Burnett

33. The attributes for tab order and access keys
Descriptions
tabindex
Sets the tab order of the control
accesskey
Keyboard and control key
Accessibility guideline - Setting a proper tab order and providing access keys improves the accessibility for users who can’t use a mouse.
The HTML for the controls
Another way to define the access keys
<label for="firstname"><u>F</u>irst name:</label>
<input type="text" name="firstname" id="firstname"
accesskey="F"><br>
<label for="lastname"><u>L</u>ast name:</label>
<input type="text" name="lastname" id="lastname"
accesskey="L"><br>
<label for=" "><u>E</u>mail:</label>
<input type="text" name=" " id=" " accesskey="E
<label for="firstname"
accesskey="F"><u>F</u>irst name:</label>
<input type="text" name="firstname" id="firstname"><br>
<label for="lastname"
accesskey="L"><u>L</u>ast name:</label>
<input type="text" name="lastname" id="lastname"><br>
<label for=" " accesskey="E"><u>E</u>mail:</label>
<input type="text" name=" " id=" ">
Example
2/25/2014
Copyright © Carl M. Burnett

34. Attributes for using regular expressions
Descriptions
pattern
Specifies regular expression to valid entry
title
Test that is displayed in tooltip
Patterns for common entries
Used For
Pattern
Password (6+ alphanumeric)
[a-zA-Z0-9]{6,}
Zip code (99999 or )
\d{5}([\-]\d{4})?
Phone number ( )
\d{3}[\-]\d{3}[\-]\d{4}
Date (MM/DD/YYYY)
[01]?\d\/[0-3]\d\/\d{4}
URL (starting with or
https?://.+
Credit card ( )
^\d{4}-\d{4}-\d{4}-\d{4}$
2/25/2014
Copyright © Carl M. Burnett

35. HTML that uses regular expressions
Name: <input type="text" name="name"
required autofocus><br>
Zip: <input type="text" name="zip" required
pattern="\d{5}([\-]\d{4})?"
title="Must be or "><br>
Phone: <input type="text" name="phone" required
pattern="\d{3}[\-]\d{3}[\-]\d{4}"
title="Must be "><br>
<input type="submit" name="submit" value="Submit Survey">
Example
2/25/2014
Copyright © Carl M. Burnett

36. Attributes for the progress and meter elements
Descriptions
high
High point
low
Low point
min
Lowest limit
max
Maximum limit
optimum
Optimum value
value
Current value
<body onLoad="setProgressAndMeter()">
<h3>Progress Element</h3>
Progress set by JavaScript on page load:
<progress id="progressBar" max="100"
value="0"></progress>
<h3>Meter Element</h3>
Meter set by JavaScript on page load:
<meter id="meterBar" max="100" value="0" optimum="50"
high="60"></meter>
</body>
In Opera
Example
2/25/2014
Copyright © Carl M. Burnett

37. Session 1 – Input Attribute Exercises
2/25/2014
Copyright © Carl M. Burnett

38. Chapter 8 – Using jQuery with HTML5
Class Review
HTML Forms
HTML Form Exercises (4)
HTML Form Elements
HTML Form Element Exercises (3)
HTML Input Types
HTML Input Type Exercises (5)
HTML Input Attributes
HTML Input Attribute Exercises (4)
Next –
Chapter 8 – Using jQuery with HTML5
2/25/2014
Copyright © Carl M. Burnett