html tables and formspeople.uncw.edu/mferner/cit410/slides/fwd/ch05.pdf · 2018. 1. 23. · forms...
TRANSCRIPT
![Page 1: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/1.jpg)
Fundamentals of Web Development - 2nd Ed.Randy Connolly and Ricardo Hoar
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar© 2017 Pearson
http://www.funwebdev.com
HTML Tables and Forms
Chapter 5
![Page 2: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/2.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
HTML Tables
A table in HTML is created using the <table> element
Tables can be used to display:
• Many types of content
• Calendars, financial data, lists, etc…
• Any type of data
• Images
• Text
• Links
• Other tables
A grid of cells
![Page 3: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/3.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
HTML TablesExample usages
![Page 4: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/4.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Table Basics
• an HTML <table> contains any number of rows (<tr>)
• each row contains any number of table data cells (<td>)
• Content goes inside of <td></td> tags
<table><tr>
<td>The Death of Marat</td></tr>
</table>
Rows and cells
content
![Page 5: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/5.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
A Simple Example
![Page 6: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/6.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
With Table Headings
th
![Page 7: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/7.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Why Table Headings
A table heading <th>
• Browsers tend to make the content within a <th> element bold
• <th> element for accessibility (it helps those using screen readers)
• Provides semantic information about the row being a row of headers
![Page 8: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/8.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Spanning Rows and Columns
Each row must have the same number of <td> or <th> containers. If you want a given cell to cover several columns or rows, use the colspan or rowspan attributes
![Page 9: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/9.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Using Tables for LayoutIt works in many situations
• Popular in 1990s
• Results in table bloat
• Not semantic
• Larger HTML pages
• Longer load time
![Page 10: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/10.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Web AccessibilityNot all web users are able to view the content on web pages in the same manner.
The term web accessibility refers to the assistive technologies, various features of HTML that work with those technologies, and different coding and design practices that can make a site more usable for people with visual, mobility, auditory, and cognitive disabilities.
In order to improve the accessibility of websites, the W3C created the Web Accessibility Initiative (WAI)
• Web Content Accessibility Guidelines
![Page 11: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/11.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Web Content Accessibility Guidelines
• Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols, or simpler language.
• Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
• Make all functionality available from a keyboard.
• Provide ways to help users navigate, find content, and determine where they are.
![Page 12: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/12.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Accessible Tables
1. Describe the table’s content using the <caption> element
2. Connect the cells with a textual description in the header using the scope="col" attribute
![Page 13: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/13.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Accessible Tables
More about the scope="col" attribute:
From the text:
It is quite revealing to listen to reader software recite the contents of a table that has not made these connections. It sounds like this: “row 3, cell 4: 45.56; row 3, cell 5: Canada; row 3, cell 6: 25,000; etc.”
However, if these connections have been made, it sounds instead like this: “row 3, Average: 45.56; row 3, Country: Canada; row 3, City Count: 25,000; etc.,” which is a significant improvement.
![Page 14: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/14.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Additional table tags
• <caption>
• <col>,<colgroup>
• <thead>
• <tfoot>
• <tbody>
![Page 15: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/15.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Styling Tables
In HTML5 it is left to CSS. However legacy support for deprecated HTML attributes still exist
width, height—for setting the width and height of cells
cellspacing—for adding space between every cell in the table
cellpadding—for adding space between the content of the cell and its border
bgcolor—for changing the background color of any table element
background—for adding a background image to any table element
align—for indicating the alignment of a table in relation to the surrounding container
The old ways deprecated
![Page 16: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/16.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Styling TablesBorders
![Page 17: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/17.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Styling TablesPadding and spacing
![Page 18: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/18.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Styling TablesExamples
![Page 19: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/19.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Styling TablesExamples
![Page 20: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/20.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Nth-ChildNifty Table styling tricks: hover effect and zebra-stripes
![Page 21: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/21.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
HTML Forms
Forms provide the user with an alternative way to interact with a web server.
• Forms provide rich mechanisms like:
• Text input : Search functionality
• Password input
• Options Lists
• Radio and check boxes
Richer way to interact with server
![Page 22: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/22.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Static Vs DynamicStatic page
Forms make pages dynamic
Dynamic pageForms make pages dynamic
![Page 23: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/23.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Overview of Forms Forms are used all over the Web to:
– Accept information– Provide interactivity
Types of forms:– Search form, Order form, Newsletter sign-up
form, Survey form, Add to Cart form, Login form, and so on…
23
![Page 24: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/24.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Form Elements
<input> <textarea> <button> <select>
<option>
<optgroup>
<fieldset>
<label>
The <form> element can contain one or more of the following sub-elements:
![Page 25: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/25.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Form Controls: <input> The input element of a form allows various
kinds of data to be accepted from the user. Include one of the following type attributes:
25
• text• password• hidden
• radio• checkbox• submit • reset
![Page 26: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/26.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
type="text"
First name:<input type="text"><br>Last name:<input type="text"><br>
The type= "text" attribute creates a 20-character box for user input.
How the HTML code above looks in a browser:
![Page 27: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/27.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
type="password"
Password:< input type="password"> This attribute creates a standard text box but with bullets instead of characters as the user types.How the HTML code above looks in a browser:
Note: this does not encrypt the password; it simply provides a shield for anyone looking at the user’s screen.
![Page 28: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/28.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
The Name Attribute
First name:< input type="text" name="firstname"><br>Last name:< input type="text" name="lastname"><br>
Creates variables, firstname and lastname which hold the values of the strings entered into each text box.
![Page 29: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/29.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Radio Buttons
Radio buttons are useful when you want the user to select a single item from a small list of choices and you want all the choices to be visible
• radio buttons are added via the <input type="radio"> element
• The buttons are mutually exclusive (i.e., only one can be chosen) by sharing the same name attribute
• The optional checked attribute is used to indicate the default choice
• the value attribute works in the same manner as with the <option> element.
![Page 30: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/30.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Radio Buttons Radio buttons let a user select ONLY ONE of a limited
number of choices:< input type="radio" name="gender" value="m"> Male<br>< input type="radio" name="gender" value="f"> Female<br>
How the HTML code above looks in a browser:
Note: The name attributes are the same. Why?
![Page 31: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/31.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Radio Buttons
**Note: because only 1 value is returned, the name attributes should all be the same.
![Page 32: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/32.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Checkboxes
Checkboxes are used for getting yes/no or on/off responses from the user.
• checkboxes are added via the <input type="checkbox”> element
• You can also group checkboxes together by having them share the same name attribute
• Each checked checkbox will have its value sent to the server
• Like with radio buttons, the checked attribute can be used to set the default value of a checkbox
![Page 33: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/33.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Checkboxes Checkboxes let a user select ZERO or MORE options
of a limited number of choices.< input type="checkbox" name="bike">
I have a bike<br>< input type="checkbox" name="car">
I have a car <br>
Note: The name attributes are different. Why?
![Page 34: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/34.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Selection Selection, or drop-down, lists typically allow the
user to select one value from a list of options.<select name="cars">
<option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option>
</select>
![Page 35: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/35.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Which Value to send
The value attribute of the <option> element is used to specify what value will be sent back to the server.
The value attribute is optional; if it is not specified, then the text within the container is sent instead
Select Lists Cont.
![Page 36: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/36.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Text Areas The HTML for a text area with default text:Comments:<br><textarea name="comments" placeholder="If you have any comments, please enter them here."></textarea>
Note: This input will require special handling. More to come about that later…
![Page 37: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/37.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
type= "submit" The submit button is used to send form data somewhere for
processing. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
Username: <input type="text" name="user"><input type="submit" value="Submit">
How the HTML code above looks in a browser:The value attribute specifies the text to display on the button
![Page 38: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/38.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
type= "reset"
<input type= "reset" value= "Reset">
38
The value attribute specifies the text to display on the button
![Page 39: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/39.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Accessible Forms
Recall the <fieldset>, <legend>, and <label> elements.
Each <label> element should be associated with a single input element.
![Page 40: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/40.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Accessible Forms
Recall the <fieldset>, <legend>, and <label> elements.
Each <label> element can also be associated with a single input element by wrapping it around the element (but watch for nesting rules).
<p>Client Type:
<label> <input type="radio" name="type" value="School">School</label>
<label><input type="radio" name="type" value="College">College</label>
<label><input type="radio" name="type" value="University">University</label>
</p>
![Page 41: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/41.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Accessibility guideline Use labels to associate text with form input controls
so the user can click on the label text to select the control that the label is associated with. This also helps assistive devices.
![Page 42: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/42.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Label element<label></label>
Associates a text label with a form controlTwo Different Formats:
<label><input type="radio" name= "crust" value= "hand"> Hand
Tossed </label>
Or
<label for="email" >Email: </label><input type="text" name="CustEmail" id= "email">
42
![Page 43: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/43.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Fieldset and Legend Elements The Fieldset Element
– Container tag– Creates a visual group of
form elements on a web page
The Legend Element– Container tag– Creates a text label within
the fieldset
43
<fieldset><legend>Customer Information</legend><label>Name:
<input type="text" name=“name" id="Name"></label> <br><br><label>Email:
<input type="text" name="Email" id="Email"></label></fieldset>
![Page 44: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/44.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
How forms interact with servers
![Page 45: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/45.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Attributes of the <form>element:
– name: identifier for the form
– action: URL of the file that will process the data
– method: HTTP method for submitting the data; “get” or “post”
– [target]: where to open the pages specified in the action attribute; _blank opens in a new window or tab.
![Page 46: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/46.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
GET vs POST Get: form data is sent as part of URL
– the data is visible and can be bookmarkedThe URL when the form is submitted with the get method:subscribe.php?email=zak%40modulemedia.com&submit=SubscribeThe data is after the ? and is called the query string
Post: form data is packaged as part of an HTTP request and isn’t visible by the browser– more secure– resulting page can’t be bookmarked
In either case: the same data is transmitted: ?email=zak%40modulemedia.com&submit=Subscribe
![Page 47: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/47.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
GET vs POST
![Page 48: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/48.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Query Strings
![Page 49: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/49.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
URL encodingSpecial symbols
• URLs, including and query strings:• must use only characters from the ASCII character set• may not contain spaces
• Spaces are replaced with either + or %20• Other values not in the ASCII character set are URL-encoded
according to the character set for the page• The default character set for HTML5 is UTF-8
![Page 50: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/50.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
GET vs POSTAdvantages and Disadvantages
GET Data can be clearly seen in the address bar. Data remains in browser history and cache. Data can be bookmarked Limit on the number of characters in the form
data returned.POST Data can contain binary data. Data is hidden from user. Submitted data is not stored in cache, history,
or bookmarks.
![Page 51: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/51.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Putting It All Together One form element containing the
desired controls:
![Page 52: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/52.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Button Controls
Type Description<input type="submit"> Creates a button that submits the form data to the server. May
have a value = " " attribute to control the text that displays on the button.
<input type="reset"> Creates a button that clears any of the user’s already entered form data. May have a value = " " attribute to control the text that displays on the button.
<input type="button"> Creates a custom button. This button may require Javascript for it to actually perform any action.
<input type="image"> Creates a custom submit button that uses an image for its display.
<button> Creates a custom button. The <button> element differs from <input type="button"> in that you can completely customize what appears in the button; using it, you can, for instance, include both images and text, or skip server-side processing entirely by using hyperlinks.
You can turn the button into a submit button by using the type="submit" attribute.
Preferred
![Page 53: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/53.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Button Controls
![Page 54: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/54.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Specialized Controls<input type="hidden">
Use the hidden type attribute for sending string values along with other data that the user doesn’t see or input – a product ID for example:
<input type="hidden" name="productid" value="C1003">
<input type="file">
![Page 55: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/55.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Number and Range
Typically input values need to be validated. Although server side validation is required, optional client side pre-validation is good practice.
The number and range controls Added in HTML5 provide a way to input numeric values that eliminates the need for JavaScript numeric validation!!!
![Page 56: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/56.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Number and Range
![Page 57: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/57.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Color
![Page 58: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/58.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Date and Time Controls
Dates and times often need validation when gathering this information from a regular text input control.
From a user’s perspective, entering dates can be tricky as well: you probably have wondered at some point in time when entering a date into a web form, what format to enter it in, whether the day comes before the month, whether the month should be entered as an abbreviation or a number, and so on.
It's always a good idea to let the user know what format you expect.
![Page 59: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/59.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
HTML5 Date and Time Controls
![Page 60: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/60.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
HTML5 Date and Time Controls
![Page 61: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/61.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
HTML ControlsType Descriptiondate Creates a general date input control. The format for the date
is "yyyy-mm-dd".
time Creates a time input control. The format for the time is "HH:MM:SS", for hours:minutes:seconds.
datetime Creates a control in which the user can enter a date and time.
datetime-local
Creates a control in which the user can enter a date and time without specifying a time zone.
month Creates a control in which the user can enter a month in a year. The format is "yyyy-mm".
week Creates a control in which the user can specify a week in a year. The format is "yyyy-W##".
![Page 62: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/62.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
HTML5 HTML 5 will support several new input types such as: Color, date, email, etc. Check the following site for
browser compatibilities: http://www.w3schools.com/html/html_form_input_types.asp
![Page 63: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/63.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Formatting Aligned label, text box, and button controls
![Page 64: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/64.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
The HTML for the form<label for="firstname">First name:</label><input type="text" name="firstname" id="firstname" autofocus><br>
<label for="lastname">Last name:</label><input type="text" name="lastname" id="lastname"><br>
<label for="address">Address:</label><input type="text" name="address" id="address"><br>
<label for="city">City:</label><input type="text" name="city" id="city"><br>
<label for="state">State:</label><input type="text" name="state" id="state"><br>
<label for="zip">Zip code:</label><input type="text" name="zip" id="zip"><br>
<input type="submit" name="register" id="button" value="Register"><input type="reset" name="reset" id="reset" value="Reset">
![Page 65: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/65.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
The CSS for the controlslabel {
float: left;width: 5em;text-align: right;}
input {margin-left: 1em;margin-bottom: .5em;}
#button {margin-left: 7em;}
![Page 66: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/66.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
MicroformatsA microformat is a small pattern of HTML markup and attributes to represent common blocks of information such as people, events, and news stories so that the information in them can be extracted and indexed by software agents
hCard – markup contact information
hNews – richly formatted, standardized markup:
![Page 67: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/67.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
Microformat
![Page 68: HTML Tables and Formspeople.uncw.edu/mferner/CIT410/Slides/FWD/Ch05.pdf · 2018. 1. 23. · Forms are used all over the Web to: – Accept information – Provide interactivity Types](https://reader036.vdocuments.site/reader036/viewer/2022071601/613d4396984e1626b6577a40/html5/thumbnails/68.jpg)
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar
What you’ve learnedIntroducing Tables Styling Tables
Introducing Forms Form Control Details
Table and Form Accessibility
Microformats
1 2
3 4
5 6
7