Module2.pdf
Document Details
Uploaded by Deleted User
Tags
Full Transcript
LEA L EARNING MODULE NO. 2 Title HTML FORMS, GRAPHICS Topic TML Form Elements, Input Types, Input Attributes, HTML H Graphics Ca...
LEA L EARNING MODULE NO. 2 Title HTML FORMS, GRAPHICS Topic TML Form Elements, Input Types, Input Attributes, HTML H Graphics Canvas & SVG T ime Frame 10 hrs. Introduction This module will introduce some html forms and graphics. Objectives At the end of this session, the students will be able to: 1. Explain concept of html forms and graphics 2. Familiarize the html form elements, type and attributes 3. Describe the HTML graphics canvas and SVG Learning Activities HTML Forms n HTML form is used to collect user input. The user input is most often sent A to a server for processing. The Element The HTML element is used to create an HTMLform for user input: . form elements . IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 30 LEA he T element is a container for different typesof input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. ll the different form elements are covered in the next chapter:HTML Form A Elements. The Element The HTML element is the most used form element. n A element can be displayed in many ways,depending on the type attribute. Here are some examples: Type Description Displays a single-line text input field D isplays a radio button (for selecting one of many choices) input < Displays a submit button (for submitting the form) type="submit"> input < Displays a clickable button type="button"> isplayes a file-select field and a "Browse" button for D file uploads All the different input types are covered in this chapter:HTML Input Types. Text Fields The defines a single-line inputfield for text input. Example A form with two text input fields: IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 31 LEA First name: Last name: ote:The form itself is not visible. Also note thatthe default width of an input N field is 20 characters. The Element Notice the use of the element in the exampleabove. The tag defines a label for many form elements. he element is useful for screen-reader users,because the T screen-reader will read out loud the label when the user focus on the input element. he element also help users who have difficultyclicking on very small T regions (such as radio buttons or checkboxes) - because when the user clicks the text within the element, it toggles theradio button/checkbox. he forattribute of the tag should be equalto the idattribute of T the element to bind them together. Radio Buttons IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 32 LEA The defines a radio button. Radio buttons let a user select ONE of a limited number of choices. Example A form with radio buttons: Male Female Other The Submit Button he defines a button for submittingthe form data to a T form-handler. he form-handler is typically a file on the server with a script for processing T input data. The form-handler is specified in the form's a ctionattribute. Example A form with a submit button: First name: Last name: IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 33 LEA Try it Yourself » The Action Attribute he actionattribute defines the action to be performedwhen the form is T submitted. sually, the form data is sent to a file on the server when the user clicks on the U submit button. I n the example above, the form data is sent to a file called "action_page.php". This file contains a server-side script that handles the form data: If the actionattribute is omitted, the action isset to the current page. The Target Attribute he targetattribute specifies where to display theresponse that is received T after submitting the form. The targetattribute can have one of the followingvalues: IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 34 LEA Value Description _blank The response is displayed in a new window or tab _self The response is displayed in the same frame _parent The response is displayed in the parent frame _top The response is displayed in the full body of the window framename The response is displayed in a named iframe he default value is _selfwhich means that the responsewill open i the current T window. Example Here, the submitted result will open in a new browser tab: < f orm action ="/action_page.php" target ="_blank"> Try it Yourself » The Method Attribute The methodattribute specifies the HTTP method touse used when submitting the form data. he form-data can be sent as URL variables (with m ethod="get")or as HTTP post transaction T (with method="post"). The default HTTP method when submitting form data is GET. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 35 LEA Example This example uses the GET method when submitting the form data: < f orm action ="/action_page.php" method ="get"> Try it Yourself » Example This example uses the POST method when submitting the form data: < f orm action ="/action_page.php" method ="post"> Try it Yourself » Notes on GET: Appends the form data to the URL, in name/value pairs EVER use GET to send sensitive data! (the submitted form data is visible in the URL!) N The length of a URL is limited (2048 characters) Useful for form submissions where a user wants to bookmark the result GET is good for non-secure data, like query strings in Google Notes on POST: Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL) P OST has no size limitations, and can be used to send large amounts of data. Form submissions with POST cannot be bookmarked Tip:Always use POST if the form data contains sensitiveor personal information! The Name Attribute Each input field must have a nameattribute to besubmitted. If the nameattribute is omitted, the value of thatinput field will not be sent at all. Example This example will not submit the value of the "First name" input field: First name: IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 36 LEA < i nput type ="submit" value ="Submit"> Try it Yourself » Exercise: In the form below, add an input field with the type "button" and the value "OK". < > List of All Attributes Attribute Description a ccept-charse Specifies the character encodings used for form submission t action Specifies where to send the form-data when a form is submitted autocomplete Specifies whether a form should have autocomplete on or off enctype S pecifies how the form-data should be encoded when submitting it to the server (only for method="post") method Specifies the HTTP method to use when sending form-data name Specifies the name of the form novalidate Specifies that the form should not be validated when submitted rel Specifies the relationship between a linked resource and the current document target Specifies where to display the response that is received after submitting the form IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 37 LEA HTML Form Elements The HTML Elements he HTML element can contain one or more ofthe following form T elements: input> < The Element One of the most used form element is the element. he element can be displayed in several ways,depending on T the typeattribute. Example < l abel for ="fname"> First name: Try it Yourself » ll the different values of the t ypeattribute arecovered in the next A chapter: H TML Input Types. The Element IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 38 LEA The element defines a label for several formelements. he element is useful for screen-reader users,because the T screen-reader will read out loud the label when the user focus on the input element. he element also help users who have difficultyclicking on very small T regions (such as radio buttons or checkboxes) - because when the user clicks the text within the element, it toggles theradio button/checkbox. he forattribute of the tag should be equalto the idattribute of T the element to bind them together. The Element The element defines a drop-down list: Example < l abel for ="cars"> Choose a car: Volvo Saab Fiat Audi Try it Yourself » The elements defines an option that can beselected. By default, the first item in the drop-down list is selected. To define a pre-selected option, add the s electedattributeto the option: Example < o ption value="fiat" selected > Fiat Try it Yourself » Visible Values: Use the s izeattribute to specify the number of visiblevalues: IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 39 LEA Example < l abel for ="cars"> Choose a car: Volvo Saab Fiat Audi Try it Yourself » Allow Multiple Selections: Use the m ultipleattribute to allow the user to selectmore than one value: Example < l abel for ="cars"> Choose a car: Volvo Saab Fiat Audi Try it Yourself » The Element The element defines a multi-line inputfield (a text area): Example < t extarea name="message" rows ="10" cols ="30"> The cat was playing in the garden. Try it Yourself » The rowsattribute specifies the visible number oflines in a text area. The colsattribute specifies the visible width ofa text area. This is how the HTML code above will be displayed in a browser: IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 40 LEA You can also define the size of the text area by using CSS: Example < t extarea name="message" style ="width:200px; height:600px;"> The cat was playing in the garden. Try it Yourself » The Element The element defines a clickable b utton: Example < b utton type ="button" onclick ="alert('Hello World!')"> Click Me! Try it Yourself » This is how the HTML code above will be displayed in a browser: ote:Always specify the typeattribute for the buttonelement. Different N browsers may use different default types for the button element. The and Elements IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 41 LEA The element is used to group related datain a form. The element defines a caption for the element. Example Personalia: First name: Last name: Try it Yourself » The Element he element specifies a list of pre-definedoptions for T an element. Users will see a drop-down list of the pre-defined options as they input data. he listattribute of the element, must referto the i dattribute of T the element. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 42 LEA Example < option value="Firefox"> < option value="Opera"> Try it Yourself » The Element he element represents the result of a calculation(like one performed T by a script). Example Perform a calculation and show the result in an element: < f orm action ="/action_page.php" oninput ="x.value=parseInt(a.value)+parseInt(b.value)"> 0 100 + = Try it Yourself » IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 43 LEA HTML Form Elements Tag Description Defines an HTML form for user input Defines an input control Defines a multiline input control (text area) Defines a label for an element Groups related elements in a form IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 44 LEA Defines a caption for a element Defines a drop-down list Defines a group of related options in a drop-down list Defines an option in a drop-down list Defines a clickable button Specifies a list of pre-defined options for input controls Defines the result of a calculation For a complete list of all available HTML tags, visit our H TML Tag Reference. HTML Input Types Here are the different input types you can use in HTML: input < type="button"> IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 45 LEA input < type="month"> Tip: The default value of the typeattribute is "text". Input Type Text defines a single-line text inputfield: Example First name: Last name: Try it Yourself » Input Type Password IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 46 LEA defines a password field: Example Username: Password: Try it Yourself » The characters in a password field are masked (shown as asterisks or circles). Input Type Submit defines a button for s ubmittingformdata to a f orm-handler. he form-handler is typically a server page with a script for processing input T data. The form-handler is specified in the form's a ctionattribute: Example First name: Last name: Try it Yourself » IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 47 LEA I f you omit the submit button's value attribute, the button will get a default text: Example First name: Last name: Try it Yourself » Input Type Reset defines a r eset buttonthat willreset all form values to their default values: Example First name: Last name: Try it Yourself » IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 48 LEA Input Type Radio defines a r adio button. Radio buttons let a user select ONLY ONE of a limited number of choices: Example Male Female Other Try it Yourself » Input Type Checkbox defines a checkbox. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 49 LEA heckboxes let a user select ZERO or MORE options of a limited number of C choices. Example I have a bike I have a car I have a boat Try it Yourself » Input Type Button defines a b utton: Example < i nput type ="button" onclick ="alert('Hello World!')" value ="Click Me!"> Try it Yourself » Input Type Color The is used for input fieldsthat should contain a color. Depending on browser support, a color picker can show up in the input field. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 50 LEA Example Select your favorite color: Try it Yourself » Input Type Date The is used for input fields thatshould contain a date. Depending on browser support, a date picker can show up in the input field. Example Birthday: Try it Yourself » You can also use the m inand m axattributes to addrestrictions to dates: Example Enter a date before 1980-01-01: Enter a date after 2000-01-01: Try it Yourself » Input Type Datetime-local he specifies a dateand time input field, with no T time zone. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 51 LEA Depending on browser support, a date picker can show up in the input field. Example Birthday (date and time): Try it Yourself » Input Type Email he is used for input fieldsthat should contain an e-mail T address. epending on browser support, the e-mail address can be automatically D validated when submitted. ome smartphones recognize the email type, and add ".com" to the keyboard S to match email input. Example Enter your email: Try it Yourself » Input Type File he defines a file-select fieldand a "Browse" button for file T uploads. Example Select a file: IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 52 LEA Try it Yourself » Input Type Month The allows the user to selecta month and year. Depending on browser support, a date picker can show up in the input field. Example Birthday (month and year): Try it Yourself » Input Type Number The defines a n umericinputfield. You can also set restrictions on what numbers are accepted. he following example displays a numeric input field, where you can enter a T value from 1 to 5: Example Quantity (between 1 and 5): Try it Yourself » Input Restrictions Here is a list of some common input restrictions: IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 53 LEA Attribute Description checked pecifies that an input field should be pre-selected when the pa S loads (for type="checkbox" or type="radio") disabled Specifies that an input field should be disabled max Specifies the maximum value for an input field maxlength Specifies the maximum number of character for an input field min Specifies the minimum value for an input field pattern Specifies a regular expression to check the input value against readonly Specifies that an input field is read only (cannot be changed) required Specifies that an input field is required (must be filled out) size Specifies the width (in characters) of an input field step Specifies the legal number intervals for an input field IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 54 LEA value Specifies the default value for an input field You will learn more about input restrictions in the next chapter. he following example displays a numeric input field, where you can enter a T value from 0 to 100, in steps of 10. The default value is 30: Example Quantity: Try it Yourself » Input Type Range he defines a control for enteringa number whose exact T value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the m in, max, and s tepattributes: Example Volume (between 0 and 50): Try it Yourself » Input Type Search he is used for search fields(a search field behaves like a T regular text field). IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 55 LEA Example Search Google: Try it Yourself » Input Type Tel he is used for input fields thatshould contain a telephone T number. Example Enter your phone number: Try it Yourself » Input Type Time The allows the user to selecta time (no time zone). Depending on browser support, a time picker can show up in the input field. Example Select a time: Try it Yourself » IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 56 LEA Input Type Url The is used for input fields thatshould contain a URL address. epending on browser support, the url field can be automatically validated D when submitted. ome smartphones recognize the url type, and adds ".com" to the keyboard to S match url input. Example Add your homepage: Try it Yourself » Input Type Week The allows the user to selecta week and year. Depending on browser support, a date picker can show up in the input field. Example Select a week: Try it Yourself » Exercise: In the form below, add an input field for text, with the name "username". < > IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 57 LEA HTML Input Type Attribute Tag Description Specifies the input type to display HTML Input Attributes This chapter describes the different attributes for the HTML element. The value Attribute The input v alueattribute specifies an initial valuefor an input field: Example Input fields with initial (default) values: First name: Last name: Try it Yourself » The readonly Attribute The input r eadonlyattribute specifies that an inputfield is read-only. read-only input field cannot be modified (however, a user can tab to it, A highlight it, and copy the text from it). The value of a read-only input field will be sent when submitting the form! IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 58 LEA Example A read-only input field: First name: Last name: Try it Yourself » The disabled Attribute The input d isabledattribute specifies that an inputfield should be disabled. A disabled input field is unusable and un-clickable. The value of a disabled input field will not be sent when submitting the form! Example A disabled input field: First name: Last name: Try it Yourself » The size Attribute he input s izeattribute specifies the visible width,in characters, of an input T field. The default value for sizeis 20. ote:The sizeattribute works with the followinginput types: text, search, tel, N url, email, and password. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 59 LEA Example Set a width for an input field: First name: PIN: Try it Yourself » The maxlength Attribute he input m axlengthattribute specifies the maximumnumber of characters T allowed in an input field. ote:When a maxlengthis set, the input field willnot accept more than the N specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code. Example Set a maximum length for an input field: First name: PIN: Try it Yourself » The min and max Attributes he input m inand m axattributes specify the minimumand maximum values for T an input field. he minand m axattributes work with the followinginput types: number, range, T date, datetime-local, month, time and week. Tip:Use the max and min attributes together to createa range of legal values. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 60 LEA Example Set a max date, a min date, and a range of legal values: Enter a date before 1980-01-01: Enter a date after 2000-01-01: Quantity (between 1 and 5): Try it Yourself » The multiple Attribute he input m ultipleattribute specifies that the useris allowed to enter more than T one value in an input field. The multipleattribute works with the following inputtypes: email, and file. Example A file upload field that accepts multiple values: Select files: Try it Yourself » The pattern Attribute he input p atternattribute specifies a regular expressionthat the input field's T value is checked against, when the form is submitted. he patternattribute works with the following inputtypes: text, date, search, T url, tel, email, and password. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 61 LEA Tip:Use the global t itleattribute to describe thepattern to help the user. Tip:Learn more about r egular expressionsin our JavaScripttutorial. Example n input field that can contain only three letters (no numbers or special A characters): Country code: Try it Yourself » The placeholder Attribute he input p laceholderattribute specifies short ahint that describes the expected T value of an input field (a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. he placeholderattribute works with the followinginput types: text, search, url, T tel, email, and password. Example An input field with a placeholder text: Enter a phone number: Try it Yourself » The required Attribute he input r equiredattribute specifies that an inputfield must be filled out before T submitting the form. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 62 LEA he requiredattribute works with the following inputtypes: text, search, url, tel, T email, password, date pickers, number, checkbox, radio, and file. Example A required input field: Username: Try it Yourself » The step Attribute The input s tepattribute specifies the legal numberintervals for an input field. Example: if step="3", legal numbers could be -3, 0, 3, 6, etc. ip:This attribute can be used together with themax and min attributes to T create a range of legal values. he stepattribute works with the following inputtypes: number, range, date, T datetime-local, month, time and week. Example An input field with a specified legal number intervals: Points: Try it Yourself » ote:Input restrictions are not foolproof, and JavaScriptprovides many ways N to add illegal input. To safely restrict input, it must also be checked by the receiver (the server)! The autofocus Attribute he input a utofocusattribute specifies that an inputfield should automatically T get focus when the page loads. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 63 LEA Example Let the "First name" input field automatically get focus when the page loads: First name: Last name: Try it Yourself » The height and width Attributes The input h eightand w idthattributes specify theheight and width of an element. ip:Always specify both the height and width attributesfor images. If height T and width are set, the space required for the image is reserved when the page is loaded. Without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load). Example Define an image as the submit button, with height and width attributes: First name: Last name: Try it Yourself » The list Attribute he input l istattribute refers to a elementthat contains pre-defined T options for an element. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 64 LEA Example An element with pre-defined values in a : < option value="Firefox"> < option value="Chrome"> < option value="Opera"> < option value="Safari"> Try it Yourself » The autocomplete Attribute he input a utocompleteattribute specifies whethera form or an input field should T have autocomplete on or off. utocomplete allows the browser to predict the value. When a user starts to A type in a field, the browser should display options to fill in the field, based on earlier typed values. he autocompleteattribute works with and thefollowing types: text, T search, url, tel, email, password, datepickers, range, and color. Example An HTML form with autocomplete on, and off for one input field: First name: Last name: Email: Try it Yourself » IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 65 LEA ip:In some browsers you may need to activate anautocomplete function for T this to work (Look under "Preferences" in the browser's menu). Exercise: In the input field below, add placeholder that says "Your name here". input type="text" < > HTML Form and Input Elements Tag Description Defines an HTML form for user input Defines an input control For a complete list of all available HTML tags, visit our H TML Tag Reference. HTML Input form* Attributes his chapter describes the different T orm* f attributesfor the HTML element. The form Attribute The input f ormattribute specifies the form the elementbelongs to. he value of this attribute must be equal to the id attribute of the T element it belongs to. Example An input field located outside of the HTML form (but still a part of the form): IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 66 LEA First name: < l abel for ="lname"> Last name: Try it Yourself » The formaction Attribute he input f ormactionattribute specifies the URL ofthe file that will process the T input when the form is submitted. Note:This attribute overrides the actionattributeof the element. The formactionattribute works with the followinginput types: submit and image. Example An HTML form with two submit buttons, with different actions: First name: Last name: Try it Yourself » The formenctype Attribute he input f ormenctypeattribute specifies how theform-data should be encoded T when submitted (only for forms with method="post"). Note:This attribute overrides the enctype attributeof the element. he formenctypeattribute works with the followinginput types: submit and T image. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 67 LEA Example form with two submit buttons. The first sends the form-data with default A encoding, the second sends the form-data encoded as "multipart/form-data": First name: Try it Yourself » The formmethod Attribute he input f ormmethodattribute defines the HTTP methodfor sending form-data to T the action URL. Note:This attribute overrides the method attributeof the element. The formmethodattribute works with the followinginput types: submit and image. he form-data can be sent as URL variables (method="get") or as an HTTP post T transaction (method="post"). Notes on the "get" method: T his method appends the form-data to the URL in name/value pairs This method is useful for form submissions where a user want to bookmark the result There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar) Notes on the "post" method: T his method sends the form-data as an HTTP post transaction Form submissions with the "post" method cannot be bookmarked The "post" method is more robust and secure than "get", and "post" does not have size limitations IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 68 LEA Example form with two submit buttons. The first sends the form-data with A method="get". The second sends the form-data with method="post": First name: Last name: Try it Yourself » The formtarget Attribute he input f ormtargeta attribute specifies a nameor a keyword that indicates T where to display the response that is received after submitting the form. Note:This attribute overrides the target attributeof the element. The formtargetattribute works with the followinginput types: submit and image. Example A form with two submit buttons, with different target windows: First name: Last name: Try it Yourself » The formnovalidate Attribute he input f ormnovalidateattribute specifies thatan element should not T be validated when submitted. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 69 LEA Note:This attribute overrides the novalidate attributeof the element. The formnovalidateattribute works with the followinginput types: submit. Example A form with two submit buttons (with and without validation): Enter your email: Try it Yourself » The novalidate Attribute The novalidateattribute is a attribute. hen present, novalidate specifies that all of the form-data should not be W validated when submitted. Example Specify that no form-data should be validated on submit: Enter your email: Try it Yourself » HTML Form and Input Elements Tag Description Defines an HTML form for user input Defines an input control IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 70 LEA For a complete list of all available HTML tags, visit our H TML Tag Reference. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 71
