Creating HTML Forms for User Interaction
Learn how to use HTML form tags to create interactive forms on your website. Explore the and tag pair for structuring forms, use for text boxes, radio buttons, checkboxes, and buttons. Group related input fields, create dropdown lists using , and prompt users for large text inputs with . Enhance your understanding by grouping items in dropdown lists, submitting form data to remote scripts, and comparing server-side validation with client-side JavaScript validation.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
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> <!DOCTYPE html> <html> <html> <body> <body> <form> <form> Name: <input type="input" name="username"/> Name: <input type="input" name="username"/> < <br br/>< /><br br/> /> E E- -Mail: <input type="input" name="e Mail: <input type="input" name="e- -mail"/> </form> </form> </body> </body> </html> </html> mail"/>
BUTTON, BUT STILL NO SUBMIT <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form> <form> Name: <input type="input" name="username"/> Name: <input type="input" name="username"/> < <br br/>< /><br br/> /> E E- -Mail: <input type="input" name="e Mail: <input type="input" name="e- -mail"/> < <br br/>< /><br br/> /> <input type="submit" value="Click to Submit" /> <input type="submit" value="Click to Submit" /> </form> </form> </body> </body> </html> </html> mail"/>
SPECIFYING THE SUBMIT ACTION <! <!DOCTYPE html> DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> method="post"> Name: <input type="input" name="username"/> Name: <input type="input" name="username"/> < <br br/>< /><br br/> /> E E- -Mail: <input type="input" name="e Mail: <input type="input" name="e- -mail"/> mail"/> < <br br/>< /><br br/> /> <input type="submit" value="Click to Submit" /> <input type="submit" value="Click to Submit" /> </form> </form> </body> </body> </html> </html>
FORMECHO.PHP <? <?php php $ $msg foreach foreach($_POST as $key => $ ($_POST as $key => $val if ( if (is_array is_array($ ($val val)){ )){ $msg.="Item: $key< $msg.="Item: $key<br br>"; foreach foreach($ ($val val as $v){ $v = $v = stripslashes stripslashes($v); $msg.=" $v< $msg.=" $v<br br>"; } } } else { } else { $ $val val = = stripslashes stripslashes($ ($val $msg.="$key: $ $msg.="$key: $val } } } } echo $ echo $msg msg; ; ?> ?> msg="Values submitted by the user:< ="Values submitted by the user:<br br>"; >"; val){ ){ >"; as $v){ ($v); >"; val); ); val< <br br>"; >";
PUTTING CONTENT INTO THE FORM <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> method="post"> <table> <table> < <tr tr> > <td>< <td><img img src src="http://www.websitedevelopmentbook.com/chapter06/Pasta.jpg" ="http://www.websitedevelopmentbook.com/chapter06/Pasta.jpg" width="200" height="150"/></td> width="200" height="150"/></td> <td>< <td><img img src src="http://www.websitedevelopmentbook.com/chapter06/Pizza.jpg" ="http://www.websitedevelopmentbook.com/chapter06/Pizza.jpg" width="200" height="150"/></td> width="200" height="150"/></td> <td>< <td><img img src src="http://www.websitedevelopmentbook.com/chapter06/Dessert.jpg" ="http://www.websitedevelopmentbook.com/chapter06/Dessert.jpg" width="200" height="150"/></td> width="200" height="150"/></td> </ </tr tr> > </table> </table> < <br br/> /> What's Your Favorite Food: <input type="input" name="food"/> What's Your Favorite Food: <input type="input" name="food"/> </body> </body> </html> </html>
PROMPTING FOR A PASSWORD <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> method="post"> Username: <input type="input" name="username"/> Username: <input type="input" name="username"/> Password: <input type="password" name=" Password: <input type="password" name="userPassword </body> </body> </html> </html> userPassword"/> "/>
SPECIFYING FIELD MAX LENGTHS <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> method="post"> Five: <input type="input" Five: <input type="input" maxlength maxlength="5" size="5"/> ="5" size="5"/> Ten: <input type="input" Ten: <input type="input" maxlength maxlength="10" size="10"/> ="10" size="10"/> Twenty: <input type="input" Twenty: <input type="input" maxlength maxlength="20" size="20"/> </form> </form> </body> </body> </html> </html> ="20" size="20"/>
USING A TEXTAREA FOR LARGER INPUT <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> method="post"> Text Area: < Text Area: <textarea textarea rows="10" cols="50"></ rows="10" cols="50"></textarea </form> </form> </body> </body> </html> </html> textarea> >
RADIO BUTTONS <! <!DOCTYPE html> DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> method="post"> Gender: Gender: Male <input type="radio" name="gender" value="male"/> Male <input type="radio" name="gender" value="male"/> Female <input type="radio" name="gender" value="female"/> Female <input type="radio" name="gender" value="female"/> < <br br/> /> < <br br/> /> PC Type: PC Type: Windows <input type="radio" name="PC" value="Windows"/> Windows <input type="radio" name="PC" value="Windows"/> Mac <input type="radio" name="PC" value="Mac"/> Mac <input type="radio" name="PC" value="Mac"/> < <br br/> /> < <br br/> /> <input type="submit" value="Click to Submit"/> <input type="submit" value="Click to Submit"/> </form> </form> </body> </body> </html> </html>
SELECTING A DEFAULT RADIO BUTTON Male <input type="radio" name="gender" value="male" checked Male <input type="radio" name="gender" value="male" checked/> /> Female Female <input type="radio" name="gender" value="female"/> <input type="radio" name="gender" value="female"/>
CHECKBOXES <! <!DOCTYPE html> DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> method="post"> Desired Pizza Toppings: Desired Pizza Toppings: Cheese <input type="checkbox" name="cheese"/>< Cheese <input type="checkbox" name="cheese"/><br br/> Pepperoni <input type="checkbox" name="pepperoni"/>< Pepperoni <input type="checkbox" name="pepperoni"/><br br/> Bacon <input type="checkbox" name="bacon"/>< Bacon <input type="checkbox" name="bacon"/><br br/> Pineapple <input type="checkbox" name="pineapple"/>< Pineapple <input type="checkbox" name="pineapple"/><br br/> < <br br/> /> < <br br/> /> <input type="submit" value="Click to Submit"/> <input type="submit" value="Click to Submit"/> </form> </form> </body> </body> </html> </html> /> /> /> />
PULL-DOWN LISTS <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> Salutation: <select name= salutation > Salutation: <select name= salutation > <option> <option>Dr Dr</option> </option> <option> <option>Mr Mr</option> </option> <option> <option>Mrs Mrs</option> </option> <option>Miss</option> <option>Miss</option> <option> <option>Ms Ms</option> </option> </select> </select> < <br br/>< /><br br/> /> Favorite Sport: <select name= sport > Favorite Sport: <select name= sport > <option>Baseball</option> <option>Baseball</option> <option>Basketball</option> <option>Basketball</option> <option>Football</option> <option>Football</option> <option>Hockey</option> <option>Hockey</option> <option>Soccer</option> <option>Soccer</option> </select> </select> < <br br/>< /><br br/> /> <input type="submit" value="Click to Submit"/> <input type="submit" value="Click to Submit"/> </form> </form> </body> </body> </html> </html>
PULL-DOWN LIST SIZE Salutation: <select name= salutation size= 5 > Salutation: <select name= salutation size= 5 >
SELECTING MULTIPLE ELEMENTS Favorite Sport: <select name= sport[] multiple> Favorite Sport: <select name= sport[] multiple> <option>Baseball</option> <option>Baseball</option> <option>Basketball</option> <option>Basketball</option> <option>Football</option> <option>Football</option> <option>Hockey</option> <option>Hockey</option> <option>Soccer</option> <option>Soccer</option> </select> </select>
RESETTING A FORMS CONTENTS <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> method="post"> Name: <input type="input" name="name"/>< Name: <input type="input" name="name"/><br br/> Phone: <input type="input" name="phone"/>< Phone: <input type="input" name="phone"/><br br/> Programming Languages: Programming Languages: C <input type="checkbox" name="C"/>< C <input type="checkbox" name="C"/><br br/> Java <input type="checkbox" name="Java"/>< Java <input type="checkbox" name="Java"/><br br/> VB <input type="checkbox" name="VB"/>< VB <input type="checkbox" name="VB"/><br br/> < <br br/>< /><br br/> /> <input type="submit" value="Click to Submit"/> <input type="submit" value="Click to Submit"/><input type="reset" value="Reset"/> </form> </form> </body> </body> </html> </html> /> /> /> /> /> <input type="reset" value="Reset"/>
CREATING A CUSTOM BUTTON <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> method="post"> <button type="submit"> <button type="submit"> < <img img src src="http://www.WebsiteDevelopmentBook.com/Chapter06/click.jpg" ="http://www.WebsiteDevelopmentBook.com/Chapter06/click.jpg" height="100" width="100" /> height="100" width="100" /> </button> </button> </form> </form> </body> </body> </html> </html>
USING FIELD LABELS <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> method="post"> <label for=" <label for="firstname firstname"><b>First name:</b> </label> "><b>First name:</b> </label> <input type="text" id=" <input type="text" id="firstname firstname">< "><br br/> <label for=" <label for="lastname lastname"><b>Last name: </b></label> "><b>Last name: </b></label> <input type="text" id=" <input type="text" id="lastname lastname">< "><br br/> /> <label for="email">< <label for="email"><i i>email:</ >email:</i i> </label> > </label> <input type="text" id="email">< <input type="text" id="email"><br br/> /> < <br br/>< /><br br/> /> <input type="submit" value="Click to Submit"/> <input type="submit" value="Click to Submit"/> </form> </form> </body> </body> </html> </html> />
E-MAILING A FORMS CONTENTS <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="mailto:SomeUser@SomeSite.com" method="post"> <form action="mailto:SomeUser@SomeSite.com" method="post"> Name: <input type="input" name="username"/> Name: <input type="input" name="username"/> < <br br/>< /><br br/> /> E E- -Mail: <input type="input" name="e Mail: <input type="input" name="e- -mail"/> < <br br/>< /><br br/> /> <input type="submit" value="Click to Submit" /> <input type="submit" value="Click to Submit" /> </form> </form> </body> </body> </html> </html> mail"/>
HIDDEN FORM FIELDS <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> method="post"> Name: <input type="input" name="username"/> Name: <input type="input" name="username"/> < <br br/>< /><br br/> /> E E- -Mail: <input type="input" name="e Mail: <input type="input" name="e- -mail"/> mail"/> < <br br/>< /><br br/> /> <input type="hidden" name=" <input type="hidden" name="someField someField" value="1.2"/> <input type="submit" value="Click to Submit" /> <input type="submit" value="Click to Submit" /> </form> </form> </body> </body> </html> </html> " value="1.2"/>
UPLOADING A FILE <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form <form action="http://www.WebsiteDevelopmentBook.com/Chapter06/FileUploader.php action="http://www.WebsiteDevelopmentBook.com/Chapter06/FileUploader.php " " enctype enctype="multipart/form ="multipart/form- -data" method="post"> data" method="post"> File: <input type="file" name="file" id="file"/> File: <input type="file" name="file" id="file"/> <input type="submit" value="Submit" /> <input type="submit" value="Submit" /> </form> </form> </body> </body> </html> </html>
PROCESSING A FILE UPLOAD WITH PHP <? <?php php if ($_FILES["file"]["error"] > 0) if ($_FILES["file"]["error"] > 0) { { echo "Error: " . $_FILES["file"]["error"] . "< echo "Error: " . $_FILES["file"]["error"] . "<br br />"; } } else else { { echo "Upload: " . $_FILES["file"]["name"] . " successful< echo "Upload: " . $_FILES["file"]["name"] . " successful<br br />"; echo "Stored in: " . $_FILES["file"][" echo "Stored in: " . $_FILES["file"]["tmp_name } } ?> ?> />"; />"; tmp_name"]; "];
GROUPING FIELDS <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> < <fieldset fieldset> > Name: <input type="input" name="username"/> Name: <input type="input" name="username"/> < <br br/>< /><br br/> /> E E- -Mail: <input type="input" name="e Mail: <input type="input" name="e- -mail"/> mail"/> </ </fieldset fieldset> > < <fieldset fieldset> > Salutation: <select name= salutation > Salutation: <select name= salutation > <option> <option>Dr Dr</option> </option> <option> <option>Mr Mr</option> </option> <option> <option>Mrs Mrs</option> </option> <option>Miss</option> <option>Miss</option> <option> <option>Ms Ms</option> </option> </select> </select> < <br br/>< /><br br/> /> Favorite Sport: <select name= sport > Favorite Sport: <select name= sport > <option>Baseball</option> <option>Baseball</option> <option>Basketball</option> <option>Basketball</option> <option>Football</option> <option>Football</option> <option>Hockey</option> <option>Hockey</option> <option>Soccer</option> <option>Soccer</option> </select> </select> </ </fieldset fieldset> > < <br br/> /> <input type="submit" value="Click to Submit" /> <input type="submit" value="Click to Submit" /> </form> </form> </body> </body> </html> </html>
GROUPING LIST SELECTIONS <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> <form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"> Wines: <select name= wine > Wines: <select name= wine > < <optgroup optgroup label="White Wines"> label="White Wines"> <option>Chardonnay</option> <option>Chardonnay</option> <option>Pinot <option>Pinot Grigio Grigio</option> </option> <option>Sauvignon Blanc</option> <option>Sauvignon Blanc</option> </ </optgroup optgroup> > < <optgroup optgroup label="Red Wines"> label="Red Wines"> <option>Cabernet Sauvignon</option> <option>Cabernet Sauvignon</option> <option>Merlot</option> <option>Merlot</option> <option>Pinot Noir</option> <option>Pinot Noir</option> </ </optgroup optgroup> > </select> </select> <input type="submit" value="Click to Submit" /> <input type="submit" value="Click to Submit" /> </form> </form> </body> </body> </html> </html>
REAL WORLD: FORM VALIDATION <! <!DOCTYPE html> DOCTYPE html> <head> <head> <script> <script> function function validateForm validateForm() () { { if ( if (document.forms document.forms[" ["myForm myForm"]["name"].value==null || "]["name"].value==null || document.forms document.forms[" ["myForm myForm"]["name"].value=="") "]["name"].value=="") { { alert("Name must be filled out"); alert("Name must be filled out"); return false; return false; } } if ( if (document.forms document.forms[" ["myForm { { alert("Phone must be filled out"); alert("Phone must be filled out"); return false; return false; } } myForm"]["phone"].value==null || "]["phone"].value==null || document.forms document.forms[" ["myForm myForm"]["phone"].value=="") "]["phone"].value=="") if ( if (document.forms document.forms[" ["myForm { { alert("Email must be filled out"); alert("Email must be filled out"); return false; return false; } } myForm"]["email"].value==null || "]["email"].value==null || document.forms document.forms[" ["myForm myForm"]["email"].value=="") "]["email"].value=="") return true; return true; } } </script> </script> </head> </head> <html> <html> <body> <body> <form name=" <form name="myForm onsubmit onsubmit="return ="return validateForm Name: <input type="text" name="name" />< Name: <input type="text" name="name" /><br br/> Phone: <input type="text" name="phone" />< Phone: <input type="text" name="phone" /><br br/> E E- -mail: <input type="text" name="email" />< mail: <input type="text" name="email" /><br br/> <input type="submit" value="Click to Submit" /> <input type="submit" value="Click to Submit" /> </form> </form> </body> </body> </html> </html> myForm" action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post" " action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post" validateForm()" > ()" > /> /> />
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.
