HTML Forms

In this tutorial, you'll learn how to create a form in HTML to collect data from users on a webpage.

What is HTML Form

Forms are a crucial part of websites. Forms are used on almost all web pages. A form is a combination of several fields for collecting various information or data from the user. HTML forms are used to collect various information or data from users such as comments, orders, mails, etc. Example of the form tag:

<form> … </form>
The <form> tag is used to create forms on web pages. Using form tags we can only create forms on web pages, send input stalks to the form server or use server-side languages like PHP to process the stalks.

Here’s an example:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple HTML Form</title>
</head>
<body>
    <form action="#" method="post">
        <label>Username: <input type="text" name="username"></label>
      	<br><br>
        <label>Password: <input type="password" name="userpass"></label>
        <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

The most widely used form elements are input, checkbox, radio button, submit button, etc.

The following section describes different types of controls that you simply can use in your form.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title> Input Field lists </title>
</head>
<body>
    <form action="#" method="post">
      	Text Field <input type="text"><br>
        Password Field <input type="password"><br>
      	Checkbox Field <input type="checkbox"><br>
        RadioField <input type="radio"><br>
        Button Field <input type="button"><br>
        Color Field <input type="color"><br>
        Date Field <input type="date"><br>
        Datetime-local Field <input type="datetime-local"><br>
        Email Field<input type="email"><br>
        File Field <input type="file"><br>
        Hidden Field <input type="hidden"><br>
        Image Field <input type="image"><br>
        Month Field <input type="month"><br>
        Number Field <input type="number"><br>
        Range Field <input type="range"><br>
        Reset Field <input type="reset"><br>
        Search Field <input type="search"><br>
        Submit Field <input type="submit"><br>
        Tel Field <input type="tel"><br>
        Time Field <input type="time"><br>
        Url Field <input type="url"><br>
        Week Field <input type="week"><br>
    </form>
</body>
</html>

Text Fields

The code <input type="text"> is used to create a text box of one line. This code is most commonly used in HTML forms. See an example of this.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title> HTML Text Input Field </title>
</head>
<body>
    <form>
      	First name:<br />
      	<input type="text" name="firstname"><br />
      	Last name:<br />
      	<input type="text" name="lastname">
    </form>
</body>
</html>

Password Field

All attributes in the text field apply to the password field. In the case of the password field, only the type attribute will change, all other attributes will be the same as in the text field. Here the password field will type the password such as –

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title> HTML Password Input Field </title>
</head>
<body>
    <form>
    	Password: <input type="password" name="pass" />
    </form>
</body>
</html>

Radio Buttons

A radio button is created to select only one of the multiple options. Attributes that can be used with input tags to create radio buttons are type, name, and value. Using the Checked attribute, you can select a radio button by default. Its value is yes. below is an example.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title> HTML Radio Buttons </title>
</head>
<body>
    <form>
        <input type="radio" name="sex" value="male" /> Male <br />
        <input type="radio" name="sex" value="female" /> Female
    </form>
</body>
</html>

Checkboxes

A checkbox is created to select options with a tick mark. You can select any one or more buttons here. The type of attributes you can use for the checkbox are type, name, and value. These are described below –

  • Type – This attribute will create a checkbox. The value of this attribute must always be checked.
  • Name – This attribute is used to specify the name of a checkbox. That is, a checkbox is specifically marked. When processing the form with PHP, a checkbox is called with the value name of this attribute.
  • Value – This attribute is used to determine the value of the checkbox.

See an example below –

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title> HTML Checkboxes </title>
</head>
<body>
    <form>
      <input type="checkbox" name="Flower" value="Sun-flower" /> Sun-flower <br />
      <input type="checkbox" name="Flower" value="Marigold" /> Marigold
    </form>
</body>
</html>

File Select box

A button called “Browse” is created to upload a file using <input type="file">. Clicking this button brings up a window to select the file.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML File Select box</title>
</head>
<body>
    <form>
     	 Select a file: <input type="file" name="myFile">
    </form>
