Presentation on theme: "SE-2840 Dr. Mark L. Hornick 1 HTML input elements and forms."— Presentation transcript:
SE-2840 Dr. Mark L. Hornick 1 HTML input elements and forms
SE-2840 Dr. Mark L. Hornick 2 A Form is a webpage containing HTML input elements that allow a user to enter information A form consists of static HTML markup… …as well as controls that permit input of various kinds of data
SE-2840 Dr. Mark L. Hornick 3 Text boxes Textareas (multi-line text boxes) Radio buttons Checkboxes Menus Pushbuttons And others… What are some of the special input elements?
SE-2840 Dr. Mark L. Hornick 4 Text boxes The value attribute specifies the text that initially appears type=password indicates that the browser should display the input with neutral characters “readonly” means that the text cannot be modified while “disabled” means that the text box cannot be selected The title attribute specifies the text that appears in the tooltip See http://www.w3schools.com/tags/tag_input.asp
SE-2840 Dr. Mark L. Hornick 6 Text areas State your opinion here: The rows attribute specifies the number of rows occupied by the field, while cols specifies the width The title attribute is used by a tooltip to provide an indication of the purpose of the field
SE-2840 Dr. Mark L. Hornick 7 Radio buttons Bands AM FM XM The fieldset element creates a logical group of controls The legend element may be used within a fieldset to provide a description of the group in the bounding box The label element is used to associate some descriptive text with a field
SE-2840 Dr. Mark L. Hornick 8 Checkboxes Condiments Pickles Onions Tomatoes
SE-2840 Dr. Mark L. Hornick 9 Menus Hamburger Cheeseburger Mushroom-Swiss burger Baconburger The select element creates a menu of options Only one option at a time can be selected unless the multiple attribute specifies “multiple”
CS-4220 Dr. Mark L. Hornick10 Cascading Menus Vanilla Chocolate Strawberry Vanilla Chocolate Strawberry The optgroup element organizes logical groups of options
SE-2840 Dr. Mark L. Hornick 11 Buttons Try again The image pushbutton functions like the submit pushbutton The reset pushbutton resets all fields in the form to their original values The submit pushbutton sends all data in the fields to the server specified in the action attribute of the form The button pushbutton doesn't do anything without scripting An alternate way of specifying a submit button using a button element
SE-2840 Dr. Mark L. Hornick 12 As with any HTML element, CSS rules can be used on form controls There is still debate regarding the best way to layout a form Laying out forms with CSS can be complex Forms are generally tabular in nature So using tables for layout control is still accepted When laying out a form using a table, nest the table within the form …but use CSS for all other aspects of styling a form (colors, fonts, widths, etc)
SE-2840 Dr. Mark L. Hornick 13 Fill out the fields below: Your name: Press Send to submit your information. First: Last: A element is used to contain input elements whose data will be submitted to a web server when the submit event takes place A ’s function is as a container of form controls, but a can contain any web content …as well as a new set of elements that can only nest inside a More than one form can be placed on a single webpage
SE-2840 Dr. Mark L. Hornick 14 Required attributes of the element that we’ll get back to later … The opening tag – all form elements go between the opening and closing tag. The required action attribute normally specifies the url of the resource that will receive the form’s data The action attribute specifies what happens when the form is submitted. For now, we’ll just use an empty string for the action.
SE-2840 Dr. Mark L. Hornick 15 BTW: What happens when forms are submitted? Web Browser Web Server 1) You browse to a webpage containing forms and fill it out. 2)The browser packages the data in the form and sends it to the web server. 3)The server receives the form data and passes it on to a resource for processing. 4) The Web application generates a response and sends it to the browser. CGI Web App
SE-2840 Dr. Mark L. Hornick 16 Form validation on Submit