Ashima Wadhwa Java Script And Forms

Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter on the Web include order forms, surveys, and applications Use JavaScript: 1.To make sure data was entered properly into the form fields 2.To perform other types of preprocessing before the data is sent to the server

Overview Of Forms Forms are used to: –Collect information from users –Transmit that information to a server for processing Some popular server-side scripting languages that are used to process form data include: –Common Gateway Interface (CGI) –Active Server Pages (ASP) –Java Server Pages (JSP)

The Element Designates form within a Web page Contains all the text and elements that make up a form You can include as many forms as you like on a Web page You cannot nest one form inside another form

Form Controls Four primary elements used within the element to create form controls: – The and elements: –Create input fields with which users interact

Text Boxes An element with a type of “text” ( ): –Creates simple text box that accepts a single line of text When used with a text box, the value attribute –specifies text to be used as the default value at the moment a form first loads

Password Boxes An element with a type of “password” ( ): –Creates a password box that is used for entering passwords or other types of sensitive data –Each character that a user types in a password box appears as an asterisk or bullet

Radio Buttons An element with a type of “radio” ( ): –Creates a group of radio buttons, or option buttons, from which the user can select only one value To create a group of radio buttons: –All radio buttons in the group must have the same name attribute

Radio Buttons (Cont.) Each radio button requires a value attribute: –Identifies unique value associated with that button Only one selected radio button in a group creates a name=value pair when a form is submitted to a Web server

Check Boxes An element with a type of “checkbox” ( ): –Creates a box that can be set to Yes (checked) or No (unchecked) Use check boxes: –When you want users to select whether or not to include a certain item –Or to allow users to select multiple values from a list of items

Check Boxes (Cont.) Include checked attribute in a check box element: –To set the initial value of the check box to Yes –If a check box is selected (checked) when a form is submitted Check box name=value pair is included in the form data –If a check box is not selected, a name=value pair is not included in the data submitted from the form

Selection Lists The element creates a selection list: –Presents users with fixed lists of options from which to choose –Options displayed in a selection list are created with elements

Selection Lists (Cont.) The element must appear within a block- level element such as the element The selection list can appear as –an actual list of choices –a dropdown menu Depending on the number of options in the list, a selection list can also include a scroll bar

Submit Buttons An element with a type of “submit” ( ): –Creates a submit button that transmits a form’s data to a Web server The action attribute of the element that creates the form determines to what URL the form is submitted

Reset Buttons An element with a type of “reset” ( ): –Creates a reset button that clears all form entries and resets each form element to the initial value specified by its value attribute Name attribute for a reset button is not required Text assigned to the reset button’s value attribute appears as the button label

TEXT FIELD Text Fields defines a one-line input field that a user can enter text into: First name: Last name: How the HTML code above looks in a browser: First name: Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Password Password Field defines a password field: Password: How the HTML code above looks in a browser: Password: Note: The characters in a password field are masked (shown as asterisks or circles). Password Field defines a password field: Password: How the HTML code above looks in a browser: Password: Note: The characters in a password field are masked (shown as asterisks or circles).

Radio Buttons defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: Male Female How the HTML code above looks in a browser: Male Female

Checkboxes defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. I have a bike I have a car How the HTML code above looks in a browser: I have a bike I have a car

Example First name: Last name: Male Female