1 / 24

Tutorial 9 Creating Forms

Tutorial 9 Creating Forms. Objectives. Create an HTML form Create fields for text Create text boxes Organize form controls. Objectives. Create radio buttons, check boxes, and list boxes Create menus in a group Create methods for sending data and clearing form fields

rusk
Download Presentation

Tutorial 9 Creating 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. Tutorial 9Creating Forms

  2. Objectives • Create an HTML form • Create fields for text • Create text boxes • Organize form controls New Perspectives on Blended HTML, XHTML, and CSS

  3. Objectives • Create radio buttons, check boxes, and list boxes • Create menus in a group • Create methods for sending data and clearing form fields • Create command buttons New Perspectives on Blended HTML, XHTML, and CSS

  4. How Data is Collected and Processed • An HTML form is a collection of HTML elements used to gather data that a user enters online • The form handler runs on a Web server and processes the form when the user clicks the Submit button • The form handler runs a script • Written in a scripting language • Data might be stored in a database New Perspectives on Blended HTML, XHTML, and CSS

  5. Creating the Form • To create a form, enter the following code: <form id="idvalue" method="methodtype" action="script_url"></form> where idvalue is the name of the form, methodtype is either get or post, and script_url is the location on the file server where the script will be run when the form is submitted. New Perspectives on Blended HTML, XHTML, and CSS

  6. Creating the Form • The action attribute and its value identify the location on the server and the name of the script that will run when the user clicks the Submit button in the form • The method attribute and its value follow the action attribute and its value New Perspectives on Blended HTML, XHTML, and CSS

  7. Determining the Type of Input • The user enters data into each field in the form based on prompting text • The label element is used to display prompting text on the screen • for attribute • Label text • The input element is used to determine the type of data your control will collect • type attribute New Perspectives on Blended HTML, XHTML, and CSS

  8. Creating Text Boxes • To create a text box, use the following code: <input type="texttype" id=“id" value="initialvalue" size="sizevalue" maxlength="maxvalue" /> where texttype is either text or password, initialvalue is the default data that appears in the field, sizevalue is the width of the box in characters, and maxvalue is the maximum number of characters that a user can type in the field New Perspectives on Blended HTML, XHTML, and CSS

  9. Organizing Form Controls • The fieldset element groups a series of related form elements • legend element • To organize form elements using the fieldset and legend tags, enter the following code: <fieldset id="description"><legend>legendtext</legend> form_elements </fieldset> where description is a description of the fieldset content, legendtext is the text for the legend, and form_elements are the controls you want to group together New Perspectives on Blended HTML, XHTML, and CSS

  10. Creating Radio Buttons • To create radio buttons, enter the following code for each one: <input type="radio" name="name" id="id" value="field_data" /> where radio is the value of the type attribute, name identifies the corresponding field in the database, id associates the field with the “for” attribute in the label element, and field_data is the data that will be sent to the appropriate field in the database if the button is selected • To specify that a radio button is checked by default, add the attribute and value of checked="checked" to the input tag code New Perspectives on Blended HTML, XHTML, and CSS

  11. Creating Radio Buttons New Perspectives on Blended HTML, XHTML, and CSS

  12. Creating Check Boxes • To create check boxes, enter the following code: <input type="checkbox" name=“name” id=“id” value="data" /> where checkbox is the value for the type attribute, name identifies the check box field with a field in the database, id associates the field with the “for” attribute in the label element, and data is the data that will be sent to the database if the check box is selected • To specify that a check box is checked by default, add the attribute and value of checked="checked" to the input tag code New Perspectives on Blended HTML, XHTML, and CSS

  13. Creating Check Boxes New Perspectives on Blended HTML, XHTML, and CSS

  14. Creating Check Boxes New Perspectives on Blended HTML, XHTML, and CSS

  15. Creating a Selection List • To create a selection list, enter the following code: <select name="name" id="name"> <option value="value1">optiontext</option> <option value="value2">optiontext2</option> </select> where name identifies a field in the database, id identifies the value for the “for” attribute in the label element, and value1 and value2 are choices in the option list New Perspectives on Blended HTML, XHTML, and CSS

  16. Creating a Selection List • To allow more than one item in the list to appear in the browser, use size="number“, where number is the number of items you want to display in the selection list. The default size value of 1 creates a drop-down list in which only one choice is visible • To allow the user to select more than one choice, use multiple="multiple"in the select tag code. • To make an option the default choice, use selected="selected" in the option tag code. New Perspectives on Blended HTML, XHTML, and CSS

  17. Creating a Selection List • To create an option group, enter the following code: <optgroup label="heading"> options . . . </optgroup> where heading is the name of the heading for the option group, and options are the options in the option list New Perspectives on Blended HTML, XHTML, and CSS

  18. Creating a Selection List New Perspectives on Blended HTML, XHTML, and CSS

  19. Creating a Selection List New Perspectives on Blended HTML, XHTML, and CSS

  20. Creating a Selection List New Perspectives on Blended HTML, XHTML, and CSS

  21. Creating a Text Area • To create a text area, enter the following code: <textarea name="name" id="id“ rows="height_value” cols="width_value"></textarea> where name identifies the field in the database associated with the text area, id associates this field with the “for” attribute value in the label element, height_value is the number of rows, and width_value is the character width of the text area expressed as a number New Perspectives on Blended HTML, XHTML, and CSS

  22. Creating a Text Area New Perspectives on Blended HTML, XHTML, and CSS

  23. Submitting Data • To create a button, enter the following code: <button type="buttontype">buttontext</button> where buttontype is either submit or reset, and buttontext is the text that appears on the button • Optionally, you can include an image with alternate text, assign a value to the vertical-align property, and assign values to the width and height properties • If you are using an image with text, you can make the image appear to the left or the right of the button text • You can also use a background image for the button New Perspectives on Blended HTML, XHTML, and CSS

  24. Submitting Data New Perspectives on Blended HTML, XHTML, and CSS

More Related