1 / 43

HTML Forms

HTML Forms. Today’s Lecture. We will try to understand the utility of forms on Web pages We will find out about the various components that are used in a form We will become able to build a simple, interactive form. Interactive Forms (1).

vielka-cline
Download Presentation

HTML Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTMLForms

  2. Today’s Lecture • We will try to understand the utility of forms on Web pages • We will find out about the various components that are used in a form • We will become able to build a simple, interactive form

  3. Interactive Forms (1) • Without forms, a Web site is “read-only” – it just provides information to the user • Forms enable the user to provide information to the Web site. For example, the user can: • Perform searches on Web site • Give comments • Ask for info that is not available on the Website • Place order for goods and services

  4. Interactive Forms (2) • Can be simple or very complex • Can fill a whole page or just a single line • Can contain a single element or many • Are always placed between the <BODY> and </BODY> tags of a Web page

  5. Interactive Forms (3) • Are GUI-based • May contain: • Text fields • Check boxes • Buttons • Radio buttons • Scrollable lists

  6. Exampleof a simple, interactiveform

  7. Code for that Example <HTML> <HEAD> <TITLE>Send Email to me</TITLE> </HEAD> <BODY> <H1>Send Email to me</H1> Code for the instructions Code for the form </BODY> </HTML>

  8. Code for the Instructions <P>To send an eMail message to me:</P> <OL> <LI>Type your eMail address in the &quot;From&quot; field</LI> <LI>Type a short message in the &quot;Message&quot; field</LI> <LI>Press the &quot;Send eMail to me&quot; button</LI> </OL>

  9. Code for the Form <FORMname="sendEmail" method="post" action="sendMailScriptURL"> Elements of the form </FORM>

  10. <FORMname="sendEmail" method="post" action="sendMailScriptURL"> Elements of the form </FORM> name:Name given to the form method:Forms can be submitted through two alternate methods – GET & POST action:Specifies the URL that is accessed when the form is being submitted

  11. Exampleof a simple, interactiveform

  12. Elements of the Form (1) <P>From: <INPUTtype="text" name=“sender" size="50"></P> <P>Message: <INPUTtype="text"name="message" size="50"></P>

  13. Exampleof a simple, interactiveform

  14. Elements of the Form (2) <P><INPUTtype="hidden" name="receiver" value=“ihussain@imt.edu.pk"></P> <P><INPUTtype="hidden" name=“subject” value=“eMail from the form”></P> <P><INPUTtype="submit“ name="sendEmail" value="Send eMail to me"></P>

  15. Exampleof a simple, interactiveform

  16. <TEXTAREAname=“message” cols=“38” rows=“6”></TEXTAREA><TEXTAREAname=“message” cols=“38” rows=“6”></TEXTAREA>

  17. <FORM name="sendEmail" method="post" action=“sendMailScriptURL"> <table><tr> <td>From: </td> <td><INPUT type="text" name="sender" size="50"></td> </tr><tr> <td>To: </td> <td><INPUT type="text" name="receiver" size="50"></td> </tr><tr> <td>Subject: </td> <td><INPUT type="text" name="subject" size="50"></td> </tr><tr> <td valign="top">Message: </td> <td><TEXTAREA name="message" cols="38"rows="6"> </TEXTAREA></td> </tr><tr> <td colspan="2" align="right"> <INPUT type="submit" name="sendEmail" value="Send eMail"> </td> </tr></table> </FORM>

  18. <INPUT type=“text” name=“sender” size=“50” value=“your eMail address goes here”>

  19. Review of the Tags Used in Forms

  20. <FORM name=“nameOfTheForm” method=“get” or “post” action=“URL” > Elements of the form </FORM>

  21. Single-Line Text Input Field <INPUTtype=“text” name=“fieldName” size=“widthInCharacters” maxlength=“limitInCharacters” value=“initialDefaultValue”>

  22. Hidden Input <INPUTtype=“hidden” name=“fieldName”value=“value”>

  23. Submit Button Input <INPUTtype=“submit” name=“buttonName”value=“displayedText”>

  24. Multi-Line Text Input Area <TEXTAREAname=“areaName”cols=“widthInCharacters”rows=“numberOfLines”> initial default value </TEXTAREA>

  25. This was a review of the new tags (and associated attributes) that we have used in today’s examplesThere are many more tags that can be used in a formLet us take a look at a few

  26. <form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td> <input type="text" name="userName" size="10"> </td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr> <td colspan="2" align="right"> <input type="submit" name="login" value="Log me in"> </td> </tr></table></form>

  27. Password Input Field <INPUTtype=“password” name=“fieldName” size=“widthInCharacters” maxlength=“limitInCharacters” value=“initialDefaultValue”>

  28. <form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td> <input type="text" name="userName" size="10"> </td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr> <td colspan="2"> <input type="checkbox" name="remember" value="remember"> Remember my user name and password<br> </td> </tr><tr> <td colspan="2"> <input type="submit" name="login" value="Log me in"> </td> </tr></table></form>

  29. Checkbox Input Element <INPUTtype=“checkbox” name=“checkboxName” checked value=“checkedValue”>

  30. Office

  31. <form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td> <input type="text" name="userName" size="10"> </td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr> <td valign="top">Logging in from:</td> <td> <input type="radio" name="from" value="home"> Home<br> <input type="radio" name="from" value="office"> Home<br> <input type="radio" name="from" value="university" checked> University </td> </tr><tr> <td colspan="2" align="right"> <input type="submit" name="login" value="Log me in"> </td> </tr></table></form>

  32. Radio Button Input Element <INPUTtype=“radio” name=“radioButtonName” checked value=“selectedValue”>

  33. <form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td><input type="text" name="userName" size="10"></td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr> <td valign="top">Logging in from:</td> <td> <select size="2" name="from"> <option value="home"> Home <option value="office"> Office <option value="university" selected> University </select> </td> </tr><tr> <td colspan="2"> <input type="submit" name="login" value="Log me in"> </td> </tr></table></form>

  34. Select from a (Drop Down) List <SELECTname=“listName” size=“numberOfDisplayedChoices” multiple > <OPTION value=“value1”>text1 <OPTION value=“value2”selected>text2 <OPTION value=“value3”>text2 … … </SELECT>

  35. <formname=“uploadForm”method=“post”action=“uploadScript”<inputtype=“file”name=“uploadFile”enctype=“multipart/form-data”> <inputtype=“submit”name=“submit”value=“Upload” ></form>

  36. File Upload Input Element <INPUTtype=“file” name=“buttonName” value=“nameOfSelectedFile” enctype=“fileEncodingType”>

  37. Reset Button Input Element(Resets the contents of a form to default values) <INPUTtype=“reset” value=“displayedText”>

More Related