Getting User Input with Forms Chapter 6 Getting User Input with Forms
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
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
Simple form – prompt only – no action <!DOCTYPE html> <html> <body> <form> Name: <input type="input" name="username"/> <br/><br/> E-Mail: <input type="input" name="e-mail"/> </form> </body> </html>
Submission process
Button, but still no submit <!DOCTYPE html> <html> <body> <form> Name: <input type="input" name="username"/> <br/><br/> E-Mail: <input type="input" name="e-mail"/> <br/><br/> <input type="submit" value="Click to Submit" /> </form> </body> </html>
Specifying the submit action <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> Name: <input type="input" name="username"/> <br/><br/> E-Mail: <input type="input" name="e-mail"/> <br/><br/> <input type="submit" value="Click to Submit" /> </form> </body> </html>
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; ?>
Putting content into the form <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> <table> <tr><td><img src="http://www.websitedevelopmentbook.com/chapter06/Pasta.jpg" width="200" height="150"/></td> <td><img src="http://www.websitedevelopmentbook.com/chapter06/Pizza.jpg" width="200" height="150"/></td> <td><img src="http://www.websitedevelopmentbook.com/chapter06/Dessert.jpg" width="200" height="150"/></td> </tr> </table> <br/> What's Your Favorite Food: <input type="input" name="food"/> </body> </html>
Prompting for a password <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> Username: <input type="input" name="username"/> Password: <input type="password" name="userPassword"/> </body> </html>
Specifying field max lengths <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" 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>
Using a textarea for larger input <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> Text Area: <textarea rows="10" cols="50"></textarea> </form> </body> </html>
Radio buttons <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" 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>
Selecting a default radio button Male <input type="radio" name="gender" value="male" checked/> Female <input type="radio" name="gender" value="female"/>
Checkboxes <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" 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>
Pull-down lists <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" 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>
Pull-down list size Salutation: <select name="salutation" size= "5">
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>
Resetting a form’s contents <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" 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>
Creating a custom button <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.ph p" method="post"> <button type="submit"> <img src="http://www.WebsiteDevelopmentBook.com/Chapter06/clic k.jpg" height="100" width="100" /> </button> </form> </body> </html>
Using field labels <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" 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="email"><i>email:</i> </label> <input type="text" id="email"><br/><br/><br/> <input type="submit" value="Click to Submit"/> </form> </body> </html>
E-mailing a form’s contents <!DOCTYPE html> <html> <body> <form action="mailto:SomeUser@SomeSite.com" method="post"> Name: <input type="input" name="username"/> <br/><br/> E-Mail: <input type="input" name="e-mail"/> <br/><br/> <input type="submit" value="Click to Submit" /> </form> </body> </html>
Hidden form fields <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> Name: <input type="input" name="username"/> <br/><br/> E-Mail: <input type="input" name="e-mail"/> <br/><br/> <input type="hidden" name="someField" value="1.2"/> <input type="submit" value="Click to Submit" /> </form> </body> </html>
Uploading a file <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/Chapter06/File Uploader.php" enctype="multipart/form-data" method="post"> File: <input type="file" name="file" id="file"/> <input type="submit" value="Submit" /> </form> </body> </html>
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"]); } ?>
Grouping fields <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> <fieldset> Name: <input type="input" name="username"/> <br/><br/> E-Mail: <input type="input" name="e-mail"/> </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>
Grouping list selections <!DOCTYPE html> <html> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" 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>
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"]["email"].value == null || document.forms["myForm"]["email"].value == "") { alert("Email must be filled out"); return false; } return true; } </script> </head> <html> <body> <form name="myForm" action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post" onsubmit="return validateForm()" > Name: <input type="text" name="name" /><br/> Phone: <input type="text" name="phone" /><br/> E-mail: <input type="text" name="email" /><br/> <input type="submit" value="Click to Submit" /> </form> </body> </html>
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.