Chapter 8 Creating Tables and Forms Learning by

Chapter 8: Creating Tables and Forms [Learning by Doing] Jason C. H. Chen, Ph. D. Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 chen@gonzaga. edu Dr. Chen, Management Information Systems - HTML

Chapter Objectives • • • Define table elements Describe the steps used to plan, design, and code a table Create a table with rows and data Insert a table caption Style a table for tablet and desktop viewports Describe form controls and their uses Use the form and input elements Create text input controls, labels, and check boxes Create a selection menu with multiple options Use the textarea element Create a Submit button Create a Reset button Dr. Chen, Management Information Systems - HTML 2

Handouts to students Part I. A. - Table • html 08(class_styles)-Part 1 • html 08(class_styles)-Part 2 Part I. B - Form • html 08(contact_styles)-Part 1 • html 08(contact_styles)-Part 2 Dr. Chen, Management Information Systems - HTML 3

Assumption • Assumed that you have completed html 07 (exercise). Your task for html 08 is to further enhance the fitness web page by adding new features. To achieve this exciting assignment, read the instructions listed in the HTML text on pp. 376 -414 along with this handout as the order of lines (tags) to be added is significant. For exercise http: //barney. gonzaga. edu/~chenta/html 07/exercise/fitness 07. html http: //barney. gonzaga. edu/~chenta/html 07/exercise/fitness 07. htm Dr. Chen, Management Information Systems - HTML 4

Tasks Part I. exercise: Focus on the following two hmtl and one css files: A. Table: class. html (first assignment) – with features of table, caption, th, tr and td B. Form: contact. html (second assignment) – with new features of form, label, input, textarea C. CSS file: styles 08. css Part II. hw (not reqjired) • Table: volunteer. html • Form: contact. html Dr. Chen, Management Information Systems - HTML 5

Type the following URLs For exercise http: //barney. gonzaga. edu/~chenta/html 08/exercise/fitness 08. html Responsive Design Try to visit the site on your PC and smartfphone and find what is the major difference between these two devices. For hw http: //barney. gonzaga. edu/~chenta/html 08/hw/foodbank 08. html Dr. Chen, Management Information Systems - HTML 6

Mobile and Desktop Viewports (Table) div element Dr. Chen, Management Information Systems - HTML 7

About us home Class Nutrition Contact Us two web pages to be updated Dr. Chen, Management Information Systems - HTML

Creating Webpage Forms (next assignment) Figure 8 -2 Dr. Chen, Management Information Systems - HTML

New Tasks for html 08 (for exercise) Exercise: • 1. fitness 08. html (for home), about. html and nutrition. html are the same as html 07 (so we reuse them) • 2. Create a new page of class. html with the following features – table, caption, tr, td, th • 3. New features added to contact. html: – form, label, input, textarea Dr. Chen, Management Information Systems - HTML 10

Exploring Responsive Design – from html 05 • Responsive design (definition) – Responsive design is a website development strategy that strives to provide an optimal user experience of a website regardless of the device or browser used – The content in responsive design is easy to read and navigate on devices of three sizes: 1) desktop browser, 2) tablet, and 3) smartphone Dr. Chen, Management Information Systems - HTML 11

Exploring Responsive Design (continued 1) - html 05 • Responsive design (purpose) – By applying responsive design principles, the webpage and content respond to the screen size of the user’s device to minimize unnecessary scrolling and zooming, making reading and interacting with the site as convenient and intuitive as possible. Dr. Chen, Management Information Systems - HTML 12

Exploring Responsive Design (continued 2) - html 05 • The three concepts of responsive design are: 1. Fluid layout: – Applies proportional size measurements to the webpage wireframe and content – The viewport is the viewing area for the webpage <! in fitness 08. html --> <head> <link rel="stylesheet" href="css/styles 08. css"> <title>Forward Fitness Club</title> <meta charset="utf-8"> <meta name="viewport" content="width=devicewidth, initial-scale=1"> </head Dr. Chen, Management Information Systems - HTML 13

Exploring Responsive Design (continued 3) - html 05 2. Media queries – Allow the webpage developer to detect the approximate pixel size of the current viewport – Allow the developer to selectively apply CSS rules that work best for that viewport size /* in style 08. css file */ /* Media query for tablet layout targets screen size with a minimum width of 660 px. */ @media only screen and (min-width: 660 px) { … } /* Media query for desktop layout targets screens with a minimum width of 830 px. */ @media only screen and (min-width: 830 px) { … } Dr. Chen, Management Information Systems - HTML 14

