HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

The HTML <form> is used to an HTML a form.
Let us start with an empty with no input elements.
<form>
</form>

The <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.

Here are some examples:
<input type="text" /> - Displays a single-line text input field
<input type="password" /> - Display a single-line text input field while hiding the input by replacing it with bullets
<input type="radio" /> - Displays a radio button (for selecting one of many choices)
<input type="checkbox" /> - Displays a checkbox (for selecting zero or more of many choices)
<input type="submit" /> - Displays a submit button (for submitting the form)
<input type="button" /> - Displays a clickable button
<input type="reset" /> - Resets all the input fields to their initial value

In HTML5, some new input types are supported.

• <input type="color" />
  The <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.
• <input type="date" />
  The <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.
• <input type="datetime-local" />
  The <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.
• <input type="email" />
  The <input type="email" /> is used for input fields that should contain an e-mail address.
  Depending on browser support, the e-mail address can be automatically validated when submitted.
• <input type="file" />
  The <input type="file" /> defines a file-select field and a "Browse" button for file uploads.
• <input type="hidden" />
  The <input type="hidden /> defines a hidden input field (not visible to a user).
  A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.
  A hidden field often stores what database record that needs to be updated when the form is submitted.
• <input type="image" />
  The <input type="image" /> defines an image as a submit button.
  The path to the image is specified in the src attribute.
• <input type="month" />
  The <input type="month" /> allows the user to select a month and year.
  Depending on browser support, a date picker can show up in the input field.
• <input type="number" />
  The <input type="number" /> defines a numeric input field.
  You can also set restrictions on what numbers are accepted.
• <input type="range" />
  The <input type="range" /> defines a control for entering a number whose exact 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 min, max, and step attributes
• <input type="search" /> The <input type="search" /> is used for search fields (a search field behaves like a regular text field).
• <input type="tel" />
  The <input type="tel" /> is used for input fields that should contain a telephone number.
• <input type="time" />
  The <input type="time" /> allows the user to select a time (no time zone).
  Depending on browser support, a time picker can show up in the input field.
• <input type="url"> />
  The <input type="url" /> is used for input fields that should contain a URL address.
  Depending on browser support, the url field can be automatically validated when submitted.
• <input type="week" />
  The <input type="week" /> allows the user to select a week and year.
  Depending on browser support, a date picker can show up in the input field.