HTML Forms

Users can gather input by using an HTML form. The user entry is mostly sent to a processing server.

A simple form:-

<h2>HTML Forms</h2>
<form action="html-resources/submit.aspx">
  <label for="fname">Enter your name:</label><br />
  <input type="text" id="Text2" name="myname" value="John" /><br />
  <input type="submit" value="Submit" />
</form>

If you click the "Submit" button, the form-data will be sent to a page called "html-resources/submit.aspx".

Output :-

Used to create an HTML form for user input: The HTML form element.

Basically its a container for other html form elements.

The user cannot see the form (the form is not visible itself) but they can view the form elements which is stored in the inside of form tag.

<form>
.
form elements
.
</form>

The most commonly used form element is the HTML input element.

Depending on the type of attribute an element input is displayed in several ways.

Here are some examples :

In the type="text", the input field for the input is defined in a single line.

Example:- A form with input fields for text.

<form>
  <label for="fname">Your name:</label><br />
  <input type="text" id="Text3" name="fname" value="John" />
</form>

Output :-

Note that the form itself is not visible. Also note that the default width of text input fields is 20 characters.

Notice in the example above the use of the label element.

The label tag specifies a label for many elements of the form.

The label feature is useful in the user's screen reader since when the user concentrates on the input element, the screen reader reads the label out.

The label element will also assist those who have a difficulty clicking on very small areas (e.g. radio buttons or checkboxes) - because it toggles the radio/checkbox when the user clicks on the text in the element label.

The for attributelabel tag attribute should be equal to the input element id attribute in order to tie them together.

A radio button is defined by the type="radio".

Radio buttons allow the user to choose any one item from a number of items.

Example :-

<form>
  <input type="radio" id="male" name="gender" value="male" />
  <label for="male">Male</label><br />
  <input type="radio" id="female" name="gender" value="female" />
  <label for="female">Female</label><br />
</form>

Output :-

A checkbox is set by the type="checkbox".

Checkboxes allow the user to choose ZERO or more items from a list of options.

Example :-

<form>
  <input type="checkbox" id="vehicle1" name="vehicle" value="Bike" />
  <label for="vehicle1"> I have a bike</label><br />
  <input type="checkbox" id="vehicle2" name="vehicle" value="Car" />
  <label for="vehicle2"> I have a car</label><br />
  <input type="checkbox" id="vehicle3" name="vehicle" value="Boat" />
  <label for="vehicle3"> I have a boat</label><br /><br />
</form> 

Output :-

The type="submit" button specifies the form information (entered by user) to be submitted to a URL (form handler).

The form-handler usually is a file with a script on the server for data processing.

The form-handler is indicated in the attribute of action of the form.

Example :-

<form action="html-resources/submit.aspx">
  <label for="fname">Name:</label><br />
  <input type="text" id="Text9" name="myname" value="John" /><br />
  <input type="submit" value="Submit" />
</form>

Output :-

If you click the "Submit" button, the form-data will be sent to a page called "/submit.aspx".

Note that a name attribute must be given to each input field.

The input value of the input field is not displayed if the name attribute is omitted.

Example :- The value for the "First name" input field is not provided for this example.

<form action="html-resources/submit.aspx">
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" value="John" /><br /><br />
  <input type="submit" value="Submit" />
</form>

Output :-

If you click the "Submit" button, the form-data will be sent to a page called "/submit.aspx".

Notice that the value of the "First name" field will not be submitted, because the input element does not have a name attribute.