Exploring Responsive Design (continued 4) - html 05 3. Flexible images – They shrink and grow based on the size of the viewport – They do not have height and width attributes or values in the HTML document – They use CSS rules to resize the image relative to the wireframe and viewport <header> <a href="fitness 08. html"><img src="images/ffc_logo. png" alt="Forward Fitness Club logo"></a> </header> /* Style to create a fluid image in styles. css*/ img { max-width: 100% } Dr. Chen, Management Information Systems - HTML 15

Discovering Tables • Tables – Compare data or outline a detailed topic in a compact format – Consist of rows, columns, and cells • Row – It is a horizontal line of information • Column – It is a vertical line of information Dr. Chen, Management Information Systems - HTML 16

Discovering Tables (continued 1) • Cell – It is the intersection of a row and a column and usually contains data – The two types of cell are: a heading cell or a data cell ØA heading cell displays text as bold and centeraligned ØA data cell displays normal, left-aligned text and contains information appropriate for the column and row Dr. Chen, Management Information Systems - HTML 17

Discovering Tables (continued 2) • Figure 8– 4 shows examples of the three elements: rows, columns, and cells Dr. Chen, Management Information Systems - HTML 18

A(n) _____ displays text as bold and center-aligned. a. b. c. d. data element marked text indexing element heading cell d ANSWER: _______ Dr. Chen, Management Information Systems - HTML

Graphical Tables Defining a Table Structure • The first step to creating a table is to specify the table structure: – the number of rows and columns – the location of column headings – the placement of a table caption • Once the table structure is in place, you can start entering data into the table Dr. Chen, Management Information Systems - HTML 20

Using the <table>, <tr>, and <td> Tags • Graphical tables are enclosed within a twosided <table> tag that identifies the start and ending of the table structure • Each row of the table is indicated using a two-sided <tr> (for table row) • Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells Dr. Chen, Management Information Systems - HTML 21

HTML Structure and Syntax of a Table The general syntax of a graphical table is: beginning of the table structure Q: how many rows/columns will be produced? table cells 3 Rows, 4 Columns first row of three in the table second row of three in the table third row of three in the table end of the table structure Dr. Chen, Management Information Systems - HTML You do not need to indent the <td> tags or place them on separate lines, but you may find it easier to interpret your code if you do so. After the table structure is in place, you’re ready to add the text for each cell. 22

A Simple Table and HTML Structure of a Table: filename: demo_table_1. html demo_table_1 The layout of a graphical table two rows beginning of the table structure first row of two in the table Second row of two in the table end of the table structure two columns <table> <tr> <td>First Cell</td> <td>Second Cell</td> </tr> <td>Third Cell</td> <td>Fourth Cell</td> table cells </tr> </table> http: //barney. gonzaga. edu/~chenta/html 08/class_demo_table/demo_table_1. html Dr. Chen, Management Information Systems - HTML 23

Creating a Table with HTML Elements • Table 8– 1 lists the HTML elements used to create a table Dr. Chen, Management Information Systems - HTML 24

Table Borders, Headers, and Captions • Table border – It is the line that defines the perimeter of the table • Table header (<th>) – It is a heading cell and identifies the row or column content – It is defined with a starting <th> tag and an ending </th> tag – Text formatted with the <th> tag is centered within the cell and displayed in a boldface font – The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text Dr. Chen, Management Information Systems - HTML 25

Table Borders, Headers, and Captions (continued 1) • Table caption – It is a descriptive text that serves as a title or identifies the table’s purpose – It is defined with a starting <caption> tag and an ending </caption> tag – It is inserted after the starting <table> tag – A table can have only one caption • Tables can include headers and captions individually or in combination Dr. Chen, Management Information Systems - HTML 26

Table Borders, Headers, and Captions (continued 2) • Figure 8– 6 shows a table created with the following code, which includes a table caption and table headers <table> first row of <caption>College Course four in the Recommendations by Semester</caption> table <tr> <th>Semester 1</th> <th>Semester 2</th> <th>Semester 3</th> <th>Semester 4</th> </tr> (continue on the next slide) Dr. Chen, Management Information Systems - HTML 27

