Presentation is loading. Please wait.

Presentation is loading. Please wait.

Getting User Input with Forms

Published bySamuel Simpson Modified over 6 years ago

Similar presentations

Presentation on theme: "Getting User Input with Forms"— Presentation transcript:

1 Getting User Input with Forms
Chapter 6 Getting User Input with Forms

2 Learning Objectives Use the <form> and </form> tag pair to define an HTML-based form Use the <input> tag to create a text box for user input within a form Use the <input> tag to create radio buttons which simplify user selection within a form Use the <input> tag to create checkboxes to allow users to select multiple options within a form Use the <input> tag to create a button within a form Use the <select> and </select> tag pair to define a pull-down list within a form Use the <textarea> and </textarea> tag pair to prompt the user for large amount of text within a form. Group related input fields within a form

3 Learning objectives continued
Group related items within a pull-down list Submit a form’s contents to a remote script Compare and contrast server-side script validation of a form’s data with client- side JavaScript validation

4 Simple form – prompt only – no action
<!DOCTYPE html> <html> <body> <form> Name: <input type="input" name="username"/> <br/><br/> <input type="input" name=" "/> </form> </body> </html>

5 Submission process

6 Button, but still no submit
<!DOCTYPE html> <html> <body> <form> Name: <input type="input" name="username"/> <br/><br/> <input type="input" name=" "/> <br/><br/> <input type="submit" value="Click to Submit" /> </form> </body> </html>

7 Specifying the submit action
<!DOCTYPE html> <html> <body> <form action=" method="post"> Name: <input type="input" name="username"/> <br/><br/> <input type="input" name=" "/> <br/><br/> <input type="submit" value="Click to Submit" /> </form> </body> </html>

8 Formecho.php <?php $msg="Values submitted by the user:<br/>\n"; foreach($_POST as $key => $val){ if (is_array($val)){ $msg.="Item: $key<br/>\n"; foreach($val as $v){ $v = stripslashes($v); $msg.=" $v<br/>\n"; } } else { $val = stripslashes($val); $msg.="$key: $val<br/>\n"; } } echo $msg; ?>

9 Putting content into the form
<!DOCTYPE html> <html> <body> <form action=" method="post"> <table> <tr><td><img src=" width="200" height="150"/></td> <td><img src=" width="200" height="150"/></td> <td><img src=" width="200" height="150"/></td> </tr> </table> <br/> What's Your Favorite Food: <input type="input" name="food"/> </body> </html>

10 Prompting for a password
<!DOCTYPE html> <html> <body> <form action=" method="post"> Username: <input type="input" name="username"/> Password: <input type="password" name="userPassword"/> </body> </html>

11 Specifying field max lengths
<!DOCTYPE html> <html> <body> <form action=" method="post"> Five: <input type="input" maxlength="5" size="5"/> Ten: <input type="input" maxlength="10" size="10"/> Twenty: <input type="input" maxlength="20" size="20"/> </form> </body> </html>

12 Using a textarea for larger input
<!DOCTYPE html> <html> <body> <form action=" method="post"> Text Area: <textarea rows="10" cols="50"></textarea> </form> </body> </html>

13 Radio buttons <!DOCTYPE html> <html> <body> <form action=" method="post"> Gender: Male <input type="radio" name="gender" value="male"/> Female <input type="radio" name="gender" value="female"/> <br/><br/> PC Type: Windows <input type="radio" name="PC" value="Windows"/> Mac <input type="radio" name="PC" value="Mac"/> <br/><br/> <input type="submit" value="Click to Submit"/> </form> </body> </html>

14 Selecting a default radio button
Male <input type="radio" name="gender" value="male" checked/> Female <input type="radio" name="gender" value="female"/>

15 Checkboxes <!DOCTYPE html> <html> <body> <form action=" method="post"> Desired Pizza Toppings: Cheese <input type="checkbox" name="cheese"/><br/> Pepperoni <input type="checkbox" name="pepperoni"/><br/> Bacon <input type="checkbox" name="bacon"/><br/> Pineapple <input type="checkbox" name="pineapple"/><br/> <br/><br/> <input type="submit" value="Click to Submit"/> </form> </body> </html>

