1 / 21

Forms

Learn about the different HTML form controls and types such as text fields, password fields, radio buttons, checkboxes, selection lists, and buttons.

droot
Download Presentation

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. Forms

  2. Form • An HTML form is a section of a document containing normal content, special elements called controls (checkboxes, radio buttons, buttons, etc.), controls. • When a form is submitted, all fields on the form are being sent. • The <form> tag tells the browser where the form starts and ends with </form>. • You can add all kinds of HTML tags between the <form> and </form> tags.

  3. Controls • Controls • Users interact with forms through named controls. • control "control name" is given by its name attribute. • Each control has both an initial value and a current value, both of which are character strings.

  4. Control types • Text Fields • Password Field • Text Areas • Radio Buttons • Checkboxes • Selection List • Button • …….

  5. Forms • Text Fields • Text fields are used when the user to type letters, numbers, etc. in a form. • Eg: • First name: • <input type="text" name="firstname"> • <br> • Last name: • <input type="text" name="lastname">

  6. Forms • Password Field • <input type="password" /> defines a • egPassword: <input type="password" name="pwd" />

  7. Forms • Text AreasText areas are used for multiple-line text entry. • The default size of the text box is 1 row by 20 characters. • Change the size using the COLS and ROWS attributes. • example of a text area with a text box 40 characters wide by 7 rows • <TEXTAREA NAME="myarea" COLS="40" ROWS="7"> • </TEXTAREA>

  8. Forms • Radio Buttons • Radio Buttons are used when user to select one of a limited number of choices. • <input type="radio" name="sex" value="male”> Male • <br> • <input type="radio" name="sex" value="female"> Female

  9. Forms • Checkboxes • Checkboxes are used when the user to select one or more options of a limited number of choices. • <input type="checkbox" name="vehicle1" value="Bike">I have a bike • <br> • <input type="checkbox" name="vehicle2" value="Car">I have a car:

  10. Forms • The <select> tag is used to create a drop-down list. • <select>  <option value=“popo">popo</option>  <option value=“peepe">peepe</option>  <option value=“monu">momu</option>  <option value="akku">akku</option></select>

  11. Forms • Button • To create a button • three types of buttons • submit buttons: • reset buttons: • push buttons:

  12. Forms • Submit Button • submit buttons: When activated, a submit button submits a form. • A form may contain more than one submit button. • <input type="submit" /> defines a submit button. • A submit button is used to send form data to a server. • The data is sent to the page specified in the form's action attribute. • The file defined in the action attribute • <form name="input" action=“data.php" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>

  13. Forms • Reset button • reset buttons: When activated, a reset button resets all controls to their initial values. • Used to reset all values in the form • <input type=reset>

  14. Forms • push buttons: Push buttons have no default behavior. • Each push button may have client-side scripts associated with the element's event attributes. • When an event occurs (e.g., the user presses the button, releases it, etc.), the associated script is triggered. • <input type="button" name="bb" value="button">

  15. Forms • HTML Forms • A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. • The <form> tag is used to create an HTML form: • <form>.input elements.</form>

  16. Forms • actionURL Specifies where to send the form-data when a form is submitted • Method • get and post • Specifies the method to use when sending form-data • namename Specifies the name of a form • get  Adds the form-data to the URL in URL?name=value&name=value • post Sends the form-data as an HTTP post transaction

  17. Forms • <html> • <head> • <title>popo</title> • </head> • <body bgcolor=black> • <center> • <table border=0 width=600> • <tr><td colspan=4 align=center><font size=16 color= white>Registration Form • <tr><td colspan=4 bgcolor=brown>&nbsp; • <tr><td align= right><font color=white size=3>First Name • <td><input type= text> • <tr><td align= right><font color=white size=3>Last Name • <td><input type= text> • <tr><td align= right><font color=white size=3>Address • <td><textarea cols=50 rows=5></textarea> • <tr><td align= right><font color=white size=3>Sex • <td><input type= radio name =s><font color=white size=3>Male<input type= radio name =s><font color=white size=3>Female • <tr><td align= right rowspan=5><font color=white size=3>Hobby • <tr><td colspan=4><input type=checkbox> <font color=white size=3>Reading • <tr><td colspan=4><input type=checkbox> <font color=white size=3>Dancing • <tr><td colspan=4><input type=checkbox> <font color=white size=3>Sleeping • <tr><td colspan=4><input type=checkbox> <font color=white size=3>Watching TV • <tr><td align= right><font color=white size=3>State • <td><select>

  18. Forms • <option value=“popo">popo</option> • <option value=“peepe">peepe</option> • <option value=“monu">momu</option> • <option value="akku">akku</option> • </select> • <tr><td align= right><font color=white size=3>District • <td><select> • <option value=“popo">popo</option> • <option value=“peepe">peepe</option> • <option value=“monu">momu</option> • <option value="akku">akku</option> • </select> • <tr><td align= right><font color=white size=3>User Name • <td><input type= text> • <tr><td align= right><font color=white size=3>Password • <td><input type=password> • <tr><td align= right><font color=white size=3>Confirm Password • <td><input type=password> • <tr><td><td align= center><input type=submit>&nbsp;&nbsp;<input type=reset> • <tr><td colspan=4 bgcolor=brown>&nbsp; • </table> • </center> • </body> • </html>

  19. REDIRECT VIA SUBMIT • <FORM METHOD="GET" ACTION="index.htm" • <INPUT TYPE="submit" Name="redirect" VALUE="To Title Page"> • </FORM>

  20. SIMULATING BACK BUTTON • <FORM> • <INPUT TYPE="button" VALUE="Go Back" onClick="history.back()"> • </FORM>

  21. Forms

More Related