Table Borders, Headers, and Captions (continued 3) Second row of four in the table <tr> <td>English I</td> <td>English II</td> <td>Spanish II</td> </tr> Third row of <tr> four in the <td>College Algebra</td> table <td>College Geometry</td> <td>Calculus</td> <td>Trigonometry</td> </tr> (continue on the next slide) Dr. Chen, Management Information Systems - HTML 28

Table Borders, Headers, and Captions (continued 4) Fourth row of four in the table <tr> <td>Physical Science</td> <td>Biology</td> <td>Humanities</td> <td>World History</td> </tr> </table> Dr. Chen, Management Information Systems - HTML 29

Identify an HTML element that indicates the start and end of a table caption. a. b. c. d. <table_caption> … </table_caption> <tc> … </tc> <tcaption> … </tcaption> <caption> … </caption> d ANSWER: ______ Dr. Chen, Management Information Systems - HTML

Compare the Results on the Following two Examples http: //barney. gonzaga. edu/~chenta/html 08/class_demo_table/demo_table_figure 85. html http: //barney. gonzaga. edu/~chenta/html 08/class_demo_table/demo_table_figure 8 -5. html http: //barney. gonzaga. edu/~chenta/html 08/class_demo_table/demo_table_figure 86. html http: //barney. gonzaga. edu/~chenta/html 08/class_demo_table/demo_table_figure 8 -6. html What are the major differences? However, the property of border should be placed in css file <table border="1"> <caption> College Course Recommendations by Semester</caption> Figure 8 -5 Dr. Chen, Management Information Systems - HTML Figure 8 -6 31

Identify a correct format to insert the table header element "Days. “ a. b. c. d. <thead>Days</thead> <th>Days</th> <theader>Days</theader> <thead_element>Days</th_element> b ANSWER: _______ Dr. Chen, Management Information Systems - HTML