16 Pull-down lists <!DOCTYPE html> <html> <body> <form action=" method="post"> Salutation: <select name=“salutation”> <option>Dr</option> <option>Mr</option> <option>Mrs</option> <option>Miss</option> <option>Ms</option> </select><br/><br/> Favorite Sport: <select name=“sport”> <option>Baseball</option> <option>Basketball</option> <option>Football</option> <option>Hockey</option> <option>Soccer</option> </select> <br/><br/> <input type="submit" value="Click to Submit"/> </form> </body> </html>

17 Pull-down list size Salutation: <select name="salutation" size= "5">

18 Selecting multiple elements
Favorite Sport: <select name=“sport[]” multiple> <option>Baseball</option> <option>Basketball</option> <option>Football</option> <option>Hockey</option> <option>Soccer</option> </select>

19 Resetting a form’s contents
<!DOCTYPE html> <html> <body> <form action=" method="post"> Name: <input type="input" name="name"/><br/> Phone: <input type="input" name="phone"/><br/> Programming Languages: C <input type="checkbox" name="C"/><br/> Java <input type="checkbox" name="Java"/><br/> VB <input type="checkbox" name="VB"/><br/><br/><br/> <input type="submit" value="Click to Submit"/><input type="reset" value="Reset"/> </form> </body> </html>

20 Creating a custom button
<!DOCTYPE html> <html> <body> <form action=" p" method="post"> <button type="submit"> <img src=" k.jpg" height="100" width="100" /> </button> </form> </body> </html>

21 Using field labels <!DOCTYPE html> <html> <body> <form action=" method="post"> <label for="firstname"><b>First name:</b> </label> <input type="text" id="firstname"><br/> <label for="lastname"><b>Last name: </b></label> <input type="text" id="lastname"><br/> <label for=" "><i> </i> </label> <input type="text" id=" "><br/><br/><br/> <input type="submit" value="Click to Submit"/> </form> </body> </html>

22 E-mailing a form’s contents
<!DOCTYPE html> <html> <body> <form method="post"> Name: <input type="input" name="username"/> <br/><br/> <input type="input" name=" "/> <br/><br/> <input type="submit" value="Click to Submit" /> </form> </body> </html>

23 Hidden form fields <!DOCTYPE html> <html> <body> <form action=" method="post"> Name: <input type="input" name="username"/> <br/><br/> <input type="input" name=" "/> <br/><br/> <input type="hidden" name="someField" value="1.2"/> <input type="submit" value="Click to Submit" /> </form> </body> </html>

24 Uploading a file <!DOCTYPE html> <html> <body> <form action=" Uploader.php" enctype="multipart/form-data" method="post"> File: <input type="file" name="file" id="file"/> <input type="submit" value="Submit" /> </form> </body> </html>

25 Processing a file upload with php
<?php if ($_FILES["file"]["error"] > 0) { echo "Error: " . $_FILES["file"]["error"] . "<br />"; } else { echo("Upload: " . $_FILES["file"]["name"] " successful<br/>\n"); echo("Stored in: " . $_FILES["file"]["tmp_name"]); } ?>

26 Grouping fields <!DOCTYPE html> <html> <body> <form action=" method="post"> <fieldset> Name: <input type="input" name="username"/> <br/><br/> <input type="input" name=" "/> </fieldset> <fieldset> Salutation: <select name=“salutation”> <option>Dr</option> <option>Mr</option> <option>Mrs</option> <option>Miss</option> <option>Ms</option> </select><br/><br/> Favorite Sport: <select name=“sport”> <option>Baseball</option> <option>Basketball</option> <option>Football</option> <option>Hockey</option> <option>Soccer</option> </select> </fieldset><br/> <input type="submit" value="Click to Submit" /> </form> </body> </html>

