The
Element The HTML element defines a form that is used to collect user input: Example: . form elements .
An HTML form contains form elements. Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. The element is the most important form element. The element can be displayed in several ways, depending on the type attribute. Here are some examples: Type Description Defines a one-line text input field Defines a radio button (for selecting one of many choices) Defines a submit button (for submitting the form) ---------------------------------------------------------------------------------------- HTML5 form attributes There are 14 new attributes that we’ll be looking at in this article. placeholder autofocus required multiple formtarget formmethod formaction autocomplete pattern list novalidate formnovalidate form formenctype ------------------------------------------------------------------------------------------ Text Input ========== defines a one-line input field for text input: Example
First name:

Last name:
Radio Button Input ================== defines a radio button. Radio buttons let a user select ONE of a limited number of choices: Example
Male
Female
Other
The Submit Button ================= defines a button for submitting the form data to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: Example
First name:

Last name:


The Action Attribute ==================== The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page on the server when the user clicks on the submit button. In the example above, the form data is sent to a page on the server called "action_page.php". This page contains a server-side script that handles the form data:
The Method Attribute ==================== The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data: or: ------------------------------------------------------------------------------------------------------ When to Use GET? The default method when submitting form data is GET. However, when GET is used, the submitted form data will be visible in the page address field: action_page.php?firstname=Mickey&lastname=Mouse When to Use POST? Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field. POST has no size limitations, and can be used to send large amounts of data. -------------------------------------------------------------------------------------------------- GET 1) In case of Get request, only limited amount of data can be sent because data is sent in header. 2) Get request is not secured because data is exposed in URL bar. 3) Get request can be bookmarked. 4) Get request is idempotent . It means second request will be ignored until response of first request is delivered 5) Get request is more efficient and used more than Post. POST -------- In case of post request, large amount of data can be sent because data is sent in body. Post request is secured because data is not exposed in URL bar. Post request cannot be bookmarked. Post request is non-idempotent. Post request is less efficient and used less than get. The Name Attribute ================ Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that input field will not be sent at all. This example will only submit the "Last name" input field: Example First name:

Last name:


-------------------------------------------------------------------------------------------------------------- The element defines a drop-down list: Example The Try it Yourself » -------------------------------------------------------------------------------------------------------------- size , -------------------------------------------------------------------------------------------------------------- The 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: -------------------------------------------------------------------- Grouping Form Data with
================================== The
element is used to group related data in a form. The element defines a caption for the
element. Example
Personal information: First name:

Last name:


-------------------------------------------------------------------------------------------------- Here is the list of
attributes: Attribute Description accept-charset Specifies the charset used in the submitted form (default: the page charset). action Specifies an address (url) where to submit the form (default: the submitting page). autocomplete Specifies if the browser should autocomplete the form (default: on). enctype Specifies the encoding of the submitted data (default: is url-encoded). method Specifies the HTTP method used when submitting the form (default: GET). name Specifies a name used to identify the form (for DOM usage: document.forms.name). novalidate Specifies that the browser should not validate the form. target Specifies the target of the address in the action attribute (default: _self). ------------------------------------------------------------------------------------------------------------------------------------------------------- media_type Specifies the types of files that the server accepts (only for type="file") align left right top middle bottom Not supported in HTML5. Specifies the alignment of an image input (only for type="image") alt text Specifies an alternate text for images (only for type="image") autocomplete on off Specifies whether an element should have autocomplete enabled autofocus autofocus Specifies that an element should automatically get focus when the page loads checked checked Specifies that an element should be pre-selected when the page loads (for type="checkbox" or type="radio") dirname inputname.dir Specifies that the text direction will be submitted disabled disabled Specifies that an element should be disabled form form_id Specifies one or more forms the element belongs to formaction URL Specifies the URL of the file that will process the input control when the form is submitted (for type="submit" and type="image") formenctype application/x-www-form-urlencoded multipart/form-data text/plain Specifies how the form-data should be encoded when submitting it to the server (for type="submit" and type="image") formmethod get post Defines the HTTP method for sending data to the action URL (for type="submit" and type="image") formnovalidate formnovalidate Defines that form elements should not be validated when submitted formtarget _blank _self _parent _top framename Specifies where to display the response that is received after submitting the form (for type="submit" and type="image") height pixels Specifies the height of an element (only for type="image") list datalist_id Refers to a element that contains pre-defined options for an element max number date Specifies the maximum value for an element maxlength number Specifies the maximum number of characters allowed in an element min number date Specifies a minimum value for an element multiple multiple Specifies that a user can enter more than one value in an element name text Specifies the name of an element pattern regexp Specifies a regular expression that an element's value is checked against placeholder text Specifies a short hint that describes the expected value of an element readonly readonly Specifies that an input field is read-only required required Specifies that an input field must be filled out before submitting the form size number Specifies the width, in characters, of an element src URL Specifies the URL of the image to use as a submit button (only for type="image") step number Specifies the legal number intervals for an input field ----------------------------------------------------------------------------------------------------------- type ==== button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week Specifies the type element to display value text Specifies the value of an element width pixels Specifies the width of an element (only for type="image") accept file_extension application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint, text/plain, application/pdf, image/* audio/* video/*