In the context of styling table elements, which of the following formats is used to specify the background-color property for a table header? a. b. c. d. table, th, td { background-color: #F 5 F 5 F 0; } table {background-color: #F 5 F 5 F 0; } th { background-color: #F 5 F 5 F 0; } theader { background-color: #F 5 F 5 F 0; } c ANSWER: ____ Dr. Chen, Management Information Systems - HTML

Complete all steps on pp. 383 -389 (Figs 8 -8 to 19) Add ‘Table’ to class. html Figure 8 -32 Dr. Chen, Management Information Systems - HTML

Styling Table Elements (continued) • Separated border – When a border is applied to table elements, by default, each cell has its own border, making the table appear to use double lines between each table data cell • Collapsed border – Use the border-collapse property with a value of collapse to display a table with single, consolidated borders Dr. Chen, Management Information Systems - HTML 35

Styling Table Elements Dr. Chen, Management Information Systems - HTML 36

table { border-collapse: collapse; } (so that adjacent cells share borders) Dr. Chen, Management Information Systems - HTML

To Style a Table for a Desktop Viewport (continued 3) Dr. Chen, Management Information Systems - HTML 38

To Style a Table for a Tablet Viewport (continued 3) Redefine the table Dr. Chen, Management Information Systems - HTML 39

HANDOUTS • Explain tables and style sheets using the followings (and try both mobile and desktop devices): • html 08(class_styles)-Part 1. docx • html 08(class_styles)-Part 2. docx Dr. Chen, Management Information Systems - HTML 40

To Style a Table for a Desktop Viewport /* for class. html, but, defined in styles 08. css */ /* Style for table element (Redefine) */ table { background-color: #FFFFFF; /* White */ width: 85%; } /* Style for caption element */ caption { color: #FFFFFF; /* White */ } Figure 8 -30, 8 -31 Dr. Chen, Management Information Systems - HTML 41

/* changed/added to Style for th element */ using: th { background-color: darkblue; class-revised. html color: #FFFFFF; } /* White */ /* new one added it only affects td */ styles-revised. css td { background-color: aqua; color: darkgreen; text-align: right; /* default is left */ } /* Style for caption element */ caption { background-color: lime; /* new to add */ color: #FFFFFF; /* White */} Dr. Chen, Management Information Systems - HTML and

styles-revised. css (run class-revised. html) Dr. Chen, Management Information Systems - HTML

Identify a style rule that should be used to set the height of a table data cell to 2 em. a. b. c. d. <d/> { height: 2 em; } tdata { <height/>: 2 em; } <td> { height: 2 em; }<td/> b ANSWER: ____ Dr. Chen, Management Information Systems - HTML

<!DOCTYPE html> <!-- file name: demo_table_thead_tbody_tfoot. hmtl --> <html lang="en"> <head> <tbody> <style> <tr> thead {color: green; } <td>January</td> tbody {color: blue; } <td>$100</td> tfoot {color: red; } </tr> table, th, td { border: 1 px solid black; } <tr> </style> <td>February</td> </head> <td>$80</td> <body> </tr> <table> </tbody> <thead> </table> <tr> <p><b>Tip: </b> The thead, tbody, and tfoot <th>Month</th> elements will not affect the layout of the table by <th>Savings</th> default. However, you can use CSS to style these </tr> elements. </p> </thead> <tfoot> </body> <tr> <td>Sum</td> </html> <td>$180</td> </tr> </tfoot> Dr. Chen, Management Information Systems - HTML

YOUR TURN … Dr. Chen, Management Information Systems - HTML 46

public_html [web folder] index. html css [folder] myself. pptx myresume. docx styles-web 1. css styles-myweb. css images [images folder] book. gif, events. gif gcan. gif, wall. gif mailbox. gif, worm. gif html 08 [folder for HTML#8] hw (new folder) exercise (new folder) images css foodbank 08. html css fitness 08. html images [folder] about. html [folder] contact. html volunteer. html ffc_logo. png nutrition. html equipment 1. jpg styles 08. css logo. jpg fbstyles 08. css class. html equipment 2. jpg hunger. jpg equipment 3. jpg home. Banner. jpg … group. jpg For html 08 Dr. Chen, Management Information Systems - HTML

This week assignment (Table only) 4. Modify the following two *. html files and styles 08. css file as follows (and read the text book): i. for class. html (table): a) edit class. html (note that fitness. html should be class. html as stated at step 1 on p. 383 in the text book) as shown on pp. 383 -389 (Figures 8 -8 to 8 -18 in the text) with features of table, caption, th, tr and td (Fig. 3 -a). b) edit styles 08. css as stated on pp. 391 -395 (Figures 8 -22 to 8 -31 in the text) for styling the table (Fig. 3 -c). ii. for contact. html (form): [next class] iii. Upload the following files d) upload five *. html files to the right folder (i. e. , html/public/html 08/exercise/) d) upload styles 08. css in the right folder (html_public/html 08/exercise/css/) e) upload the thirteen (13) image files to the images folder (html_public/html 08/exercise/images/) Dr. Chen, Management Information Systems - HTML

PART II FORM Dr. Chen, Management Information Systems - HTML 49

Creating Webpage Forms • Forms provide a structured way to collect information from webpage visitors • Visitors complete webpage forms to register for an account or to make a purchase. • Businesses use forms to gather visitor or customer information and store it in a database for future use Dr. Chen, Management Information Systems - HTML 50

Dr. Chen, Management Information Systems - HTML Contacct Us page in Desktop View

Type the following URLs For exercise http: //barney. gonzaga. edu/~chenta/html 08/exercise/fitness 08. html Responsive Design Try to visit the site on your PC and smartfphone and find what is the major difference between these two devices. For hw http: //barney. gonzaga. edu/~chenta/html 08/hw/foodbank 08. html Dr. Chen, Management Information Systems - HTML 52

2. New features added to contact. html: form, label, input, textarea Dr. Chen, Management Information Systems - HTML

Other examples: demo_inline. html demo_block. html demo_inline-block. html Dr. Chen, Management Information Systems - HTML

Form Controls • All form elements are contained with the starting <form> tag and the ending </form> tag • Input control – It is an interactive mechanism for users to enter text or make selections on a form – A label is text describing the type of information to enter with an input control. • Most controls in an HTML form are defined by using the type attribute of the input element Ø The following code creates a label and a text box for a visitor’s first name: <label for="f. Name">First Name: </label> <input type="text" name="f. Name“ id="f. Name"> Dr. Chen, Management Information Systems - HTML 55

