HTML input elements and forms. 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. What are some of the special input elements?. Text boxes
Share Presentation
Embed Code
Link
Download Presentation
special input elements
vanilla
logical group
input type
web server
multiple attribute specifies
shelby + Follow
Download Presentation
HTML input elements and 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.
Presentation Transcript
HTML input elements and forms SE-2840 Dr. Mark L. Hornick
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
What are some of the special input elements? • Text boxes • Textareas • (multi-line text boxes) • Radio buttons • Checkboxes • Menus • Pushbuttons • And others… SE-2840 Dr. Mark L. Hornick
Text boxes The title attribute specifies the text that appears in the tooltip The value attribute specifies the text that initially appears “readonly” means that the text cannot be modified while “disabled” means that the text box cannot be selected type=password indicates that the browser should display the input with neutral characters See http://www.w3schools.com/tags/tag_input.asp SE-2840 Dr. Mark L. Hornick
name vs. id• When applied to form elements, name and id mean have separate meanings • The id is a CSS style id • The element is usually accessed in JavaScript via the id • The value of name is the element’s object name • The element’s can also be accessed via its name from JavaScript, but id’s are usually used instead • The name of an element (along with it’s value) is passed to a server when the form containing the element is submitted. The id is not. • The name and id are usually the same CS-4220 Dr. Mark L. Hornick
Text areas The title attribute is used by a tooltip to provide an indication of the purpose of the field State your opinion here: The rows attribute specifies the number of rows occupied by the field, while cols specifies the width SE-2840 Dr. Mark L. Hornick
Radio buttons 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
Checkboxes SE-2840 Dr. Mark L. Hornick
Menus The select element creates a menu of options Only one option at a time can be selected unless the multiple attribute specifies “multiple” SE-2840 Dr. Mark L. Hornick
Cascading Menus The optgroup element organizes logical groups of options CS-4220 Dr. Mark L. Hornick
Buttons The submit pushbutton sends all data in the fields to the server specified in the action attribute of the form The reset pushbutton resets all fields in the form to their original values The button pushbutton doesn't do anything without scripting The image pushbutton functions like the submit pushbutton An alternate way of specifying a submit button using a button element SE-2840 Dr. Mark L. Hornick
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
A data will be submitted to a web server when the submit event takes place • A First: Last: SE-2840 Dr. Mark L. Hornick
Required attributes of the back to later The action attribute specifies what happens when the form is submitted. For now, we’ll just use an empty string for the action. The opening The required action attribute normally specifies the url of the resource that will receive the form’s data SE-2840 Dr. Mark L. Hornick
BTW: What happens when forms are submitted? 1) You browse to a webpage containing forms and fill it out. 3)The server receives the form data and passes it on to a resource for processing. 2)The browser packages the data in the form and sends it to the web server. CGIWebApp Web Browser 4) The Web application generates a response and sends it to the browser. Web Server SE-2840 Dr. Mark L. Hornick
Form validation on Submit The onsubmit attribute of a form specifies the JavaScript method that will be called when the submit button is pressedIf checkForm() returns “true”, the data within the form’s elements is submitted to the url specified by the action attribute. If checkForm() returns “false”, no action is taken and no communication to the server occurs (saving time). SE-2840 Dr. Mark L. Hornick
Related
More by User
INPUT FORMS
INPUT FORMS BOOK DEFINITIONS WEB PAGE A PAGE MARKED UP WITH HTML ONLY HTML FORM INPUT FORM TO SEND DATA TO SERVER CAN BE DONE USING ONLY HTML (AS IN ASP) WEB FORM TWO SEGMENTS HTML TEMPLATE PAGE LAYOUT ASP.NET SERVER CONTROLS ASP.NET CODE INCLUDES PROCESSING LOGIC
