HTML Forms

The <form> Element

 -  The HTML <form> element defines a form that is used to collect user input

Type	Description
<input type="text">	Defines a one-line text input field
<input type="radio">	Defines a radio button (for selecting one of many choices)
<input type="submit">	Defines a submit button (for submitting the form)

The Action Attribute

 -  The action attribute defines the action to be performed when the form is submitted.

The Method Attribute

 -  The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data

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.

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.

Personal information:

First name:

Last name:

Here is the list of <form> 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).

The <select> Element

The <select> element defines a drop-down list
The <option> 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 selected attribute to the option.

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area)
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The <button> Element

The <button> element defines a clickable button
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML5 Form Elements

HTML5 added the following form elements

• <datalist>
• <keygen>
• <output>

HTML5 <datalist> Element

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

<form action="action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist> 
</form>

HTML5 <output> Element

The <output> element represents the result of a calculation (like one performed by a script).

<form action="action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br>
  <input type="submit">
</form>

HTML Input Types

• Input Type Text - <input type="text" >
  defines a one-line text input field
• Input Type Password - <input type="password">
  defines a password field
• Input Type Submit - <input type="submit">
  defines a button for submitting form data to a form-handler
  If you omit the submit button's value attribute, the button will get a default text
• Input Type Reset - <input type="reset">
  defines a reset button that will reset all form values to their default values
• Input Type Radio - <input type="radio">
  defines a radio button.
• Input Type Checkbox - <input type="checkbox">
  defines a checkbox.
• Input Type Button - <input type="button">
  defines a button

HTML5 Input Types

HTML5 added several new input types:

color	date	datetime	datetime-local
email	month	number	range
search	tel	time	url
week

HTML5 Input Types

• Input Type Number - <input type="number">
  defines a numeric input field.
  <form action="action_page.php">
  Quantity (between 10 and 50):
  <input type="number" name="quantity" min="10" max="50"step="10" value="30">
  </form>

  ---

  Quantity (between 10 and 50):

  ---

• Input Type Date - <input type="date">
  used for input fields that should contain a date.
  <form action="action_page.php">
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31">
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02">
  </form>
  Enter a date before 1980-01-01:
  Enter a date after 2000-01-01:
  

---

• Input Type Color - <input type="color">
  used for input fields that should contain a color.
  <form action="action_page.php">
  Select your favorite color:
  <input type="color" name="favcolor" value="#ff0000">
  </form>
  Select your favorite color:

  Note: type="color" is not supported in Internet Explorer 11 and earlier versions or Safari 9.1 and earlier versions.

• Input Type Range - <input type="range">
  used for input fields that should contain a value within a range.
  <form action="action_page.php">
  <input type="range" name="points" min="0" max="10">
  </form>
  Points:

  Note: type="range" is not supported in Internet Explorer 9 and earlier versions.

• Input Type Month - <input type="month">
  allows the user to select a month and year.
  <form action="action_page.php">
  <input type="month" name="bdaymonth">
  </form>
  Birthday (month and year):

  Note: type="month" is not supported in Firefox, or Internet Explorer 11 and earlier versions.

• Input Type Week - <input type="week">
  allows the user to select a week and year.
  <form action="action_page.php">
  <input type="week" name="year_week">
  </form>
  Select a week:

  Note: type="week" is not supported in Firefox, or Internet Explorer 11 and earlier versions.

• Input Type Time - <input type="time">
  allows the user to select a time (no time zone).
  <form action="action_page.php">
  <input type="time" name="usr_time">
  </form>
  Select a week:

  Note: type="time" is not supported in Firefox, or Internet Explorer 12 and earlier versions.

• Input Type Datetime-local - <input type="datetime-local">
  specifies a date and time input field, with no time zone.
  <form action="action_page.php">
  <input type="datetime-local" name="bdaytime">
  </form>
  Birthday (date and time):

  Note: type="datetime-local" is not supported in Firefox, or Internet Explorer 12 and earlier versions.

• Input Type Email - <input type="email">
  used for input fields that should contain an e-mail address.
  <form action="action_page.php">
  <input type="email" name="email">
  </form>
  Email:

  Note: type="email" is not supported in IE9 and earlier.

Input Restrictions

Here is a list of some common input restrictions (some are new in HTML5):

Attribute	Description
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
value	Specifies the default value for an input field

HTML Input Attributes

Attribute	Description
value	specifies the initial value for an input field
readonly	specifies that the input field is read only (cannot be changed)
disabled	specifies that the input field is disabled
size	specifies the size (in characters) for the input field
maxlength	specifies the size (in characters) for the input field

HTML5 Attributes

HTML5 added the following attributes for <input>:
autocomplete(on/off)	autofocus	form	formaction(type-submit/image)
formenctype(type-submit/image)	formmethod(type-submit/image)	formnovalidate(type-submit)	formtarget(type-submit/image)
height and width(type-image)	list	min and max	multiple(type-email/file)
pattern (regexp)	placeholder	required	step
HTML5 added the following attributes for <form>:
autocomplete(on/off)	novalidate

The list Attribute

- The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element. <input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

The pattern Attribute

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

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" >

The placeholder Attribute

- The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).