A label is text describing the type of information to enter with an input control. Most controls in an HTML form are defined by using the type attribute of the input element Dr. Chen, Management Information Systems - HTML

Identify a code that creates a label and a text box for a visitor’s first name. a. <label/> for="f. Name">First Name <input type="text" name="f. Name" id="f. Name"> b. <label for="f. Name">First Name: </label> <input type="text" name="f. Name" id="f. Name"> c. <label/> for="f. Name">First Name: <id> <input type="text" id="f. Name"> d. <label_id_for="f. Name">First Name: </label_id_for> <input type="text" name="f. Name" id="f. Name"> b ANSWER: _______ Dr. Chen, Management Information Systems - HTML

Form Controls (continued 3) • Each input control has attributes that are used more frequently than the others: – name – It identifies the specific information that is being sent when the form is submitted for processing. All controls have a name – id – It provides a unique ID for the element. Use the id attribute with input controls – value – It specifies the value of an input element and varies depending on input type Dr. Chen, Management Information Systems - HTML 58

Form Controls (continued 4) • Common input controls (types) used with a form include text, password, email, checkbox, select, submit, reset, etc. • Text input controls include the following types: – text box (text control), for small amounts of text – password text box (password control), for entering a password – email text box (email control), for entering an email address Dr. Chen, Management Information Systems - HTML 59

Form Controls (continued 5) – telephone text box (tel control), for entering a telephone number – date text box (date control), for entering a date – text area box (textarea control), for larger amounts of text • These text input controls have two frequently used attributes: – size: – It determines the width of the control in characters – maxlength: It specifies the maximum number of characters accepted Dr. Chen, Management Information Systems - HTML 60

Form Controls (continued 6) – Example: o The first line of the following code creates a 25 character text box for the user’s last name and the second line creates an eight-character text box for the user’s password: <p>Last Name: <input type="text“ name="lastname“ size="25"></p> <p>Password: <input type="password" name="password size="8"></p> Dr. Chen, Management Information Systems - HTML 61

<p>Last Name: <input type="text“ name="lastname" size="25"></p> A label is text describing the type of information to enter with an input control. Most controls in an HTML form are defined by using the type attribute of the input element Dr. Chen, Management Information Systems - HTML

Try to do: (1) Submit and (2) Reset Form and see the results Dr. Chen, Management Information Systems - HTML

Identify a style rule that specifies a block display for label elements. a. b. c. d. <label/> { display: block; } label { <display/>: block; } label { display: block; } <label> { display: block; }</label> c ANSWER: ______ Dr. Chen, Management Information Systems - HTML

Form Controls (continued 7) • Password control – It is a text control as it provides a text box for the password a visitor enters • Email control – It is a text box where visitors enter an email address • Tel control – It is a text box where visitors enter a telephone number • Date control – It is a text box that accepts a date Dr. Chen, Management Information Systems - HTML 65

Form Controls (continued 2) Dr. Chen, Management Information Systems - HTML 66 66

checkbox Dr. Chen, Management Information Systems - HTML 67

Form Controls (continued 8) • Checkbox control – It allows a webpage visitor to select items from a more choices list of one or _____ – The following code is an example for two checkbox controls that might appear on a form for a grocery store website Dr. Chen, Management Information Systems - HTML 68

Other examples: demo_inline. html demo_block. html demo_inline-block. html /* in styles 08. css; Style rule for chkbx class */. chkbx { display: inline-block; } /*inline or inline-block work the same */ • inline: default value. Displays an element as an inline element (like <span>) • block: Displays an element as a block element (like <p>) • inline-block: Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box Dr. Chen, Management Information Systems - HTML

<!DOCTYPE html> <body> <form action="action_page. php"> <input type="checkbox" name="vehicle 1" value="Bike">I have a bike <input type="checkbox" name="vehicle 2" value="Car">I have a car <input type="submit"> </form> </body> </html> http: //www. w 3 schools. com/html/tryit. asp? filename=tryhtml_input_checkbox Dr. Chen, Management Information Systems - HTML

Form Controls (continued 9) • Radio control only one – It limits the webpage visitor to _____ choice from a list of choices – Each choice has a radio button, or option button, which appears as an open circle – By default, all radio buttons are deselected – To set a particular button as the default, use the checked attribute and value within the <input> tag Dr. Chen, Management Information Systems - HTML 71

