1 / 27

Forms

Forms. Making your HTML Page Interactive. Form Tag. First, tell the browser you are creating a Form <form></form> There are other attributes you can add, but we’ll just start with the basics. Your code should look like this:. <html> <head> <title>learning forms</title> </head> <body>

ovidio
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 Making your HTML Page Interactive

  2. Form Tag • First, tell the browser you are creating a Form • <form></form> • There are other attributes you can add, but we’ll just start with the basics.

  3. Your code should look like this: <html> <head> <title>learning forms</title> </head> <body> <form> </form> </body> </html>

  4. Types of input • You must define what type of input you are requiring your viewer to do • Text • Radio • Check • Simple Drop Down Boxes • Text Area

  5. Syntax • First define the input type • Next name the input • The last step will depend on which type of input you are using • For text, it will be size (how large to make the box to answer) • For radio and checkboxes, it will be value (what value the button has)

  6. Text Input • Text input is used to collect single line of text from the user like name, email address etc. It is the most commonly used input type.A text input item can be defined like this:<INPUT TYPE="TEXT“> TYPE="TEXT" attribute tells the browser that a single line text input box should be created.NAME="FirstName"  defines the name of the field. This name will be used at the server side to identify this input item. <input type=“text” name=“First Name”> SIZE="lengthChars“ is the length of the input text box, in number of characters. <input type=“text” name=“First Name” size=“30”>

  7. Let’s put it in a table <table width=“100%”> <tr> <td> <input type=“text” name=“First Name” size=“30”> </td> </tr> What would the next td probably be?

  8. Text Input <form>First name:<input type="text" name="firstname" size=20><br />Last name:<input type="text" name="lastname" size=30></form> Example 1 Notice that we put what the field should contain before defining the box after it.

  9. Radio Buttons You will use these when you only want your viewer to be able to make one choice. • <INPUT TYPE="RADIO" NAME="name" VALUE="valueOfThisItem"> • Buttons in the same set will have the same name. • For example, if you are asking someone to rate an item as excellent, good, fair, poor, the name of your buttons could be RATE. • Here’s an example: <INPUT TYPE="RADIO" NAME="rating" VALUE="excellent">Excellent !!! <BR>

  10. Radio Buttons • <input type="radio" name="sex" value="male"> Male<br ><input type="radio" name="sex" value="female">Female Example 2

  11. Checkboxes • Checkboxes are used when you want the user to select one or more options of a limited number of choices. • For example, if you wanted someone to choose which items they had previously bought from your company. • The name value will be the same for each checkbox: <INPUT TYPE="CHECKBOX" NAME=“product" VALUE="checkboxValue"> Here’s an example: <INPUT TYPE=“checkbox" NAME=“product" VALUE=“MP3">MP3 player

  12. Checkboxes I have a bike:<input type="checkbox" name="vehicle" value="Bike">Bike<br>I have a car:<input type="checkbox" name="vehicle" value="Car">Car <br>I have an airplane:<input type="checkbox" name="vehicle" value="Airplane">Airplane<br> Example 3

  13. Syntax for Drop Downs • A little different than the other inputs. • You use select and option value.

  14. Drop Downs • A drop down is a selectable list. • This time, you don’t have to use the <input form> tag. • Just use <select name=“category”>. • Then define each choice in the drop down use the <option value=“_____”>NAME </option> for each choice in the drop down • Finally, use the ending tag </select>.

  15. Simple Drop Down Boxes <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> Example 4

  16. Syntax for Textarea • Different still than the other input groups. • Textarea as a paired code is all you need. • <textarea></textarea> • You only define values or name it if you want to.

  17. Text Area • A user can write text in the text-area. In a text-area you can write an unlimited number of characters on multiple lines. <textarea rows=“10” cols=“30”> </textarea> This would give you 10 rows with about 30 characters each for a viewer to write comments.

  18. Text Areas <textarea rows=“10” cols=“30”> </textarea> Example 5

  19. Product Registration Page <table width=“50%”> <h1>product registration</h1> <Form name =Request> • <table width="50%" border="0"> • <tr><td>First Name</td><td><input width=“30”>Last Name<input size=30></tr> • <tr><td>Address<td> • <input size=70></tr> • <tr><td>City<td><input size=30></tr> • <tr><td>State<td><input size=2></tr> • <tr><td>Zip<td><input size=5></tr></table> • <br>

  20. Product Registration Radio Button <tr> <td>What item did you purchase?<br> <input type=“radio” value=“purchases” name=“CD>CD Player<br> <input type=“radio” value=“purchases” name=“tv>Television<br> <input type=“radio” value=“purchases” name=“phone”>Telephone<br> <input type=“radio” value=“purchases” name=“cell”>Cell Phone<br> <input type=“radio” value=“purchases” name=“computer”>Computer<br> </tr>

  21. Product Registration Dropdown • <select name=“products” • Option values are warranty, accessories, hands free and nothing extra, please • End with </select>

  22. Text area • 10 rows and 30 columns

  23. Next Lesson • In the next lesson, we will learn to create buttons to submit or send to an email address.

  24. Adding a Submit Button sent to email <form method="post" action="mailto:youremail@email.com"> <br><input type="submit" value="Send"> </form>

  25. Adding a submit button • <form method="get" action="http://address you want to link to"><input type="submit" value="click here"></form> • This is what it would look like: • Add color to your button: • <FORM METHOD="get" ACTION="http://www.lissaexplains.com"> <INPUT TITLE="submit" TYPE="submit" STYLE="background:#00ff00" VALUE="Click Here"></FORM>

  26. Your Turn • Creating a simple form for a guestbook. Please sign my guestbook. • Use the input type element. • Input types available: Textbox For a larger area textbox for comments, etc. Radio Buttons Checkboxes Drop Down Boxes Buttons to submit answers or reset form • You will create a link in your All About me page for visitors to sign your guestbook

  27. Your turn, AGAIN • Create an information form for the White Plains Alumni Association to use in planning future class reunions.

More Related