Module2.pdf

‭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 HTML‬‭form for user input:‬ ‭‭ ‬ ‭.‬ ‭ form elements‬ ‭.‬ ‭ ‬ ‭ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 30‬ ‭LEA‬ ‭ he‬‭ T ‬‭element is a container for different types‬‭of 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 input‬‭field 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 that‬‭the default width of an input‬ N ‭field is 20 characters.‬ ‭The Element‬ ‭Notice the use of the ‭‬‭element in the example‬‭above.‬ ‭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 difficulty‬‭clicking on very small‬ T ‭regions (such as radio buttons or checkboxes) - because when the user clicks‬ ‭the text within the ‬‭‬‭element, it toggles the‬‭radio button/checkbox.‬ ‭ he ‬‭for‬‭attribute of the ‭‬‭tag should be equal‬‭to the ‬‭id‬‭attribute 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 submitting‬‭the 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‬ ction‬‭attribute.‬ ‭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 ‬‭action‬‭attribute defines the action to be performed‬‭when 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 ‬‭action‬‭attribute is omitted, the action is‬‭set to the current page.‬ ‭The Target Attribute‬ ‭ he ‬‭target‬‭attribute specifies where to display the‬‭response that is received‬ T ‭after submitting the form.‬ ‭The ‬‭target‬‭attribute can have one of the following‬‭values:‬ ‭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 ‬‭_self‬‭which means that the response‬‭will 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 ‬‭method‬‭attribute specifies the HTTP method to‬‭use 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 sensitive‬‭or personal information!‬ ‭The Name Attribute‬ ‭Each input field must have a ‬‭name‬‭attribute to be‬‭submitted.‬ ‭If the ‬‭name‬‭attribute is omitted, the value of that‬‭input 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 of‬‭the 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 ‬‭type‬‭attribute.‬ ‭Example‬ ‭‭ < l ‬abel‬ ‭for‬ ="fname">‬ ‭ First name:‬ ‭ ‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭ ll the different values of the ‭t‬ ype‬‭attribute are‬‭covered 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 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 difficulty‬‭clicking on very small‬ T ‭regions (such as radio buttons or checkboxes) - because when the user clicks‬ ‭the text within the ‬‭‬‭element, it toggles the‬‭radio button/checkbox.‬ ‭ he ‬‭for‬‭attribute of the ‭‬‭tag should be equal‬‭to the ‬‭id‬‭attribute 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 be‬‭selected.‬ ‭By default, the first item in the drop-down list is selected.‬ ‭To define a pre-selected option, add the ‭s‬ elected‬‭attribute‬‭to the option:‬ ‭Example‬ ‭‭ < o ‬ption‬ ‭value‬="fiat"‬ ‭ ‭selected‬ >‬ ‭Fiat‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭Visible Values:‬ ‭Use the ‭s‬ ize‬‭attribute to specify the number of visible‬‭values:‬ ‭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‬ ultiple‬‭attribute to allow the user to select‬‭more 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 input‬‭field (a text area):‬ ‭Example‬ ‭‭ < t ‬extarea‬ ‭name‬="message"‬ ‭ ‭rows‬ ="10"‬ ‭ ‭cols‬ ="30">‬ ‭ The cat was playing in the garden.‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭The ‬‭rows‬‭attribute specifies the visible number of‬‭lines in a text area.‬ ‭The ‬‭cols‬‭attribute specifies the visible width of‬‭a 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 ‬‭type‬‭attribute for the button‬‭element. 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 data‬‭in 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-defined‬‭options for‬ T ‭an ‭‬‭element.‬ ‭Users will see a drop-down list of the pre-defined options as they input data.‬ ‭ he ‬‭list‬‭attribute of the ‬‭‬‭element, must refer‬‭to the ‭i‬ d‬‭attribute 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 ‬‭type‬‭attribute is "text".‬ ‭Input Type Text‬ ‭defines a ‬‭single-line text input‬‭field‬‭:‬ ‬ ‭ ‭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 ‬ ‭ ‬ ubmitting‬‭form‬‭data 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‬ ction‬‭attribute:‬ ‭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 button‬‭that will‬‭reset 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 fields‬‭that 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 that‬‭should 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‬ in‬‭and ‭m‬ ax‬‭attributes to add‬‭restrictions 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 date‬‭and 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 fields‬‭that 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 field‬‭and 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 select‬‭a 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 ‬ umeric‬‭input‬‭field.‬ ‭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 entering‬‭a 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‬ tep‬‭attributes:‬ ‭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 that‬‭should contain a telephone‬ T ‭number.‬ ‭Example‬ ‬ ‭ ‬ ‭ Enter your phone number:‬ ‭ ‬ ‭ ‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭Input Type Time‬ ‭The ‬‭‬‭allows the user to select‬‭a 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 that‬‭should 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 select‬‭a 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‬ alue‬‭attribute specifies an initial value‬‭for an input field:‬ ‭Example‬ ‭Input fields with initial (default) values:‬ ‬ ‭ ‬ ‭ First name:‬ ‭ ‬ ‭ ‬ ‭ ‬ ‭ Last name:‬ ‭ ‬ ‭ ‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭The readonly Attribute‬ ‭The input ‭r‬ eadonly‬‭attribute specifies that an input‬‭field 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‬ isabled‬‭attribute specifies that an input‬‭field 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‬ ize‬‭attribute specifies the visible width,‬‭in characters, of an input‬ T ‭field.‬ ‭The default value for ‬‭size‬‭is 20.‬ ‭ ote:‬‭The ‬‭size‬‭attribute works with the following‬‭input 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‬ axlength‬‭attribute specifies the maximum‬‭number of characters‬ T ‭allowed in an input field.‬ ‭ ote:‬‭When a ‬‭maxlength‬‭is set, the input field will‬‭not 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‬ in‬‭and ‭m‬ ax‬‭attributes specify the minimum‬‭and maximum values for‬ T ‭an input field.‬ ‭ he ‬‭min‬‭and ‭m‬ ax‬‭attributes work with the following‬‭input types: number, range,‬ T ‭date, datetime-local, month, time and week.‬ ‭Tip:‬‭Use the max and min attributes together to create‬‭a 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‬ ultiple‬‭attribute specifies that the user‬‭is allowed to enter more than‬ T ‭one value in an input field.‬ ‭The ‬‭multiple‬‭attribute works with the following input‬‭types: email, and file.‬ ‭Example‬ ‭A file upload field that accepts multiple values:‬ ‬ ‭ ‬ ‭ Select files:‬ ‭ ‬ ‭ ‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭The pattern Attribute‬ ‭ he input ‭p‬ attern‬‭attribute specifies a regular expression‬‭that the input field's‬ T ‭value is checked against, when the form is submitted.‬ ‭ he ‬‭pattern‬‭attribute works with the following input‬‭types: text, date, search,‬ T ‭url, tel, email, and password.‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 61‬ ‭LEA‬ ‭Tip:‬‭Use the global ‭t‬ itle‬‭attribute to describe the‬‭pattern to help the user.‬ ‭Tip:‬‭Learn more about ‭r‬ egular expressions‬‭in our JavaScript‬‭tutorial.‬ ‭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‬ laceholder‬‭attribute specifies short a‬‭hint 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 ‬‭placeholder‬‭attribute works with the following‬‭input 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‬ equired‬‭attribute specifies that an input‬‭field must be filled out before‬ T ‭submitting the form.‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 62‬ ‭LEA‬ ‭ he ‬‭required‬‭attribute works with the following input‬‭types: 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‬ tep‬‭attribute specifies the legal number‬‭intervals 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 the‬‭max and min attributes to‬ T ‭create a range of legal values.‬ ‭ he ‬‭step‬‭attribute works with the following input‬‭types: 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 JavaScript‬‭provides 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‬ utofocus‬‭attribute specifies that an input‬‭field 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‬ eight‬‭and ‭w‬ idth‬‭attributes specify the‬‭height and width of an ‬‭‬ ‭ ‭element.‬ ‭ ip:‬‭Always specify both the height and width attributes‬‭for 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‬ ist‬‭attribute refers to a ‬‭‬‭element‬‭that 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‬ utocomplete‬‭attribute specifies whether‬‭a 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 ‬‭autocomplete‬‭attribute works with ‭‬‭and the‬‭following ‬‭‬‭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 an‬‭autocomplete 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 ‭attributes‬‭for the‬ ‭HTML ‬‭ ‬‭element.‬ ‭The form Attribute‬ ‭The input ‭f‬ orm‬‭attribute specifies the form the ‬‭‬‭element‬‭belongs 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‬ ormaction‬‭attribute specifies the URL of‬‭the file that will process the‬ T ‭input when the form is submitted.‬ ‭Note:‬‭This attribute overrides the ‬‭action‬‭attribute‬‭of the ‭‬‭element.‬ ‭The ‬‭formaction‬‭attribute works with the following‬‭input 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‬ ormenctype‬‭attribute specifies how the‬‭form-data should be encoded‬ T ‭when submitted (only for forms with method="post").‬ ‭Note:‬‭This attribute overrides the enctype attribute‬‭of the ‭‬‭element.‬ ‭ he ‬‭formenctype‬‭attribute works with the following‬‭input 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‬ ormmethod‬‭attribute defines the HTTP method‬‭for sending form-data to‬ T ‭the action URL.‬ ‭Note:‬‭This attribute overrides the method attribute‬‭of the ‭‬‭element.‬ ‭The ‬‭formmethod‬‭attribute works with the following‬‭input 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‬ ormtarget‬‭a attribute specifies a name‬‭or a keyword that indicates‬ T ‭where to display the response that is received after submitting the form.‬ ‭Note:‬‭This attribute overrides the target attribute‬‭of the ‭‬‭element.‬ ‭The ‬‭formtarget‬‭attribute works with the following‬‭input 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‬ ormnovalidate‬‭attribute specifies that‬‭an element should not‬ T ‭be validated when submitted.‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 69‬ ‭LEA‬ ‭Note:‬‭This attribute overrides the novalidate attribute‬‭of the ‭‬‭element.‬ ‭The ‬‭formnovalidate‬‭attribute works with the following‬‭input types: submit.‬ ‭Example‬ ‭A form with two submit buttons (with and without validation):‬ ‬ ‭ ‬ ‭ Enter your email:‬ ‭ ‬ ‭ ‬ ‭ ‬ ‭ ‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭The novalidate Attribute‬ ‭The ‬‭novalidate‬‭attribute 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‬