Form Controls (continued 10) – The following is sample code to create two radio controls that might appear in a rental car website form: <input name="car" type="radio" checked="checked" value="car">Car <input name="truck" type="radio" value="truck">Truck – A visitor can choose to rent a car or a truck, with the Car radio button already selected when the form opens Dr. Chen, Management Information Systems - HTML 72

A _____ limits the webpage visitor to only one choice from a list of choices. a. b. c. d. select control radio control checkbox control textarea control b ANSWER: ____ Dr. Chen, Management Information Systems - HTML

<!DOCTYPE html> <body> <form action="action_page. php"> <input type="radio" name="auto" value="car" checked>Car <input type="radio" name="auto" value="truck">Truck <input type="submit"> </form> </body> </html> Submit Query is the default if “value” is not provided. See demo_radio_button. html (with form ‘action’) and demo_radio_button 2. html http: //www. w 3 schools. com/html/tryit. asp? filename=tryhtml_input_radio (next slide) http: //www. w 3 schools. com/html/tryit. asp? filename=tryhtml_input_radio Dr. Chen, Management Information Systems - HTML

<!DOCTYPE html> <! file name: demo_radio_button_gender. html --> <html> <body> <form action="action_page. php"> <input type="radio" name="sex" value="male" checked>Male <input type="radio" name="sex" value="female">Female <input type="radio" name="gender" value="other">Other <input type="submit"> </form> </body> </html> See demo_radio_button_gender. html http: //www. w 3 schools. com/html/tryit. asp? filename=tryhtml_input_radio Dr. Chen, Management Information Systems - HTML

Select and textarea Dr. Chen, Management Information Systems - HTML 76

Form Controls (continued 11) • Define other controls using separate elements, such as the textarea and select elements • The two input controls are: – Data input control – It is used to make a selection or perform a command (e. g. , Referral Source) – Text input control – It accepts text, such as names, dates, and passwords, and is called an input field (e. g. , Questions? ) Dr. Chen, Management Information Systems - HTML 77

Form Controls (continued 12) • Select control – It creates a selection menu from which the visitor more choices and is suitable makes one or ______ when a limited number of choices are available – It appears on a form as a text box with a list arrow – The following is sample code for a select control: <select name="station"> <option>Pandora</option> <option>Internet Radio</option> <option>Live 365</option> <option>Jango</option> </select> Dr. Chen, Management Information Systems - HTML 78

Form Controls (continued 13) • Textarea control – It creates a text box that allows multiple lines of input – To create a textarea control, use the textarea element instead of the input element – It has two primary attributes, which set the size of the textarea control: o rows, which specifies the number of rows, or lines, in the textarea control o cols, which sets the width of the textarea control as the number of columns, with each column containing one character Dr. Chen, Management Information Systems - HTML 79

Form Controls (continued 14) o. The following is an example of HTML code defining a textarea control: <label>What products would you like to see us offer? </label> <textarea name="feedback" rows="3" cols="100"></textarea> Dr. Chen, Management Information Systems - HTML 80

/* in styles 08. css; Style rule for btn class */. btn { margin-left: 12 em; } Dr. Chen, Management Information Systems - HTML

Form Controls (continued 15) • Submit button – It sends the form information to the appropriate location for processing – When it is clicked on the form, the name of each control and the value of its data are sent to the server to be processed – The submit control is created with the following code: <input type="submit“ value="Submit"> Dr. Chen, Management Information Systems - HTML 82

Form Controls (continued 16) • Reset button – Clears any input entered in the form, resetting the input controls to their defaults – A webpage form must include a submit control and a reset control – The value attribute specifies the text that appears on the button – The reset control is created with the following code: <input type="reset" value="Reset"> Dr. Chen, Management Information Systems - HTML 83

Form Processing <!DOCTYPE html> <html> – It is an attribute of the <body> <form> tag that specifies the <form action="action_page. php"> browser’s action when <input type="radio" name="sex" submitting the form value="male" checked>Male • Common Gateway Interface (CGI) script <input type="radio" name="sex" value="female">Female – It communicates with the web server and sends the information on the webpage <input type="submit"> </form> form to the server for </body> processing </html> • action See demo_radio_button_gender. html and demo_radio_button. html http: //www. w 3 schools. com/html/tryit. asp? filename=tryhtml_input_radio Dr. Chen, Management Information Systems - HTML 84

