Soumettre la recherche
Mettre en ligne
Chapter 9 - Web Design
•
Télécharger en tant que PPT, PDF
•
0 j'aime
•
5,871 vues
T
tclanton4
Suivre
Chapter 9 Presentatioon -- Web Design
Lire moins
Lire la suite
Formation
Technologie
Design
Signaler
Partager
Signaler
Partager
1 sur 51
Télécharger maintenant
Recommandé
Chapter 8 - Web Design
Chapter 8 - Web Design
tclanton4
Chapter9
Chapter9
DeAnna Gossett
Chapter8
Chapter8
DeAnna Gossett
HTML Email
HTML Email
Shawn Calvert
INTRODUCTION FOR HTML
INTRODUCTION FOR HTML
Rahul Bathri
Intodcution to Html
Intodcution to Html
Taha Malampatti
3. tutorial html web desain
3. tutorial html web desain
faizibra
Origins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTML
Howpk
Recommandé
Chapter 8 - Web Design
Chapter 8 - Web Design
tclanton4
Chapter9
Chapter9
DeAnna Gossett
Chapter8
Chapter8
DeAnna Gossett
HTML Email
HTML Email
Shawn Calvert
INTRODUCTION FOR HTML
INTRODUCTION FOR HTML
Rahul Bathri
Intodcution to Html
Intodcution to Html
Taha Malampatti
3. tutorial html web desain
3. tutorial html web desain
faizibra
Origins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTML
Howpk
Html 4.0
Html 4.0
waynet20
Falling in Love with Forms [Web Design Day]
Falling in Love with Forms [Web Design Day]
Aaron Gustafson
Html basics
Html basics
codegracer
HTML - 5 - Introduction
HTML - 5 - Introduction
Aayushi Chhabra
HTML Foundations, pt 2
HTML Foundations, pt 2
Shawn Calvert
Week 2-intro-html
Week 2-intro-html
Shawn Calvert
Html
Html
Bhumika Ratan
Html ppt
Html ppt
Ruchi Kumari
html tutorial
html tutorial
pacatarpit
4. html css-java script-basics
4. html css-java script-basics
Nikita Garg
Practical file on web technology(html)
Practical file on web technology(html)
RAJWANT KAUR
Falling in Love with Forms [F0WD 2015]
Falling in Love with Forms [F0WD 2015]
Aaron Gustafson
Presentation html
Presentation html
Billy Tierra
Cis145 03 configuring-withcss
Cis145 03 configuring-withcss
Nicole77777
Introduction to HTML4
Introduction to HTML4
Collaboration Technologies
Getting Information through HTML Forms
Getting Information through HTML Forms
Mike Crabb
Falling in Love With Forms [An Event Apart DC 2015]
Falling in Love With Forms [An Event Apart DC 2015]
Aaron Gustafson
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
FAKHRUN NISHA
Vskills certified html designer Notes
Vskills certified html designer Notes
Vskills
HTML practical file
HTML practical file
Kuldeep Sharma
Chapter 12 - Web Design
Chapter 12 - Web Design
tclanton4
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Contenu connexe
Tendances
Html 4.0
Html 4.0
waynet20
Falling in Love with Forms [Web Design Day]
Falling in Love with Forms [Web Design Day]
Aaron Gustafson
Html basics
Html basics
codegracer
HTML - 5 - Introduction
HTML - 5 - Introduction
Aayushi Chhabra
HTML Foundations, pt 2
HTML Foundations, pt 2
Shawn Calvert
Week 2-intro-html
Week 2-intro-html
Shawn Calvert
Html
Html
Bhumika Ratan
Html ppt
Html ppt
Ruchi Kumari
html tutorial
html tutorial
pacatarpit
4. html css-java script-basics
4. html css-java script-basics
Nikita Garg
Practical file on web technology(html)
Practical file on web technology(html)
RAJWANT KAUR
Falling in Love with Forms [F0WD 2015]
Falling in Love with Forms [F0WD 2015]
Aaron Gustafson
Presentation html
Presentation html
Billy Tierra
Cis145 03 configuring-withcss
Cis145 03 configuring-withcss
Nicole77777
Introduction to HTML4
Introduction to HTML4
Collaboration Technologies
Getting Information through HTML Forms
Getting Information through HTML Forms
Mike Crabb
Falling in Love With Forms [An Event Apart DC 2015]
Falling in Love With Forms [An Event Apart DC 2015]
Aaron Gustafson
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
FAKHRUN NISHA
Vskills certified html designer Notes
Vskills certified html designer Notes
Vskills
HTML practical file
HTML practical file
Kuldeep Sharma
Tendances
(20)
Html 4.0
Html 4.0
Falling in Love with Forms [Web Design Day]
Falling in Love with Forms [Web Design Day]
Html basics
Html basics
HTML - 5 - Introduction
HTML - 5 - Introduction
HTML Foundations, pt 2
HTML Foundations, pt 2
Week 2-intro-html
Week 2-intro-html
Html
Html
Html ppt
Html ppt
html tutorial
html tutorial
4. html css-java script-basics
4. html css-java script-basics
Practical file on web technology(html)
Practical file on web technology(html)
Falling in Love with Forms [F0WD 2015]
Falling in Love with Forms [F0WD 2015]
Presentation html
Presentation html
Cis145 03 configuring-withcss
Cis145 03 configuring-withcss
Introduction to HTML4
Introduction to HTML4
Getting Information through HTML Forms
Getting Information through HTML Forms
Falling in Love With Forms [An Event Apart DC 2015]
Falling in Love With Forms [An Event Apart DC 2015]
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
Vskills certified html designer Notes
Vskills certified html designer Notes
HTML practical file
HTML practical file
En vedette
Chapter 12 - Web Design
Chapter 12 - Web Design
tclanton4
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Chapter 10 - Web Design
Chapter 10 - Web Design
tclanton4
Chapter 7 - Web Design
Chapter 7 - Web Design
tclanton4
Chapter 14 - Web Design
Chapter 14 - Web Design
tclanton4
103學測 原始分數與級分對照表
103學測 原始分數與級分對照表
中 央社
Cell structure & functions for class 9 by Susanta Kumar Panda
Cell structure & functions for class 9 by Susanta Kumar Panda
SUSANTA KUMAR PANDA
Software Project Management ppt
Software Project Management ppt
Andreea Usatenco
En vedette
(8)
Chapter 12 - Web Design
Chapter 12 - Web Design
Chapter 13 - Web Design
Chapter 13 - Web Design
Chapter 10 - Web Design
Chapter 10 - Web Design
Chapter 7 - Web Design
Chapter 7 - Web Design
Chapter 14 - Web Design
Chapter 14 - Web Design
103學測 原始分數與級分對照表
103學測 原始分數與級分對照表
Cell structure & functions for class 9 by Susanta Kumar Panda
Cell structure & functions for class 9 by Susanta Kumar Panda
Software Project Management ppt
Software Project Management ppt
Similaire à Chapter 9 - Web Design
Chapter09
Chapter09
Sreenivasan G
Web topic 20 2 html forms
Web topic 20 2 html forms
CK Yang
Web topic 20 1 html forms
Web topic 20 1 html forms
CK Yang
Web forms and html lecture Number 4
Web forms and html lecture Number 4
Mudasir Syed
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZer
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZer
Nuzhat Memon
HTML
HTML
Emertxe Information Technologies Pvt Ltd
New Form Element in HTML5
New Form Element in HTML5
Zahra Rezwana
Web design - Working with forms in HTML
Web design - Working with forms in HTML
Mustafa Kamel Mohammadi
HTML Forms
HTML Forms
Nisa Soomro
HTML Forms
HTML Forms
michael andrion
Forms Part 1
Forms Part 1
kjkleindorfer
CSS_Forms.pdf
CSS_Forms.pdf
gunjansingh599205
Html forms
Html forms
Himanshu Pathak
HtmlForms- basic HTML forms description.
HtmlForms- basic HTML forms description.
MohammadRafsunIslam
Html Form Controls
Html Form Controls
Bosco Technical Training Society, Don Bosco Technical School (Aff. GGSIP University, New Delhi)
Chapter 2 class power point
Chapter 2 class power point
cmurphysvhs
Cmsc 100 (web forms)
Cmsc 100 (web forms)
MaeEstherMaguadMaralit
Html class-04
Html class-04
Md Ali Hossain
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
Shawn Calvert
Designing web pages html forms and input
Designing web pages html forms and input
Jesus Obenita Jr.
Similaire à Chapter 9 - Web Design
(20)
Chapter09
Chapter09
Web topic 20 2 html forms
Web topic 20 2 html forms
Web topic 20 1 html forms
Web topic 20 1 html forms
Web forms and html lecture Number 4
Web forms and html lecture Number 4
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZer
Std 12 Computer Chapter 1 Creating Html Forms Using KompoZer
HTML
HTML
New Form Element in HTML5
New Form Element in HTML5
Web design - Working with forms in HTML
Web design - Working with forms in HTML
HTML Forms
HTML Forms
HTML Forms
HTML Forms
Forms Part 1
Forms Part 1
CSS_Forms.pdf
CSS_Forms.pdf
Html forms
Html forms
HtmlForms- basic HTML forms description.
HtmlForms- basic HTML forms description.
Html Form Controls
Html Form Controls
Chapter 2 class power point
Chapter 2 class power point
Cmsc 100 (web forms)
Cmsc 100 (web forms)
Html class-04
Html class-04
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
Designing web pages html forms and input
Designing web pages html forms and input
Plus de tclanton4
Chapter 11 - Web Design
Chapter 11 - Web Design
tclanton4
Chapter 6 - Web Design
Chapter 6 - Web Design
tclanton4
Chapter 5 - Web Design
Chapter 5 - Web Design
tclanton4
Chapter 4 - Web Design
Chapter 4 - Web Design
tclanton4
Chapter 3 - Web Design
Chapter 3 - Web Design
tclanton4
Chapter 1 - Web Design
Chapter 1 - Web Design
tclanton4
Base2
Base2
tclanton4
Base1
Base1
tclanton4
Impress
Impress
tclanton4
Project Mgt
Project Mgt
tclanton4
Charts in Calc
Charts in Calc
tclanton4
Formatting a Worksheet in Calc
Formatting a Worksheet in Calc
tclanton4
Creating a Worksheet in Calc
Creating a Worksheet in Calc
tclanton4
Advanced Features of Writer
Advanced Features of Writer
tclanton4
Creating a Writer Document
Creating a Writer Document
tclanton4
Formatting Features of Writer
Formatting Features of Writer
tclanton4
Getting Started - The Basics
Getting Started - The Basics
tclanton4
Intro to Information Systems
Intro to Information Systems
tclanton4
Unit 04 PowerPoint (WebA)
Unit 04 PowerPoint (WebA)
tclanton4
Plus de tclanton4
(19)
Chapter 11 - Web Design
Chapter 11 - Web Design
Chapter 6 - Web Design
Chapter 6 - Web Design
Chapter 5 - Web Design
Chapter 5 - Web Design
Chapter 4 - Web Design
Chapter 4 - Web Design
Chapter 3 - Web Design
Chapter 3 - Web Design
Chapter 1 - Web Design
Chapter 1 - Web Design
Base2
Base2
Base1
Base1
Impress
Impress
Project Mgt
Project Mgt
Charts in Calc
Charts in Calc
Formatting a Worksheet in Calc
Formatting a Worksheet in Calc
Creating a Worksheet in Calc
Creating a Worksheet in Calc
Advanced Features of Writer
Advanced Features of Writer
Creating a Writer Document
Creating a Writer Document
Formatting Features of Writer
Formatting Features of Writer
Getting Started - The Basics
Getting Started - The Basics
Intro to Information Systems
Intro to Information Systems
Unit 04 PowerPoint (WebA)
Unit 04 PowerPoint (WebA)
Dernier
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
RAM LAL ANAND COLLEGE, DELHI UNIVERSITY.
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
Celine George
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
Marc Dusseiller Dusjagr
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
Thiyagu K
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
dawncurless
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
SoniaTolstoy
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
Thiyagu K
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
pboyjonauth
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
EduSkills OECD
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
VS Mahajan Coaching Centre
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
RaunakKeshri1
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
eniolaolutunde
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
misteraugie
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
Chameera Dedduwage
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
TechSoup
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
Celine George
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
chloefrazer622
Dernier
(20)
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
Chapter 9 - Web Design
1.
Copyright © Terry
Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 9 Key Concepts 1Copyright © Terry Felke-Morris
2.
Copyright © Terry
Felke-Morris LEARNING OUTCOMES In this chapter, you will learn how to ... Describe common uses of forms on web pages Create forms on web pages using the form, input, textarea, and select elements Create forms that provide additional accessibility features using the accesskey and tabindex attributes Associate form controls and groups using the label, fieldset, and legend elements Create custom image buttons and use the button element Use CSS to style a form Configure new HTML5 form controls including the email, URL, datalist, range, spinner, calendar, and color controls Describe the features and common uses of server-side processing Invoke server-side processing to handle form data Find free server-side processing resources on the Web 2
3.
Copyright © Terry
Felke-Morris 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, and so on… 3
4.
Copyright © Terry
Felke-Morris OVERVIEW OF FORMS (2) Form An HTML element that contains and organizes form controls such as text boxes, check boxes, and buttons that can accept information from website visitors. 4
5.
Copyright © Terry
Felke-Morris TWO COMPONENTS OF USING FORMS 1. The HTML form -- the web page user interface and 2. The server-side processing Server-side processing works with the form data and sends e-mail, writes to a text file, updates a database, or performs some other type of processing on the server. 5
6.
Copyright © Terry
Felke-Morris HTML USING FORMS <form> Contains the form elements on a web page Container tag <input> Configures a variety of form elements including text boxes, radio buttons, check boxes, and buttons Stand alone tag <textarea> Configures a scrolling text box Container tag <select> Configures a select box (drop down list) Container tag <option> Configures an option in the select box Container tag 6
7.
Copyright © Terry
Felke-Morris SAMPLE FORM HTML <form> E-mail: <input type="text" name ="email" id="email"><br> <input type="submit"> <input type=“reset"> </form> 7
8.
Copyright © Terry
Felke-Morris HTML FORM ELEMENT The form element attributes: ◦ action Specifies the server-side program or script that will process your form data ◦ method get – default value, form data passed in URL post – more secure, form data passed in HTTP Entity Body ◦ name Identifies the form ◦ id Identifies the form 8
9.
Copyright © Terry
Felke-Morris INPUT TEXT BOX <input> Accepts text information Attributes: ◦ type=“text” ◦ name ◦ id ◦ size ◦ maxlength ◦ value 9
10.
Copyright © Terry
Felke-Morris TEXTAREA SCROLLING TEXT BOX <textarea> </textarea> Configures a scrolling text box Attributes: name id cols rows 10
11.
Copyright © Terry
Felke-Morris INPUT SUBMIT BUTTON <input> Submits the form information When clicked: Triggers the action method on the <form> tag Sends the form data (the name=value pair for each form element) to the web server. Attributes: type=“submit” name id value 11
12.
Copyright © Terry
Felke-Morris INPUT RESET BUTTON <input> Resets the form fields to their initial values Attributes: type=“reset” name id value 12
13.
Copyright © Terry
Felke-Morris HANDS-ON PRACTICE 13
14.
Copyright © Terry
Felke-Morris INPUT PASSWORD BOX <input> Accepts text information that needs to be hidden as it is entered Attributes: ◦ type=“password” ◦ name ◦ id ◦ size ◦ maxlength ◦ value 14
15.
Copyright © Terry
Felke-Morris INPUT CHECK BOX <input> Allows the user to select one or more of a group of predetermined items Attributes: ◦ type=“checkbox” ◦ name ◦ id ◦ checked ◦ value 1
16.
Copyright © Terry
Felke-Morris INPUT RADIO BUTTON <input> Allows the user to select exactly one from a group of predetermined items Each radio button in a group is given the same name and a unique value Attributes: ◦ type=“radio” ◦ name ◦ id ◦ checked ◦ value 16
17.
Copyright © Terry
Felke-Morris INPUT HIDDEN FORM DATA <input> This form control is not displayed on the web page. Hidden form fields Can be accessed by both client-side and server-side scripting Sometimes used to contain information needed as the visitor moves from page to page. Attributes: type=“hidden” name id value 17
18.
Copyright © Terry
Felke-Morris SELECT LIST <select></select> Configures a select list (along with option elements) Also known as: Select Box, Drop-Down List, Drop- Down Box, and Option Box. Allows the user to select one or more items from a list of predetermined choices. Attributes: ◦ name ◦ id ◦ size ◦ multiple 18
19.
Copyright © Terry
Felke-Morris OPTIONS IN A SELECT LIST <option></option> Configures the options in a Select List Attributes: value selected 19
20.
Copyright © Terry
Felke-Morris CHECKPOINT 1. You are designing a web site for a client who sells items in a retail store. They want to create a customer list for e-mail marketing purposes. Your client sells to consumers and needs a form that accepts their customer’s name and e-mail address. Would you recommend using two input boxes (one for the name and one for the e-mail) or three input boxes (for the first name, last name, and email address)? Explain your answer. 20
21.
Copyright © Terry
Felke-Morris CHECKPOINT 2. You are designing a survey form for a client. One of the questions has 10 possible responses. Only one response can be selected per question. What type of form control would you use to configure this question on the web page? 3. True or False. In a radio button group, the value attribute is used by the browser to process the radio buttons as a group. 21
22.
Copyright © Terry
Felke-Morris INPUT IMAGE BUTTON <input> Submits the form When clicked: ◦ Triggers the action method on the form tag ◦ Sends the form data (the name=value pair for each form element) to the web server. Attributes: ◦ type=“image” ◦ name ◦ id ◦ src 22
23.
Copyright © Terry
Felke-Morris BUTTON ELEMENT <button></button> A container tag When clicked, its function depends on the value of the type attribute. Can contain a combination of text, images, and media Attributes: ◦ type=“submit”, type=“reset”, type=“button” ◦ name ◦ id ◦ alt ◦ value 23
24.
Copyright © Terry
Felke-Morris ACCESSIBILITY & FORMS Label Element Fieldset Element Legend Element Tabindex Attribute Accesskey Attribute 24
25.
Copyright © Terry
Felke-Morris LABEL ELEMENT <label></label> Associates a text label with a form control Two Different Formats: <label>Email: <input type="text" name=“email" id ="email"></label> Or <label for="email">Email: </label> <input type="text" name="CustEmail" id= "email"> 25
26.
Copyright © Terry
Felke-Morris 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 26 <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>
27.
Copyright © Terry
Felke-Morris TABINDEX ATTRIBUTE Attribute that can be used on form controls and anchor tags Modifies the default tab order Assign a numeric value <input type="text" name="CustEmail" id="CustEmail" tabindex="1"> 27
28.
Copyright © Terry
Felke-Morris ACCESSKEY ATTRIBUTE Attribute that can be used on form controls and anchor tags Create a “hot-key” combination to place the focus on the component Assign a value of a keyboard letter On Windows use the CTRL and the “hot-key” to move the cursor <input type="text" name="CustEmail" id="CustEmail" accesskey="E"> 28
29.
Copyright © Terry
Felke-Morris CHECKPOINT 1. Describe the purpose of the fieldset and legend elements. 2. Describe the purpose of the accesskey attribute and how it supports accessibility. 3. When designing a form, should you use the standard submit button, an image button, or a button tag? Are these different in the way that they provide for accessibility? Explain your answer. 29
30.
Copyright © Terry
Felke-Morris <form method="get"> <table border="0"> <tr> <td align="right">Name:</td> <td><input type="text" name="fmail" id="fmail"></td> </tr> <tr> <td align="right">E-mail:</td> <td><input type="text" name="email" id="email"></td> </tr> <tr> <td align="right" valign="top">Comments:</td> <td><textarea name="comments" id="comments" rows="4" cols="40"></textarea></td> </tr> <tr> <td> </td> <td><input type="submit" value="Contact"> <input type="reset"></td> </tr> </table> </form> 30 FORMAT A FORM WITH A TABLE
31.
Copyright © Terry
Felke-Morris USING CSS TO STYLE A FORM Transitional Approach Use a table to format the form but configure styles instead of HTML table attributes. 31 table { background-color: #eaeaea; border-style: none; width: 20em; font-family: Arial, sans-serif; } th { font-weight: normal; text-align: right; vertical-align: top; } td, th {padding: 5px; }
32.
Copyright © Terry
Felke-Morris USING CSS TO STYLE A FORM “Pure" CSS Approach Do not use a table to format the form. Use CSS float and display: block 32 form { background-color:#eaeaea; width: 350px; font-family: Arial, sans-serif; padding: 10px; } label { float: left; width: 100px; display: block; clear: left; text-align: right; padding-right: 10px; margin-top: 10px; } input, textarea { margin-top: 10px; display: block; } #mySubmit { margin-left: 110px; }
33.
Copyright © Terry
Felke-Morris SERVER-SIDE PROCESSING Your web browser requests web pages and their related files from a web server. The web server locates the files and sends them to your web browser. The web browser then renders the returned files and displays the requested web pages for you to use. 33
34.
Copyright © Terry
Felke-Morris CGI COMMON GATEWAY INTERFACE A protocol for a web server to pass a web page user's request to an application program and accept information to send to the user. 34
35.
Copyright © Terry
Felke-Morris SERVER-SIDE SCRIPTING One of many technologies in which a server-side script is embedded within aWeb page document saved with a file extension such as: ◦ .php (PHP) ◦ .asp (Active Server Pages) ◦ .cfm (Adobe ColdFusion) ◦ .jsp (Sun JavaServer Pages) ◦ .aspx (ASP.Net). Uses direct execution — the script is run either by the web server itself or by an extension module to the web server. 35
36.
Copyright © Terry
Felke-Morris STEPS IN UTILIZING SERVER-SIDE PROCESSING 1. Web page invokes server-side processing by a form or hyperlink. 2. Web server executes a server-side script. 3. Server-side script accesses requested database, file, or process. 4. Web server returns web page with requested information or confirmation of action. 36
37.
Copyright © Terry
Felke-Morris COMMON USES OF SERVER-SIDE SCRIPTING Search a database Place an order at an online store Send a web page to a friend Subscribe to a newsletter 37
38.
Copyright © Terry
Felke-Morris SENDING INFORMATION TO A SERVER-SIDE SCRIPT <form method="post" action="http://webdevbasics.net/scripts/demo.php "> 38
39.
Copyright © Terry
Felke-Morris SOURCES OF FREE SERVER-SIDE PROCESSING Many web host providers offer free scripts for their clients. Contact their support area or FAQ to learn more about their services. Some web sites that offer FREE remotely hosted scripts (in return for displaying an ad). http://formbuddy.com http://response-o-matic.com http://master.com http://www.formmail.com http://wufoo.com http://icebrrg.com http://formassembly.com 39
40.
Copyright © Terry
Felke-Morris SERVER-SIDE SCRIPTING TECHNOLOGIES JavaServer Pages http://java.sun.com/products/jsp Active Server Pages Visit http://msdn.microsoft.com and search for “Active Server Pages” ColdFusion http://www.adobe.com/products/coldfusion PHP http://www.php.net Ruby on Rails http://www.rubyonrails.org or http://tryruby.hobix.com Microsoft’s .NET Framework http://www.microsoft.com/net 40
41.
Copyright © Terry
Felke-Morris CHECKPOINT 1. Describe server-side processing. 2. Describe why communication is needed between the developer of a server-side script and the web page designer. 41
42.
Copyright © Terry
Felke-Morris HTML5: EMAIL TEXT BOX <input> Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦ size ◦ maxlength ◦ value ◦ placeholder ◦ required 42
43.
Copyright © Terry
Felke-Morris HTML5: URL TEXT BOX <input> Accepts text information in URL format Common Attributes: ◦ type=“url” ◦ name ◦ id ◦ size ◦ maxlength ◦ value ◦ placeholder ◦ required 43
44.
Copyright © Terry
Felke-Morris HTML5:TELEPHONE NUMBER TEXT BOX <input> Accepts text information in telephone number format Common Attributes: ◦ type=“tel” ◦ name ◦ id ◦ size ◦ maxlength ◦ value ◦ placeholder ◦ required 44
45.
Copyright © Terry
Felke-Morris HTML5: SEARCH TEXT BOX <input> Accepts search terms Common Attributes: ◦ type=“search” ◦ name ◦ id ◦ size ◦ maxlength ◦ value ◦ placeholder ◦ required 45
46.
Copyright © Terry
Felke-Morris HTML5: DATALIST CONTROL <label for="color">Favorite Color:</label> <input type="text" name="color" id="color" list="colors" > <datalist id="colors"> <option value="red"> <option value="green"> <option value="blue"> <option value="yellow"> <option value="pink"> <option value="black"> </datalist> 46
47.
Copyright © Terry
Felke-Morris HTML5: SLIDER CONTROL <label for="myChoice"> Choose a number between 1 and 100:</label><br> Low <input type="range" name="myChoice" id="myChoice"> High 47
48.
Copyright © Terry
Felke-Morris HTML5: SPINNER CONTROL <label for="myChoice">Choose a number between 1 and 10:</label> <input type="number" name="myChoice" id="myChoice" min="1" max="10"> 48
49.
Copyright © Terry
Felke-Morris HTML5: CALENDAR CONTROL <label for="myDate">Choose a Date</label> <input type="date" name="myDate" id="myDate"> 49
50.
Copyright © Terry
Felke-Morris PRACTICE WITH AN HTML5 FORM The form display and functioning varies with browser support. 50
51.
Copyright © Terry
Felke-Morris SUMMARY This chapter introduced the use of forms on web pages. You learned about how to configure form elements and provide for accessibility. You also learned how to configure a form to access server-side processing. In addition, you learned about new HTML5 form controls. 51
Télécharger maintenant