</body>
</html>

Textarea

Textarea is a multi-line text input control that allows users to enter multiple lines of text. Multi-line text input controls are created using the <textarea> element.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Textarea</title>
</head>
<body>
    <form>
        Address: <br>
       <textarea rows="3" cols="30" name="address" id="address"></textarea>
    </form>
</body>
</html>

Select Boxes

A selected box is a dropdown list of options that allows users to select one or more options from a pull-down list of options. The selection box is created using the <select> element and <option> elements.

The <option> elements in the <select> elements define each list item.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Select Box</title>
</head>
<body>
    <form>
        <label for="Country">Country:</label>
        <select name="country" id="country">
            <option value="USA">USA</option>
            <option value="Canada">Canada</option>
            <option value="Austria">Austria</option>
        </select>
    </form>
</body>
</html>

Submit Button

A submit button is used to send the information entered in the form to the server. The code <input type="submit"> is used to create this submit button.

The server’s page executes the information in the input element. The action attribute server then sends the page to the next step.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Submit Button</title>
</head>
<body>
    <form action="#">
    	First name:<br />
    	<input type="text" name="firstname" value="Bugs"><br />
    	Last name:<br />
    	<input type="text" name="lastname" value="Bunny"><br /><br />
    	<input type="submit" value="Submit">
  </form>
</body>
</html>

Reset Button

To reset the completed form, use <input type="reset">. Clicking this button displays their automatic values in all fields of the form.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Reset Button</title>
</head>
<body>
    <form action="#">
      First name:<br />
      <input type="text" name="firstname" ><br />
      Last name:<br />
      <input type="text" name="lastname"><br /><br />
      <input type="reset">
    </form>
</body>
</html>

Grouping Form Controls

You group logically related controls and labels into a web form using the <legend> element. Grouping form controls into categories makes it easier for users to identify a control that makes the form more user-friendly. Try the following example to see how it works:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Grouping Form Controls in HTML</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>Contact Details</legend>
            <label>Email Address: <input type="email" name="email"></label>
            <label>Phone Number: <input type="text" name="phone"></label>
        </fieldset>
    </form>
</body>
</html>

Frequently Used Form Attributes

The following table lists the most frequently used form element’s attributes:

Attributes Description
name Specifies the name of the form.
action Specifies the URL of the program or the URL of the script on the web server to be used to process the information submitted through the form
method Specifies the HTTP method used for sending the data to the web server by the browser. The value can be either get (the default) and post.

Input constraints

The table below lists some common input restrictions, some of which are new to HTML5.

Attributes Description
disabled Determines which input field should be disabled.
max Specifies the supply value to input from an input field.
maxlength Determines the total number of characters to input in an input field.
min Sets the minimum value to input from an input field.
pattern Input value compares to normal value.
readonly Determines which input field cannot be changed, can only be worn.
required Determines which input fields must be filled.
size Determines the length of any input field.
step Determines the distance between the numbers in an input field.
value Sets the automatic value of an input field.

All input attributes of HTML5

See all the input attributes of HTML 5 below.

Attributes Description
Autocomplete Helps to input new values or values from previously input values.
Autofocuas Determines which input field is selected when web page loading is complete.
form Links any input tag outside the form to the form using id.
formaction Indicates a new link to submit the form.
formenctype Indicates the method of encoding the data submitted to the server for the post method.
formmethod Specifies the HTTP method for sending form information to the server.
formvalidation Cancels validation of data in any input field.
formtarget Works as a target attribute for the input element.
height & width Determines the length and width of any input field in the case of images.
list Used to link a list of default values to the input field via id.
max & min Determines the maximum and minimum values of the input field.
multiple Used to select multiple values together in an input field.
pattern Specifies the pattern for the value of an input field.
placeholder Provides a signal to the user about the input information of an input field.
required Gives the user a warning if an input field is empty and the form is not submitted.
step Sets the spacing between integers in the slider.

TOOLS

ABOUT US

CONTACT