HTML Form

last edited on: 19-Jan-2018; tagged: html


What is HTML Form?

HTML Forms are used to collect different kinds of user inputs. Such as user name, user date of birth, address, email etc. This form is used to collect any kind of information.

The HTML <form> Element

The HTML <form> element defines a form that is used to collect user input as below:

<form>
form elements
</form>

A <form> element can have several attributes. Most common attributes are:

The Action Attribute

The ACTION attribute specifies an address (url) where to submit the form (default: the submitting page).

The Method Attribute

The METHOD attribute specifies the HTTP method (GET or POST) that the browser will use when submitting the form data. The default is GET method.

The Enctype Attribute

The ENCTYPE attribute specifies the encoding of the submitted data.

The Target Attribute

The TARGET attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window. The default value is "_self" which means the form will be submitted in the current window.

Form Syntax

<form action="/process.php" method="post" enctype="multipart/form-data" target=”_blank”>
</form>

 

List of <form> attributes:

Attribute

Description

ACCEPT-CHARSET

The accept-charset attribute specifies the character encodings that are to be used for the form submission.

ACTION

The action attribute specifies where to send the form-data when a form is submitted.

AUTOCOMPLETE

The autocomplete attribute specifies whether a form should have autocomplete on or off. Default: on.

ENCTYPE

The enctype attribute specifies how the form-data should be encoded when submitting to the server. There are three possibilities for enctype: 1. application/x-www-form-urlencoded (the default) 2. multipart/form-data 3. text/plain

METHOD

Specifies the HTTP method used when submitting the form. Default is GET.

NAME

The name attribute specifies the name of a form.

NOVALIDATE

The novalidate attribute is a boolean attribute. When present, it specifies that the form-data (input) should not be validated when submitted.This is a new attribute in HTML5

TARGET

The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. Default value is  _self.

A HTML form contains form elements. Form elements are different types of input elements, like text fields, select, textarea, button and more.

The <input> Element

The most important form element is the <input> element. The <input> element can be displayed in several ways, depending on the type attribute. Input types for the <input> element are as below:

Input Type Text: This will generate a one line text input field. Syntax is:

<input type=”text” name="first_name">

Input Type Password: This will generate a password field. Syntax is:

<input type=”password” name="password ">

Input Type Submit: This will generate a submit button. A submit button is used to send the form data to a web server. Syntax is:

<input type="submit" value="Submit">

Input Type Reset:  This will generate a Reset button. A reset button resets all the forms control to default values. Syntax is:

<input type="reset" value="Reset">

Input Type Radio: This will generate radio button. A set of radio buttons let a user select only one option from a number of options. Example: selecting gender.

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

Input Type Checkbox: This will generate a checkbox. Checkboxes let a user select none or multiple options from a limited number of choices.

<input type="checkbox" name="Food1" value="Pizza"> Pizza<br>
<input type="checkbox" name="Food2" value="Burger"> Burger

Input Type Button: This will generate a button. Syntax is:

<input type="button" value="Button 1">

The <select> Element: A select box is a dropdown list of options that allows user to select one or more option from a pull-down list of options. Select box is created using the <select> element and <option> element. The option elements within the <select> element define each list item. Syntax is:

<label for="state ">State:</label>
    <select name="state" id="state">
<option value="Pennsylvania">Pennsylvania</option>
<option value="Maryland ">Maryland</option>
<option value="Virginia ">Virginia </option>
</select>

The <textarea> Element: TextArea is a multi-line text input control. This element allows a user to enter more than one line of text. The size of a <textarea> can be defined by rows and cols attributes. Syntax is:

<textarea name=" experience" rows="5" cols="20"></textarea>

The <button> Element: this element is use to generate a clickable button. Syntax is:

<button type="button1">Save</button>

An example of HTML Form:

<form action="/process.php" method="post" enctype="multipart/form-data" target=”_blank”>
<label for="fullName">Full Name</label>
    <input type=”text” name="fullName" id="fullName " />
<label for="email">Email</label>
    <input type=”email” name=”email” id=”email” />
<label>Gender</label>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
<input type="radio" name="gender" value="other">Other
<label>Prefered Language</label>
<input type="checkbox" name="language1" value="English"> English <br>
<input type="checkbox" name=" language2" value=" Spanish"> Spanish
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Related

HTML Tables

tagged: html