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> 

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

Output :-

HTML Forms




You can also search for these topics, html forms examples, why html forms are used, html forms where does the data go, html how forms work, html forms handling, html forms attributes, action, best practices, html forms elements.

The <form> Element

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>
You can also search for these topics, html the from element attributes, html the form tag example, html the form get element id, html the from element keep value after submit.

The <input> Element

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 :

Type Description
type="text" A single-line text input form is displayed.
type="radio" A radio button is displayed (for selecting one of many choices)
type="checkbox" A checkbox is displayed (for selecting zero or more of many choices)
type="submit" A submit button appears (for submitting the form).
type="button" A clickable button is displayed.
You can also search for these topics, html the input element events and attributes, value and objectobject, what is the input element in html, html input element properties.

Text Fields

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.

You can also search for these topics, html text fields size, accept only number, required, placeholder, disabled, validation, attributes, autofocus, html text fields change event, html text fields curser position.

The <label> Element

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.

You can also search for these topics, html the label element definition and data attribute example, empty label element.

Radio Buttons

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 :-




You can also search for these topics, html radio buttons required, html radio buttons default selected and checked, html radio buttons not working, vertical and horizontal radio buttons, html radio buttons example.

Checkboxes

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 :-




You can also search for these topics, html checkboxes group, html checkboxes only one checked, select all, html checkboxes list, how to use html checkboxes, how to group html checkboxes, html checkboxes example.

The Submit Button

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 :-

HTML Forms




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

You can also search for these topics, html the submit button action, submit button not working, submit button redirect to another page.

The name Attribute for <input>

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.

You can also search for these topics, html name attribute for input with spaces, input be filled out, custom default value.