27 Grouping list selections
<!DOCTYPE html> <html> <body> <form action=" method="post"> Wines: <select name=“wine”> <optgroup label="White Wines"> <option>Chardonnay</option> <option>Pinot Grigio</option> <option>Sauvignon Blanc</option> </optgroup> <optgroup label="Red Wines"> <option>Cabernet Sauvignon</option> <option>Merlot</option> <option>Pinot Noir</option> </optgroup> </select> <input type="submit" value="Click to Submit" /> </form> </body> </html>

28 Real world: form validation
<!DOCTYPE html> <head> <script> function validateForm() { if (document.forms["myForm"]["name"].value == null || document.forms["myForm"]["name"].value == "") { alert("Name must be filled out"); return false; } if (document.forms["myForm"]["phone"].value == null || document.forms["myForm"]["phone"].value == "") { alert("Phone must be filled out"); return false; } if (document.forms["myForm"][" "].value == null || document.forms["myForm"][" "].value == "") { alert(" must be filled out"); return false; } return true; } </script> </head> <html> <body> <form name="myForm" action=" method="post" onsubmit="return validateForm()" > Name: <input type="text" name="name" /><br/> Phone: <input type="text" name="phone" /><br/> <input type="text" name=" " /><br/> <input type="submit" value="Click to Submit" /> </form> </body> </html>

29 Summary Depending on the processing a Web page performs, it is common for the page to require user input of some type. To perform such input operations, HTML pages use forms. Across the Web, sites use forms to prompt the user for login credentials, to request registration data, to get credit card and shipping information, and much more. You use the <form> and </form> tag pair to define a form and the <input> tag to create the most common form input fields. To perform form processing normally requires that one developer use HTML tags to create the form and that a second developer create scripts, using PHP or another scripting language, which process the data on the remote server.

Download ppt "Getting User Input with Forms"

Similar presentations

>> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}

>> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}
CHAPTER 6 GETTING USER INPUT WITH FORMS. LEARNING OBJECTIVES Use the and tag pair to define an HTML-based form Use the tag to create a text box for user.

CHAPTER 6 GETTING USER INPUT WITH FORMS. LEARNING OBJECTIVES Use the and tag pair to define an HTML-based form Use the tag to create a text box for user.
Video, audio, embed, iframe, HTML Form

Video, audio, embed, iframe, HTML Form
Creating Web Page Forms. Objectives Describe how Web forms can interact with a server-based program Insert a form into a Web page Create and format a.

Creating Web Page Forms. Objectives Describe how Web forms can interact with a server-based program Insert a form into a Web page Create and format a.
Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.

Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.

Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Chapter 10 Form Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

Chapter 10 Form Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.

1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
Unit 7 – Working with Forms 1. Creating a form 2. Accessing the submitted data 3. Common operations on forms.

Unit 7 – Working with Forms 1. Creating a form 2. Accessing the submitted data 3. Common operations on forms.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.

4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
XP Tutorial 6New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Creating Web Page Forms Designing a Product Registration Form Tutorial.

XP Tutorial 6New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Creating Web Page Forms Designing a Product Registration Form Tutorial.
Forms and Form Controls Chapter 6. 6.1 What is a Form?

Forms and Form Controls Chapter What is a Form?
1 HTML Forms. 22 HTML forms provide a way for a user to send information back to the web server. Originally the user input was processed on the server.

1 HTML Forms. 22 HTML forms provide a way for a user to send information back to the web server. Originally the user input was processed on the server.
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.

CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
HTML Forms.

HTML Forms.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.

LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
Week 9 - Form Basics Key Concepts 1. 1.Describe common uses of forms on web pages 2.Create forms on web pages using the form, input, textarea, and select.

Week 9 - Form Basics Key Concepts 1. 1.Describe common uses of forms on web pages 2.Create forms on web pages using the form, input, textarea, and select.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.

Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
1 Review of Form Elements. 2 The tag Used in between tags.  Form elements(text control, buttons, etc.. ) goes here. OR  Form elements(text control,

1 Review of Form Elements. 2 The tag Used in between tags.  Form elements(text control, buttons, etc.. ) goes here. OR  Form elements(text control,

Similar presentations

Ads by Google