, , , , and . It covers essential attributes for form functionality and validation, including action, method, and input attributes like required and placeholder. The document aims to equip students with the skills to design and create fully functional HTML forms that effectively capture and validate user input.">, , , , and . It covers essential attributes for form functionality and validation, including action, method, and input attributes like required and placeholder. The document aims to equip students with the skills to design and create fully functional HTML forms that effectively capture and validate user input."> Address: [go: up one dir, main page] Include Form Remove Scripts Session Cookies Open navigation menuClose suggestionsSearchSearchenChange LanguageUploadSign inSign inDownload free for days0 ratings0% found this document useful (0 votes)4 views63 pagesModule 6 - HTML FormsThis document is a comprehensive guide on HTML forms, detailing their structure, purpose, and various elements such as <form>, <input>, <label>, <select>, and <textarea>. It covers essential attributes for form functionality and validation, including action, method, and input attributes like required and placeholder. The document aims to equip students with the skills to design and create fully functional HTML forms that effectively capture and validate user input.Uploaded byjenty1006AI-enhanced descriptionCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PDF, TXT or read online on ScribdDownload nowDownloadSave Module 6 - HTML Forms For LaterDownloadSaveSave Module 6 - HTML Forms For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReport0 ratings0% found this document useful (0 votes)4 views63 pagesModule 6 - HTML FormsThis document is a comprehensive guide on HTML forms, detailing their structure, purpose, and various elements such as <form>, <input>, <label>, <select>, and <textarea>. It covers essential attributes for form functionality and validation, including action, method, and input attributes like required and placeholder. The document aims to equip students with the skills to design and create fully functional HTML forms that effectively capture and validate user input.Uploaded byjenty1006AI-enhanced descriptionCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PDF, TXT or read online on ScribdDownload nowDownloadSave Module 6 - HTML Forms For LaterCarousel PreviousCarousel NextDownloadSaveSave Module 6 - HTML Forms For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReportDownload nowDownloadYou are on page 1/ 63SearchFullscreenWeb Systems and TechnologiesHTML FORMS Prepared by: John Ivan C. Maurat, MIT 1Intended Learning Outcomes:By the end of this module, students will be able to: ● Explain the structure and purpose of HTML form elements such as <form>, <input>, <label>, <select>, and <textarea>. ● Differentiate various input types (e.g., text, email, password, checkbox, radio, file) and their use cases in form development. ● Apply essential form attributes (action, method, enctype) and input attributes (required, placeholder, readonly, etc.) to improve form functionality and validation. ● Utilize the form attribute to link form controls to a <form> element when they are not nested within it. ● Design and create a fully functional HTML form that captures and validates user input effectively. 21.0 HTML Forms 3HTML Form• An HTML form is used to collect user input. The user input is most often sent to a server for processing. 4<form> Element• The HTML <form> element is used to create an HTML form for user input.• The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. 5<input> Element• The HTML <input> element is the most used form element.• An <input> element can be displayed in many ways, depending on the type attribute. 6Text Fields• The <input type="text"> defines a single-line input field for text input. 7Text Fields 8<label> Element• The <label> tag defines a label for many form elements.• The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.• The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.• The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together. 9Radio Buttons• The <input type="radio"> defines a radio button.• Radio buttons let a user select ONE of a limited number of choices. 10Radio Buttons 11Checkboxes• The <input type="checkbox"> defines a checkbox.• Checkboxes let a user select ZERO or MORE options of a limited number of choices. 12Checkboxes 13The Submit Button• The <input type="submit"> defines a button for submitting the form data to a form-handler.• The form-handler is typically a file on the server with a script for processing input data.• The form-handler is specified in the form's action attribute. 14The Submit Button 15Name Attribute for <input>• Notice that each input field must have a name attribute to be submitted.• If the name attribute is omitted, the value of the input field will not be sent at all. 16Name Attribute for <input> 172.0 HTML Forms Attribute 18The Action Attribute• The action attribute defines the action to be performed when the form is submitted.• Usually, the form data is sent to a file on the server when the user clicks on the submit button.• In the example below, the form data is sent to a file called "action_page.php". This file contains a server-side script that handles the form data: 19The Action Attribute Tip: If the action attribute is omitted, the action is set to the current page. 20The Target Attribute• The target attribute specifies where to display the response that is received after submitting the form.• The target attribute can have one of the following values: 21The Target Attribute 22The Method Attribute• The method attribute specifies the HTTP method to be used when submitting the form data.• The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").• The default HTTP method when submitting form data is GET. 23The Method Attribute 24The Method Attribute 25The Method AttributeNotes on GET: • Appends the form data to the URL, in name/value pairs • NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!) • 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 26The Method AttributeNotes on POST:• Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)• POST 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! 27The Autocomplete Attribute• The autocomplete attribute specifies whether a form should have autocomplete on or off.• When autocomplete is on, the browser automatically complete values based on values that the user has entered before. 28The Autocomplete Attribute 29The Novalidate Attribute• The novalidate attribute is a boolean attribute.• When present, it specifies that the form-data (input) should not be validated when submitted. 30The Novalidate Attribute 31The formnovalidate AttributeThe input formnovalidate attribute specifies that an <input> element should not be validated whensubmitted.Note: This attribute overrides the novalidate attribute of the <form> element.The formnovalidate attribute works with the following input types: submit. 323.0 HTML Forms Element 33The HTML <form> Elements• The HTML <form> element can contain one or more of the following form elements:• <input> <label>• <select> <textarea>• <button> <fieldset>• <legend> <datalist>• <output> <option> <optgroup> 34The <input> Element• One of the most used form elements is the <input> element.• The <input> element can be displayed in several ways, depending on the type attribute. 35The <input> Element• One of the most used form elements is the <input> element.• The <input> element can be displayed in several ways, depending on the type attribute. 36The <label> Element• The <label> element defines a label for several form elements.• The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.• The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.• The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together. 37The <select> Element• The <select> element defines a drop-down list: 38The <select> Element The <option> element defines an option that can be selected. By default, the first item in the drop-down list is selected. 39The <select> ElementTo define a pre-selected option, add the selected attribute to the option: 40The <select> ElementUse the size attribute to specify the number of visible values: 41The <select> ElementUse the multiple attribute to allow the user to select more than one value: 42The <textarea> ElementThe <textarea> element defines a multi-line input field (a text area): 43The <button> ElementThe <button> element defines a clickable button: 44The <fieldset> and <legend> ElementsThe <fieldset> element is used to group related data in a form.The <legend> element defines a caption for the <fieldset> element. 45The <datalist> ElementThe <datalist> element specifies a list of pre-defined options for an <input> element.Users will see a drop-down list of the pre-defined options as they input data.The list attribute of the <input> element, must refer to the id attribute of the <datalist> element. 46The <output> ElementThe <output> element represents the result of a calculation (like one performed by a script). 474.0 HTML Input Types 48Input Type Reset<input type="reset"> defines a reset button that will reset all form values to their default values: 49Input Type ColorThe <input type="color"> is used for input fields that should contain a color.Depending on browser support, a color picker can show up in the input field. 50Input Type DateThe <input type="date"> is used for input fields that should contain a date.Depending on browser support, a date picker can show up in the input field. 51Input Type DateYou can also use the min and max attributes to add restrictions to dates: 52Input Type Datetime-localThe <input type="datetime-local"> specifies a date and time input field, with no time zone.Depending on browser support, a date picker can show up in the input field. 53Input Type FileThe <input type="file"> defines a file-select field and a "Browse" button for file uploads. 545.0 HTML Input Attributes 55The disabled AttributeThe input disabled 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! 56The size AttributeThe input size attribute specifies the visible width, in characters, of an input field.The default value for size is 20.Note: The size attribute works with the following input types: text, search, tel, url, email, andpassword. 57The maxlength AttributeThe input maxlength attribute specifies the maximum number of characters allowed in an input field.Note: When a maxlength is set, the input field will not accept more than the specified number ofcharacters. However, this attribute does not provide any feedback. So, if you want to alert the user, youmust write JavaScript code. 58The min and max AttributesThe input min and max attributes specify the minimum and maximum values for an input field.The min and max attributes work with the following input types: number, range, date, datetime-local,month, time and week.Tip: Use the max and min attributes together to create a range of legal values. 59The pattern AttributeThe input pattern attribute specifies a regular expression that the input field's value is checked against,when the form is submitted.The pattern attribute works with the following input types: text, date, search, url, tel, email, andpassword. 60The placeholder AttributeThe input placeholder attribute specifies a short hint that describes the expected 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.The placeholder attribute works with the following input types: text, search, url, number, tel, email,and password. 61The required AttributeThe input required attribute specifies that an input field must be filled out before submitting the form.The required attribute works with the following input types: text, search, url, tel, email, password, datepickers, number, checkbox, radio, and file. 62END 63You might also likeScript Creation For A 2D Airfoil Meshing Using ICEM CFD On ANSYSPDFNo ratings yetScript Creation For A 2D Airfoil Meshing Using ICEM CFD On ANSYS30 pagesLecture 04PDFNo ratings yetLecture 0434 pagesjavascriptPDFNo ratings yetjavascript12 pagesLab Manual 03PDFNo ratings yetLab Manual 0319 pagesChapter 4PDFNo ratings yetChapter 434 pagesHTMLForm 3PDFNo ratings yetHTMLForm 332 pagesforms_htmlPDFNo ratings yetforms_html18 pages413-03PDFNo ratings yet413-0311 pagesHTML FormsPDFNo ratings yetHTML Forms95 pagesLesson 6 Forms in HTMLPDFNo ratings yetLesson 6 Forms in HTML48 pagesCSC336-WT Lec6 SlidesPDFNo ratings yetCSC336-WT Lec6 Slides21 pagesWorking with formsPDFNo ratings yetWorking with forms18 pages1588095951-formPDFNo ratings yet1588095951-form24 pagesweb tech-3rd--cse-- unit- III- FORMPDFNo ratings yetweb tech-3rd--cse-- unit- III- FORM16 pagesConquer Forms With HTML5 and CSS3PDFNo ratings yetConquer Forms With HTML5 and CSS396 pagesLab 02PDFNo ratings yetLab 0216 pagesHTML FORMS, Frame PDFPDFNo ratings yetHTML FORMS, Frame PDF29 pagesHtmlforms-Lecture 3PDFNo ratings yetHtmlforms-Lecture 365 pagesIntroduction To Web Technology HTML Day3PDFNo ratings yetIntroduction To Web Technology HTML Day324 pagesChapter03 HTML FormsPDFNo ratings yetChapter03 HTML Forms18 pagesWE LAB 1 - 2k18 (Part 2) - 2PDFNo ratings yetWE LAB 1 - 2k18 (Part 2) - 211 pagesChapter 2.part 2PDFNo ratings yetChapter 2.part 275 pagesHTML Forms - NotesPDFNo ratings yetHTML Forms - Notes5 pagesLecture 4 Notes (2) - 3999PDFNo ratings yetLecture 4 Notes (2) - 399912 pagesIntroduction_To_FormsPDFNo ratings yetIntroduction_To_Forms29 pagesChapter 3 Form and Event HandlingPDFNo ratings yetChapter 3 Form and Event Handling15 pagesForm in Html5PDFNo ratings yetForm in Html551 pagesLesson 6 Forms in HTMLPDFNo ratings yetLesson 6 Forms in HTML48 pages2nd Q. Week 7PDFNo ratings yet2nd Q. Week 733 pagesPart2in Unit1PDFNo ratings yetPart2in Unit140 pagesX Unit II Chapter 9PDFNo ratings yetX Unit II Chapter 913 pagesUnit 4 FormsPDFNo ratings yetUnit 4 Forms37 pagesweb programming lecture 2PDFNo ratings yetweb programming lecture 225 pagesHTML FormsPDFNo ratings yetHTML Forms44 pagesWINSEM2024-25_CBS3014_ETH_VL2024250505176_2025-01-03_Reference-Material-IPDFNo ratings yetWINSEM2024-25_CBS3014_ETH_VL2024250505176_2025-01-03_Reference-Material-I24 pagesWD Lecture 5-SupplementaryPDFNo ratings yetWD Lecture 5-Supplementary4 pageshtml_formsPDFNo ratings yethtml_forms33 pagesWIDT UNIT-IIPDFNo ratings yetWIDT UNIT-II47 pagesChapter 2-Lecture 3PDFNo ratings yetChapter 2-Lecture 357 pagesHTML Forms: Pat Morin COMP 2405PDFNo ratings yetHTML Forms: Pat Morin COMP 240520 pagesIWT LabSheet 4 FormsPDFNo ratings yetIWT LabSheet 4 Forms7 pagesWT-HTML & XHTML - Forms-04PDFNo ratings yetWT-HTML & XHTML - Forms-0432 pagesHTML Forms: The ElementPDFNo ratings yetHTML Forms: The Element10 pagesMaterial_cd02a502-c026-41df-859c-205a2b57c664PDFNo ratings yetMaterial_cd02a502-c026-41df-859c-205a2b57c66474 pagesSHORT NOTES FORM CONTROLS - FORM TAGS, FORM ATTRIBUTESPDFNo ratings yetSHORT NOTES FORM CONTROLS - FORM TAGS, FORM ATTRIBUTES3 pagesHTML Forms: © Krupa ShahPDFNo ratings yetHTML Forms: © Krupa Shah79 pagesLecture 3.2 HTML - FormsPDFNo ratings yetLecture 3.2 HTML - Forms50 pagesLec. 6 HTML FormsPDFNo ratings yetLec. 6 HTML Forms36 pagesHTML Form NotesPDFNo ratings yetHTML Form Notes14 pagesCs-344: Web Engineering: Dr. Mehdi HussainPDFNo ratings yetCs-344: Web Engineering: Dr. Mehdi Hussain40 pagesINSY214_Chapter6PDFNo ratings yetINSY214_Chapter648 pagesHTML FormsPDFNo ratings yetHTML Forms22 pagesCMA (Form+input Elements)PDFNo ratings yetCMA (Form+input Elements)3 pagesG8 Lesson 12 ConPDFNo ratings yetG8 Lesson 12 Con15 pagesUnit-4 Forms Handling, Sessions, CookiesPDFNo ratings yetUnit-4 Forms Handling, Sessions, Cookies19 pagesChapter 10 FinalPDFNo ratings yetChapter 10 Final42 pagesHTML FormsPDFNo ratings yetHTML Forms17 pages6 - FormsPDFNo ratings yet6 - Forms26 pagesClass-5A-HTMLForm Elements-Form AttributesPDFNo ratings yetClass-5A-HTMLForm Elements-Form Attributes15 pagesHTML FormsPDFNo ratings yetHTML Forms45 pagesHTML Form GuideFrom EverandHTML Form GuideFrank WellingtonNo ratings yetCombined Orders (SAP Library - Production Planning and Control)PDFNo ratings yetCombined Orders (SAP Library - Production Planning and Control)3 pagesST SG AC.10 C.3 2023 4ePDFNo ratings yetST SG AC.10 C.3 2023 4e4 pagesThe Way of the Oracle Recovering the Practices of the Past to Find Answers for Today Reference Book DownloadPDF100% (10)The Way of the Oracle Recovering the Practices of the Past to Find Answers for Today Reference Book Download14 pagesUnit 1 What Do You LikePDFNo ratings yetUnit 1 What Do You Like31 pagesEnglish I Syllabus - 2013-2014PDFNo ratings yetEnglish I Syllabus - 2013-20142 pagesNew Text DocumentPDFNo ratings yetNew Text Document1 pageEce282 Labsheet 3PDFNo ratings yetEce282 Labsheet 314 pagesN18001MGM02-QuickStartGuideInterfacingModularIO-HeaderM-EIP-HPDFNo ratings yetN18001MGM02-QuickStartGuideInterfacingModularIO-HeaderM-EIP-H26 pagesWhy Do People Form GroupsPDF50% (4)Why Do People Form Groups2 pagesThe World of ArtPDFNo ratings yetThe World of Art10 pagesListening Ielts StrategiesPDFNo ratings yetListening Ielts Strategies2 pagesLaw TagalogPDFNo ratings yetLaw Tagalog4 pagesMS4 Seq1PDFNo ratings yetMS4 Seq15 pagesThe Remains of the Day by Kazuo Ishiguro - SummaryPDFNo ratings yetThe Remains of the Day by Kazuo Ishiguro - Summary6 pagesCalla LessonPDFNo ratings yetCalla Lesson3 pagesLouise Wetherbee Phelps - Composition As A Human Science - Contributions To The Self-Understanding of A Discipline-Oxford University Press (1988)PDFNo ratings yetLouise Wetherbee Phelps - Composition As A Human Science - Contributions To The Self-Understanding of A Discipline-Oxford University Press (1988)287 pagesSiren 41 Tamil Full TestPDFNo ratings yetSiren 41 Tamil Full Test15 pagesDraw A Cube With CPDFNo ratings yetDraw A Cube With C3 pagesSocial GroupsPDF100% (1)Social Groups8 pagesProgram and Piano Music 2PDFNo ratings yetProgram and Piano Music 226 pagesEnglish 3 Q1-Week 7PDF100% (1)English 3 Q1-Week 768 pagesDocument of ITPDFNo ratings yetDocument of IT25 pages2.4,2.5,2.6 Semi AnsPDFNo ratings yet2.4,2.5,2.6 Semi Ans4 pagesCV_aladin_m (3)PDFNo ratings yetCV_aladin_m (3)2 pagesLiterature Review On Code Mixing and Code SwitchingPDF100% (1)Literature Review On Code Mixing and Code Switching8 pagesR Markdown: Here's All You Have To Know For STAT 327PDFNo ratings yetR Markdown: Here's All You Have To Know For STAT 3272 pages8051PDFNo ratings yet805132 pagesIso 15394 2017PDFNo ratings yetIso 15394 201715 pagesEnglish Lesson Plan: Early Years EducationPDFNo ratings yetEnglish Lesson Plan: Early Years Education3 pages
Module 6 - HTML Forms
AI-enhanced description
HTML FORMS Prepared by: John Ivan C. Maurat, MIT
1Intended Learning Outcomes:By the end of this module, students will be able to:
● Explain the structure and purpose of HTML form elements such as <form>, <input>, <label>, <select>, and <textarea>. ● Differentiate various input types (e.g., text, email, password, checkbox, radio, file) and their use cases in form development. ● Apply essential form attributes (action, method, enctype) and input attributes (required, placeholder, readonly, etc.) to improve form functionality and validation. ● Utilize the form attribute to link form controls to a <form> element when they are not nested within it. ● Design and create a fully functional HTML form that captures and validates user input effectively.
21.0 HTML Forms
3HTML Form• An HTML form is used to collect user input. The user input is most often sent to a server for processing.
4<form> Element• The HTML <form> element is used to create an HTML form for user input.
• The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
5<input> Element• The HTML <input> element is the most used form element.
• An <input> element can be displayed in many ways, depending on the type attribute.
6Text Fields• The <input type="text"> defines a single-line input field for text input.
7Text Fields
8<label> Element• The <label> tag defines a label for many form elements.
• The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.
• The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
• The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
9Radio Buttons• The <input type="radio"> defines a radio button.
10Radio Buttons
11Checkboxes• The <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited number of choices.
12Checkboxes
13The Submit Button• The <input type="submit"> defines a button for submitting the form data to a form-handler.
• The form-handler is typically a file on the server with a script for processing input data.
14The Submit Button
15Name Attribute for <input>• Notice that each input field must have a name attribute to be submitted.
• If the name attribute is omitted, the value of the input field will not be sent at all.
16Name Attribute for <input>
172.0 HTML Forms Attribute
18The Action Attribute• The action attribute defines the action to be performed when the form is submitted.
• Usually, the form data is sent to a file on the server when the user clicks on the submit button.
• In the example below, the form data is sent to a file called "action_page.php". This file contains a server-side script that handles the form data:
19The Action Attribute
Tip: If the action attribute is omitted, the action is set to the current page.
20The Target Attribute• The target attribute specifies where to display the response that is received after submitting the form.
21The Target Attribute
22The Method Attribute• The method attribute specifies the HTTP method to be used when submitting the form data.
• The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").
23The Method Attribute
24The Method Attribute
25The Method AttributeNotes on GET:
• NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
• Useful for form submissions where a user wants to bookmark the result
26The Method AttributeNotes on POST:
• Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
• POST has no size limitations, and can be used to send large amounts of data.
Tip: Always use POST if the form data contains sensitive or personal information!
27The Autocomplete Attribute• The autocomplete attribute specifies whether a form should have autocomplete on or off.
28The Autocomplete Attribute
29The Novalidate Attribute• The novalidate attribute is a boolean attribute.
• When present, it specifies that the form-data (input) should not be validated when submitted.
30The Novalidate Attribute
31The formnovalidate AttributeThe input formnovalidate attribute specifies that an <input> element should not be validated whensubmitted.
Note: This attribute overrides the novalidate attribute of the <form> element.
The formnovalidate attribute works with the following input types: submit.
323.0 HTML Forms Element
33The HTML <form> Elements• The HTML <form> element can contain one or more of the following form elements:
• <input> <label>
• <select> <textarea>
• <button> <fieldset>
• <legend> <datalist>
34The <input> Element• One of the most used form elements is the <input> element.
• The <input> element can be displayed in several ways, depending on the type attribute.
35The <input> Element• One of the most used form elements is the <input> element.
36The <label> Element• The <label> element defines a label for several form elements.
• The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.
• The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
37The <select> Element• The <select> element defines a drop-down list:
38The <select> Element
39The <select> ElementTo define a pre-selected option, add the selected attribute to the option:
40The <select> ElementUse the size attribute to specify the number of visible values:
41The <select> ElementUse the multiple attribute to allow the user to select more than one value:
42The <textarea> ElementThe <textarea> element defines a multi-line input field (a text area):
43The <button> ElementThe <button> element defines a clickable button:
44The <fieldset> and <legend> ElementsThe <fieldset> element is used to group related data in a form.
45The <datalist> ElementThe <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
46The <output> ElementThe <output> element represents the result of a calculation (like one performed by a script).
474.0 HTML Input Types
48Input Type Reset<input type="reset"> defines a reset button that will reset all form values to their default values:
49Input Type ColorThe <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
50Input Type DateThe <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
51Input Type DateYou can also use the min and max attributes to add restrictions to dates:
52Input Type Datetime-localThe <input type="datetime-local"> specifies a date and time input field, with no time zone.
53Input Type FileThe <input type="file"> defines a file-select field and a "Browse" button for file uploads.
545.0 HTML Input Attributes
55The disabled AttributeThe input disabled attribute specifies that an input field should be disabled.
The value of a disabled input field will not be sent when submitting the form!
56The size AttributeThe input size attribute specifies the visible width, in characters, of an input field.
Note: The size attribute works with the following input types: text, search, tel, url, email, andpassword.
57The maxlength AttributeThe input maxlength attribute specifies the maximum number of characters allowed in an input field.
Note: When a maxlength is set, the input field will not accept more than the specified number ofcharacters. However, this attribute does not provide any feedback. So, if you want to alert the user, youmust write JavaScript code.
58The min and max AttributesThe input min and max attributes specify the minimum and maximum values for an input field.
The min and max attributes work with the following input types: number, range, date, datetime-local,month, time and week.
Tip: Use the max and min attributes together to create a range of legal values.
59The pattern AttributeThe input pattern attribute specifies a regular expression that the input field's value is checked against,when the form is submitted.
The pattern attribute works with the following input types: text, date, search, url, tel, email, andpassword.
60The placeholder AttributeThe input placeholder attribute specifies a short hint that describes the expected 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.
The placeholder attribute works with the following input types: text, search, url, number, tel, email,and password.
61The required AttributeThe input required attribute specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email, password, datepickers, number, checkbox, radio, and file.
62END
63