Form Processing (continued 1) • method – It is an attribute of the <form> tag that specifies how to send the data entered in the form to the server to be processed • Get method – It appends the name-value pairs to the URL indicated in the action attribute – Example of a form tag with the get method and specified action is as follows: <form method="GET“ action="form. Info. php"> Dr. Chen, Management Information Systems - HTML 85

<!DOCTYPE html> <! File name: demo_form_method_get. html --> <html> <body> <form action="demo_form_method. asp" method="get" target="_blank"> First name: <input type="text" name="fname"> Last name: <input type="text" name="lname"> <input type="submit" value="Submit"> </form> <p>Click on the submit button, and the input will be sent to a page on the server called "demo_form_method. asp". </p> </body> </html> http: //www. w 3 schools. com/tags/tryit. asp? filename=tryhtml_form_method Dr. Chen, Management Information Systems - HTML

Form Processing (continued 2) • Post method – It sends a separate data file with the name-value pairs to the URL indicated in the action attribute – It is used very commonly because it can be used to send sensitive form data and does not have a size limitation – Example of a form tag with the post method and specified action is as follows: <form method="POST“ action="form. Info. php"> Dr. Chen, Management Information Systems - HTML 87

Two HTTP Request Methods: GET and POST Two commonly used methods for a request-response between a client and server are: GET and POST. • GET - Requests data from a specified resource • POST - Submits data to be processed to a specified resource <form method="get|post"> http: //www. w 3 schools. com/tags/tryit. asp? filename=tryhtml_form_method_post Dr. Chen, Management Information Systems - HTML

HANDOUTS • Explain forms and style sheets using the followings (and try both mobile and desktop devices): • html 08(contact_styles)-Part 1. docx • html 08(contact_styles)-Part 2. docx Dr. Chen, Management Information Systems - HTML 89

Styling Forms • CSS styles are applied to forms to improve the appeal and usefulness of the form and its controls • As with tables, consider forms in the context of responsive design • Controls can be included to collect optional information, such as product feedback, in tablet and desktop viewports Dr. Chen, Management Information Systems - HTML 90

To Style a Form for a Desktop Viewport Figure 8 -58 Dr. Chen, Management Information Systems - HTML 91

/* in contact. html */ /* Style rule form element */ form { background-color: #FFFFFF; /* White */ padding: 1 em; box-shadow: 10 px 5 px aqua; } /* Style rule for paragraph with form element */ form p { color: blue; } Dr. Chen, Management Information Systems - HTML

To Style a Form for a Desktop Viewport (continued) Figure 8 -59 Dr. Chen, Management Information Systems - HTML 93

YOUR TURN … Dr. Chen, Management Information Systems - HTML 94

public_html [web folder] index. html css [folder] myself. pptx myresume. docx styles-web 1. css styles-myweb. css images [images folder] book. gif, events. gif gcan. gif, wall. gif mailbox. gif, worm. gif html 08 [folder for HTML#8] hw (new folder) exercise (new folder) images css foodbank 08. html css fitness 08. html images [folder] about. html [folder] contact. html volunteer. html ffc_logo. png nutrition. html equipment 1. jpg styles 08. css logo. jpg fbstyles 08. css class. html equipment 2. jpg hunger. jpg equipment 3. jpg home. Banner. jpg … group. jpg For html 08 Dr. Chen, Management Information Systems - HTML

This week assignment (Form only) 4. Modify the following two *. html files and styles 08. css file as follows (and read the text book): ii. for contact. html (form): c) edit contact. html by including new features of form, label, input, textarea as shown on pp. 403 -407 (Figures 8 -35 to 8 -48 in the text). (Fig. 3 -b). d) edit styles 08. css as stated on pp. 408 -412 (Figures 8 -50 to 8 -59 in the text) (Fig. 3 -c) iii. Upload the files d) upload two *. html files to the right folder (i. e. , html/public/html 08/exercise/) d) upload styles 08. css in the right folder (html_public/html 08/exercise/css/) e) upload the thirteen (13) image files to the images folder (html_public/html 08/exercise/images/) Dr. Chen, Management Information Systems - HTML

HTML 5 & CSS 3 8 th Edition Chapter 8 Complete Dr. Chen, Management Information Systems - HTML