html tables and forms - old dominion universitysainswor/uploads/cs418-s13/cs418s... · cs 418 web...
TRANSCRIPT
![Page 1: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/1.jpg)
CS 418 Web Programming
Spring 2013
HTML TABLES AND FORMS
SCOTT G. AINSWORTH
http://www.cs.odu.edu/~sainswor/CS418-S13/
![Page 2: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/2.jpg)
OUTLINE
Assigned Reading • Chapter 4 “Using
Tables to Display Data”
• Chapter 5 “Form Elements: Letting the User Work with Data”
HTML Tables Review HTML Forms Review Chs 4, 5 Code Example Demo/Walkthrough
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
2
![Page 3: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/3.jpg)
HTML TABLES SYNTAX Tables are defined with the <table> tag
Rows are defined with <tr>
Cells are defined with <td>
Headings are defined with <th>
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
3
![Page 4: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/4.jpg)
HTML TABLES SIMPLE EXAMPLE
http://www.cs.odu.edu/~mweigle/cs312/html/table.html
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
4
![Page 5: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/5.jpg)
HTML TABLES CELLS Each item in a table is placed into a cell A cell's width specified by either
• number of pixels • percentage of the table width
If not specified, a cell’s dimension is dynamically determined based on the content in the cell
• all items in the same column are of the same width • the widest item determines the column width • an item is as narrow as it is allowed to be
A cell’s height is determined in the same way as width
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
5
![Page 6: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/6.jpg)
HTML TABLE CELL SIZING When improperly specified, different browsers may treat the table in different ways
• to interpret and display in their respective best possible ways
When either or both of the width and height are specified, resizing the font by user may cause display problems
Unless specified, final cell dimensions are generally based on the data in the entire table
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
6
![Page 7: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/7.jpg)
HTML TABLES FEATURES OF TABLE CELLS Individual colored background
Individual content alignment
Allow better controlled image display in a page • Example: row of pictures with captions in row below
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
7
![Page 8: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/8.jpg)
HTML TABLES EXAMPLE WITH HEADINGS
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
8
![Page 9: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/9.jpg)
HTML TABLES BLANK CELL
Note: Some browsers will display the empty cell differently if it contains rather than nothing (or just spaces).
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table>
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
9
![Page 10: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/10.jpg)
HTML TABLES ATTRIBUTES border
• default is no border (or border = "0")
cellpadding • amount of space between the contents of the cell and the cell wall,
default is 1
cellspacing • defines the space between cells, default is usually 2
width • width of table defined in pixels (width="300") or percentage of the
browser window (width="75%") • if defined in percentage, resizing window resizes the table
Attributes such as this can also be specified via CSS
http://www.cs.odu.edu/~mweigle/cs312/html/table-attr.html
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
10
![Page 11: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/11.jpg)
HTML TABLES MULTIPLE ROWS/COLUMNS colspan
• defines a cell to be a certain number of columns across
rowspan • defines a cell to be a certain number of rows high
Both are defined as attributes of the cell • either in <td> or <th>
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
11
![Page 12: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/12.jpg)
HTML TABLES COLOR, CAPTIONS, AND CELL WIDTH bgcolor
• can be used as attribute for <table> or <td>
caption • specified by <caption> … </caption> tags inside the table • must right after <table> in XHTML • can use align attribute (bottom, top, left, right)
cell width / height • attribute of <td> and <th> • either in pixels or percentage of table width
http://www.cs.odu.edu/~mweigle/cs312/html/table-fancy.html
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
12
![Page 13: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/13.jpg)
NESTED TABLES
<table border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr><tr> <td> <table> <tr> <td>subcell 1</td> <td>subcell 2</td> </tr><tr> <td>subcell 3</td> <td>subcell 4</td> </tr> </table> </td> <td>cell 3</td> </tr></table>
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
13
Tables within tables
Cells can contains most other HTML
![Page 14: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/14.jpg)
TABLES, FLOATS, AND RESPONSIVE DESIGN Modern HTML practice is to use floats instead of tables.
Floats are the “right” way.
Start with tables.
Use floats if you have time.
Likewise with “Responsive Design.” http://alistapart.com/article/responsive-web-design http://en.wikipedia.org/wiki/Responsive_web_design
CS 418/518 - Fall 2012
14
![Page 15: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/15.jpg)
OUTLINE HTML Tables Review HTML Forms Review Chs 4, 5 Code Example Demo/Walkthrough
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
15
![Page 16: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/16.jpg)
HTML FORMS Form elements are elements that allow the user to enter information
• text fields • radio buttons • checkboxes • buttons • drop-down menus • textareas
The definition and layout of a form is HTML, but a server-side script is needed to process the data provided to the forms.
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
16
![Page 17: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/17.jpg)
HTML FORMS Defined with the <form> tag: action attribute is required by XHTML.
User input fields are defined by the <input /> tag • attributes: type (type of input), name (used for referencing)
Text label associated with an input field is defined with the <label> tag
<form action=""> <label> </label> <input /> … <label> </label> <input /> </form>
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
17
![Page 18: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/18.jpg)
HTML FORMS EXAMPLE <form action="maillist.php" method="post"> <h2>Join our mailing list</h2> <label>Name:</label> <input type="text" name="realname" /> <br /> <label>E-mail:</label> <input type="text" name="email" /> <p><input type="submit" value="Submit" /></p></form>
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
18
![Page 19: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/19.jpg)
HTML FORMS FORMS AND ACTIONS The main attribute of a form tag is action
• ex: <form action=“maillist.php"> • action is required by XHTML
• if no action to be taken, then action="" will validate
action tells the browser where to send the data for processing
input type="submit" creates the submit button • when pressed, the data is sent to the action defined
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
19
![Page 20: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/20.jpg)
HTML FORMS FORMS AND METHODS If the method is get
• query string of the arguments is tacked onto the end of the URL (of action attribute)
• name=value • "?" is separator between data-value pairs
• URL is sent to the web server • should only be used when doing a search or requesting data
If the method is post • client sends the query string directly to the server, separately
from the URL • should be used when updating data on the server, for
example, in a database
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
20
![Page 21: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/21.jpg)
FORM PROCESSING WHAT HAPPENS WHEN SUBMIT IS PRESSED? User presses "Submit" button
Browser sends form data to web server • specifically, to server-side script defined in <form action>
Web server launches the server-side script
Server-side script executes, taking the data from the form as input
Server-side script typically will generate a web page using HTML
Server-side script passes the HTML page back to the web server
Web server passes the HTML page back to the browser
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
21
![Page 22: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/22.jpg)
FORM PROCESSING WHAT HAPPENS WHEN SUBMIT IS PRESSED?
Client Server
1. User clicks Submit 2. Form data 3. Apache starts server-side script with form data as input
4. server-side script produces HTML
5. HTML page
6. Browser displays HTML page
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
22
![Page 23: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/23.jpg)
HTML FORMS FORMS AND SERVER-SIDE SCRIPTS For the simple examples, we'll use the HTML Code Tutorial’s script
http://www.htmlcodetutorial.com/cgi-bin/mycgi.pl displays name=value pairs that are sent to it.
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
23
http://www.htmlcodetutorial.com
![Page 24: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/24.jpg)
HTML FORMS FORM INPUT TYPES
Text Submit Button Reset Button Password Radio Button Checkbox
Non-Input Types • select (scrolling or
drop-down list) • textarea
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
24
![Page 25: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/25.jpg)
TEXT TYPE A one-line text entry field Attributes:
• type=“text” • name of this parameter • value (optional) – default input value • size (optional) – field width • maxlength (optional) – limit the number of characters the user
can enter
When form is submitted, the information will be passed as user=Donald+Smith
<input type="text" name="user” value="Donald Smith" size="30" />
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
25
![Page 26: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/26.jpg)
SUBMIT TYPE A submit button
Value indicates the text that will be placed on the button • if nothing given, default is "Submit Query"
Important: When pressed, the form data is submitted to the script specified the form's action attribute
<input type="submit" value="Submit" />
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
26
![Page 27: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/27.jpg)
SUBMIT TYPE MULTIPLE SUBMIT BUTTONS
Can have multiple submit buttons in the same form
We can have multiple submit buttons, e.g., two labeled Send Order and Order Later, respectively. <input type="submit" name="action" value="Send Order" /> <input type="submit" name="action" value="Order Later" />
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
27
![Page 28: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/28.jpg)
SUBMIT TYPE MULTIPLE SUBMIT BUTTONS When multiple submit buttons are used in a single form, they should have the same name but different value
Only one submit button can be clicked • If the user clicked on the button labeled Send Order, then the
corresponding part of the query string will be: action=Send+Order
http://www.cs.odu.edu/~mweigle/cs312/forms/form.html
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
28
![Page 29: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/29.jpg)
RESET TYPE A reset button
Value indicates the text that will be placed on the button • if nothing given, default is "Reset"
When pressed, the all field data and selections in the form are reset back to their original, default values
http://www.cs.odu.edu/~mweigle/cs312/forms/form.html
<input type="reset" value="Clear" />
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
29
![Page 30: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/30.jpg)
HIDDEN FIELD Used to pass some value, not given in any current input fields, to the called procedure.
In the query string, this field and value pair are passed as • to=weigle
But, nothing is shown in the document text or form
http://www.cs.odu.edu/~mweigle/cs312/forms/form.html
<input type="hidden" name="to" value="weigle" />
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
30
![Page 31: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/31.jpg)
PASSWORD TYPE A one-line password entry field
All characters, default or user input, in the password field are shown as asterisks or dots.
When form is submitted, the information will be passed as • passwd=xyzzy • no encryption is performed (plain-text)
http://www.cs.odu.edu/~mweigle/cs312/forms/form.html
<input type="password" name="passwd” value="xyzzy" size="10" />
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
31
![Page 32: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/32.jpg)
RADIO BUTTON TYPE A group of radio buttons
• Similar to checkboxes, but the user can select only one out of a group
http://www.cs.odu.edu/~mweigle/cs312/forms/form.html
<input type="radio" name="size" value="small” checked="checked" />Small <input type="radio" name="size" value="medium" /> Medium <input type="radio" name="size" value="large" />Large
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
32
![Page 33: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/33.jpg)
CHECKBOX TYPE A group of checkboxes
• Used to select multiple items.
http://www.cs.odu.edu/~mweigle/cs312/forms/form.html
<input type="checkbox" name="items" value="engine" />Engine<input type="checkbox" name="items" value="tire” checked="checked" /> Tire <input type="checkbox" name="items" value="seat" /> Seat
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
33
![Page 34: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/34.jpg)
SELECT TAG A drop-down or scrolling list
• drop down - <select name="cars">• scrolling - <select name="favorites" size="4" multiple="multiple">
Each option in the list is surrounded by <option>...</option> tags
• ex: <option>jogging</option>• for default selection, use selected attribute on option tag
• ex: <option selected="selected">swimming</option>
http://www.cs.odu.edu/~mweigle/cs312/forms/form.html
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
34
![Page 35: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/35.jpg)
BUTTON TYPE A push button
Used to implement client-side scripts • e.g., JavaScript • nothing is sent to the server
Example with simple JavaScript
http://www.cs.odu.edu/~mweigle/cs312/forms/form.html
<input type="button" value="Press Me!" />
<input type="button" value="Click!” onclick="javascript:alert(‘Clicked!’);" />,
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
35
![Page 36: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/36.jpg)
TEXTAREA TAG textarea tag, not an input tag
• For defining a large input text area, not just a field of a single line, use textarea tag.
http://www.cs.odu.edu/~mweigle/cs312/forms/form.html
<textarea name="longtext" rows="5" cols="60"></textarea>
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
36
![Page 37: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/37.jpg)
COMMUNICATING WITH SCRIPTS VIA URLS Scripts may or may not require arguments from users.
The arguments are called a query string and may be appended at the end of a URL with the question mark "?" leading it.
If argument has blank space • use "+" or "%20"
If there are two or more name/value pairs • use "&" to delimit
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
37
![Page 38: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/38.jpg)
COMMUNICATING WITH SCRIPTS VIA URLS EXAMPLES
One argument with parameter and value • http://www.google.com/search?q=titanic
Argument value has blank space • http://www.google.com/search?q=john+smith
Two or more parameters, using ‘&’ to link pairs • http://finance.yahoo.com/q/bc?s=AAPL&t=2y
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
38
![Page 39: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/39.jpg)
SERVER-SIDE ACTIONS DETAILS When a web server receives a server-side (CGI) request:
It creates a set of environment variables containing information about
• the server itself • the remote browser • the current request, including QUERY_STRING
It calls the corresponding script with any arguments in the environment variable QUERY_STRING.
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
39
![Page 40: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/40.jpg)
SERVER-SIDE ACTIONS DETAILS The script picks up any information it wants from the environment variables, particularly the arguments from QUERY_STRING
• i.e. the parameters with corresponding values • many programming languages provide tools for easy picking
of parameter values by procedures
The script then executes its own instructions
The output by the script, typically a HTML page, is sent back to the client by the server
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
40
![Page 41: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/41.jpg)
OUTLINE
HTML Tables HTML Forms Chs 4, 5 Code Example Demo/Walkthrough
Up Next: Forms + MySQL Assigned Reading: Ch 6
Project 1 assigned today Status Reports: Feb 14 In-Class Demos: Feb 21
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
41
![Page 42: HTML TABLES AND FORMS - Old Dominion Universitysainswor/uploads/CS418-S13/cs418s... · CS 418 Web Programming Spring 2013 HTML TABLES AND FORMS SCOTT G. AINSWORTH sainswor/CS418-S13](https://reader031.vdocuments.mx/reader031/viewer/2022022500/5aa0d13c7f8b9a8e178e855e/html5/thumbnails/42.jpg)
DEMO/WALKTHROUGH TIME Examples from Chapters 4, 5
Ch 4 • Creating an HTML Table • Populating the HTML Table • Master/Child Relationships • Relationships
Ch 5 • Simple Form • Movie Search Form • Simulate Search/Add Form for Movie, Actor, and Director
https://sainsworth418.cs.odu.edu/~sainswor/textbook/ch04.htm
https://sainsworth418.cs.odu.edu/~sainswor/textbook/ch05.htm
2/7/13 CS 418 Web Programming • Spring 2013 • Ainsworth
42