Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Ch. 4 Web Page Design Forms Mr. Ursone Understanding Forms Form: Interactive elements that provide a way for the Web site visitor to interact with the site Web Master: person who runs the website How do you (Web Master) receive this information??? 3 Ways Get Method: sends data with URL. Not widely used – format and amount of info issues Post Method: sends data to the application with no limits. Data is invisible to the visitor E-mail Method: Data is sent to an email account. This is what we will use. Form Tags <input> tag: collects data from check boxes, radio buttons, single-line text fields, form/image buttons, and passwords. <select> tag: collects data from lists and popup menus. <textarea> tag: collects the data from multiline text fields. Property Inspector Form Properties Form Name: Name Action: Contains the mailto address Target: Specifies the window or frame in which to display the data after processing. Blank: opens the link in a new browser window Self: opens the destination document (link) in the same window Parent & Top are other options (We will discuss in the future) Can also be used for internal and external links Method: Method by which the form data is transferred to the server ENCTYPE: We will use text/plain. It enables the data to be transmitted in a readable format instead of as one long string. Forms and Web Pages A typical form is composed of form objects Form objects: text box, check box, radio buttons, list, menu, or other buttons. Other Buttons Submit Reset Command Insert Bar Forms Tab Check Form Jump Box Menu Radio Group Text Text Area File Field List/ Image Menu Field Field Radio Button Button Buttons on the Inset Bar Form Category Buttons on the Insert Bar Forms Tab Buttons on the Insert Bar Forms Tab Form: Inserts a form into the Document window Text Field: Accepts any type of alphanumeric text entry Text Area: Provides a multiline text entry field Check box: Allows multiple responses in a single group of options, letting the user select as many options as apply Radio Button: Represents an exclusive choice; only one item in a group of buttons can be selected Radio Group: Represents a group of radio buttons List/Menu: List displays option values within a scrolling list that allows users to select multiple options; Menu displays the option values in a pop-up menu that allows users to select only a single item. Buttons on the Insert Bar Forms Tab Jump Menu: Special form of a pop-up menu that lets the viewer link to another document or file Image Field: Creates a custom, graphical button Button: Performs actions when clicked; Submit and Reset buttons send data to the server and clear the form fields File Field: Allows users to browse to a file on their computers and upload the file as form data Label: Provides a way to associate the text label for a field with the field structurally Text Field Property Inspector The Property Inspector changes for each Form element. Here is what it looks like for a text field element. Character Width Field Type Class Text field name Maximum characters Initial Value Text Field Property Inspector A form object in which users enter a response Char Width: max number of characters that can be displayed Max Chars: max number of characters that can be entered. Type: Can be single-line, multiple-line, or password Single-line: single word or short phrase response Multiple-line: Provides a larger text area to enter a response. You can change settings to meet your needs Password: single line. When a user types in a password field, asterisks or bullets replace the text as a security precaution. Init Val: Assigns the value that is displayed in the field when the form first loads Class: Establishes an attribute used with CSS Horizontal Rule Horizontal rule (or line) is useful for organizing information and visually separating text and objects. The HTML tag for a horizontal rule is <hr> To insert a horizontal rule Go to the Insert Menu – HTML – Horizontal rule You can change attributes for the rule in the Property inspector. Good To Know An underscore is an acceptable special character in a form naming convention. Forms can contain various objects that enable user interaction and are the mechanisms that allow users to input data. If the Max Chars field is left blank, a user can enter any amount of text in a text field. The Char Width field default for text boxes is 20 characters. Good To Know You can use a jump menu to create links to documents in your Web site, graphics, documents on other Web sites, email links, or any file that can be opened in a browser. Pop-up menu (Drop-down menu): Offers visitors a range of choices. The Action text box of the Property Inspector contains the mailto address or specifies the URL to the dynamic page or script that will process the form. The Submit button on a form will process a script. The Reset button on a form will clear the form.