The <form> Element
<form> The HTML <form> element defines a form that is used to collect user input
.
form elements Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
.
</form>
The <input> Element The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
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)
Text Input <input type="text"> defines a one-line input field for text input
<form>
  First name:<br>
  <input type="text" name="firstname"> First name:
  <br>
  Last name:<br> Last name:
  <input type="text" name="lastname">
</form>
<p>Note that the form itself is not visible.</p> Note that the form itself is not visible.
<p>Also note that the default width of a text input field is 20 characters.</p> Also note that the default width of a text input field is 20 characters.
Radio Button Input <input type="radio"> defines a radio button
<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
         Male
  <input type="radio" name="gender" value="female"> Female<br>          Female
  <input type="radio" name="gender" value="other"> Other          Other
</form>
The Submit Button defines a button for submitting the form data to a form-handler.
<input type="submit"> The form-handler is typically a server page with a script for processing input data.
<form action="action_page.php"> The form-handler is specified in the form's action attribute:
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "action_page.php".</p>
Input Type Checkbox
<input type="checkbox">   defines a checkbox
<form action="action_page.php">
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car 
<br><br>
<input type="submit">
</form>
The Action Attribute The action attribute defines the action to be performed when the form is submitted.
<form action="action_page.php"> 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
If the action attribute is omitted, the action is set to the current page.
The Method Attribute 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
Note: GET must NOT be used when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too.
<form action="action_page.php" method="get"> 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.
or POST has no size limitations, and can be used to send large amounts of data.
<form action="action_page.php" method="post">
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.
<fieldset>
<legend>
<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
The <select> Element The <select> element defines a drop-down list
<select> By default, the first item in the drop-down list is selected.
<p>You can preselect an option with the selected attribute.</p> To define a pre-selected option, add the selected attribute to the option
The <option> elements defines an option that can be selected.
<form action="action_page.php"> By default, the first item in the drop-down list is selected.
  <select name="cars"> To define a pre-selected option, add the selected attribute to the option
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option> You can preselect an option with the selected attribute.
    <option value="fiat" selected>Fiat</option>                   
    <option value="audi">Audi</option>
  </select>
  <br><br>
 
  <input type="submit">  
</form>
The <button> Element
The <button> element defines a clickable button
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
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.
<textarea>                                                                               The cols attribute specifies the visible width of a text area. 
<form action="action_page.php">
 <textarea name="message" rows="6" cols="30">The cat was playing in the garden.</textarea>
  <br>
  <input type="submit">
</form>
The <button> Element The <button> element defines a clickable button
HTML5 <output> Element <button> The <output> element represents the result of a calculation (like one performed by a script).
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<output>
<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><br>
  <input type="submit">
</form>
HTML5 <keygen> Element <keygen> The purpose of the <keygen> element is to provide a secure way to authenticate users.
The <keygen> element specifies a key-pair generator field in a form.
<form action="action_page.php"> When the form is submitted, two keys are generated, one private and one public.
  Username: <input type="text" name="user"> The private key is stored locally, and the public key is sent to the server.
  <br><br> The public key could be used to generate a client certificate to authenticate the user in the future.
  Encryption: <keygen name="security">
  <br><br>
  <input type="submit">
</form>
Input Type Password defines a password field
User name:
<input type="password">
 
User password:
<form>
  User name:<br>
  <input type="text" name="username"><br> The characters in a password field are masked (shown as asterisks or circles).
  <br>
  User password:<br> The characters in a password field are masked (shown as asterisks or circles).
  <input type="password" name="psw">
</form>
<p>The characters in a password field are masked (shown as asterisks or circles).</p>
Input Type Reset defines a reset button that will reset all form values to their default values
<input type="reset">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>
<p>If you change the input values and then click the "Reset" button, the form-data will be reset 
      to the default values.</p>
Input Type Number
The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
<form>
The example displays a numeric input field, where you can enter a value from 1 to 5
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>
<p><b>Note:</b> type="number" is not supported in IE9 and earlier.</p>
Input Type Date
The <input type="date">  is used for input fields that should contain a date.