HTML FORMS

Different input types

<input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text"> <input type="time"> <input type="url"> <input type="week">

Definitions of the different input types:

<input type="text"> - defines a single-line text input field: <input type="password"> - defines a password field: <input type="submit"> - defines a button for submitting form data to a form handler. <input type="reset"> - defines a reset button that will reset all form values to their default values: <input type="radio"> - defines a radio button. <input type="checkbox"> - defines a checkbox. <input type="button"> - defines a button: <input type="color"> - is used for input fields that should contain a color. <input type=" date"> - is used for input fields that should contain a date. <input type="datetime-local"> - specifies a date and time input field, with no time zone. <input type="email"> - is used for input fields that should contain an e-mail address. <input type="image"> - defines an image as a submit button. <input type="file"> - defines a file-select field and a "Browse" button for file uploads. <input type="hidden"> - defines a hidden input field (not visible to a user). <input type="month"> - allows the user to select a month and year. <input type="number"> - defines a numeric input field. <input type="range"> - defines a control for entering a number whose exact value is not important (like a slider control). The default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes: <input type="search"> - is used for search fields (a search field behaves like a regular text field). <input type="time"> - allows the user to select a time (no time zone). <input type="url"> - is used for input fields that should contain a URL address. <input type=" week"> - allows the user to select a week and year.

Required attribute

An input field must be filled before submitting

<legend>

Defines a caption for a <fieldset> element

<input type="checkbox">

Defines a checkbox

<button>

Defines a clickable button

<select>

Defines a drop-down list

<optgroup>

Defines a group of related options in a drop-down list

<label>

Defines a label for an <input> element

<textarea>

Defines a multiline input control (text area)

<input type="radio">

Defines a radio button

<form>

Defines an HTML form for user input

<input>

Defines an input control

<option>

Defines an option in a drop-down list

<output>

Defines the results of a calculation

Name attribute

Each input field must have a name attributed to be submitted.

<fieldset>

Groups related elements in a form

List attribute

Refers to the data list element that contains pre defined options for an input element

<datalist>

Specifies a list of pre-defined options for input controls

Form attribute

Specifies one or more forms an <input> element belongs to.

Novalidate attribute

Specifies that all of the form data should not be validated when submitted

Formnovalidate attribute

Specifies that an input element should not be validated when submitted

Read-only attribute

Specifies that an input field is read only.

Disabled attribute

Specifies that an input field should be disabled

Novalidate

Specifies that the form should not be validated when submitted

Method

Specifies the HTTP method to use

formaction attribute

Specifies the URL of a file that will process the input control when the form is submitted.

accept-charset

Specifies the charset used in the submitted form (default: the page charset).

enctype

Specifies the encoding of the submitted data (default: is url-encoded).

Min and max attribute

Specifies the max and min values for an input field.

Maxlength attribute

Specifies the maximum number of character for an input field

Name

Specifies the name of the form

Target

Specifies where to display the response that is received

Autofocus attribute

The autofocus attribute specifies that the input field should automatically get focus when the page loads

formmethod Attribute

The formmethod attribute defines the HTTP method for sending form-data to the action URL.

formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

Pattern attribute

The pattern attribute specifies a regular expression that the <input> element's value is checked against.

<form> element

Used to create an Html form for user input. It is also a container for different types of input elements such as: text fields, checkboxes, radio buttons, submit buttons, etc.

What are HTML forms used for?

User Input.

Input restrictions

checked - Specifies that an input field should be pre-selected when the page 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. read-only - 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. value - Specifies the default value for an input field.

<input type="submit">

defines a button for submitting a form to a form-handler

<label> element

defines a label for many form elements.

<input> element

most used form element. Displayed in many ways on the type of attributes like "text," "radio," checkbox," "submit," and "button."

Value attribute

specifies an initial value for an input field.

formenctype attribute

specifies how the form data should be encoded when submitted (only for forms with method="post").

Placeholder attribute

specifies text that first appears in a text widget, typically for giving the user a hint as to the expected value.

Multiple attribute

specifies that the user is allowed to enter more than one value in the <input> element.

Height and width attribute

specifies the height and width

Rel

specifies the relationship between the current document and the linked document

Size attribute

specifies the size (in characters) for the input field

Autocomplete Attribute

specifies whether a form or input field should have autocomplete on or off.

Autocomplete attribute

specifies whether a form or input field should have autocomplete on or off.