HTML - Forms

HTML Form

In this tutorial you will learn how to create a form in HTML to collect user inputs.

What is HTML Form?

An HTML form is a section of a webpage that contains interactive controls that allow users to input data and interact with the website. It is typically created using the <form> element in HTML and can contain various input elements such as text fields, checkboxes, radio buttons, dropdown lists, and more.

When a user submits a form, the data they entered is sent to the server for processing. This can be done using various methods, such as the GET method, which appends the form data to the URL in the address bar, or the POST method, which sends the data in the body of the HTTP request.

The HTMLThis attribute specifies the URL of the script or page that will handle the form data when the form is submitted. The value of the action attribute is typically a server-side script that will process the form data and send a response back to the user. <form> tag is used to create an HTML form for user input.

Example

<form action="">
   Here will be the form elements...
</form>

Form Tags

The HTML <form> tag can have several attributes that control the behavior and appearance of the form. Some of the most common attributes are:

  • action: This attribute specifies the URL of the script or page that will handle the form data when the form is submitted. The value of the action attribute is typically a server-side script that will process the form data and send a response back to the user.
  • method: This attribute specifies the HTTP method to be used when submitting the form data. The two most common values for this attribute are “GET” and “POST”. When the method is set to “GET”, the form data is appended to the URL as a query string. When the method is set to “POST”, the form data is sent in the body of the HTTP request.
  • target: This attribute specifies the name of the target window or frame where the response to the form submission will be displayed. The most common values for this attribute are “_blank” (to open the response in a new window) and “_self” (to open the response in the same window or frame).
  • enctype: This attribute specifies the encoding type of the form data when the method attribute is set to “POST”. The most common value for this attribute is “application/x-www-form-urlencoded”, which is the default encoding type. Other possible values include “multipart/form-data” (used for uploading files) and “text/plain” (used for plain text data).
  • name: This attribute specifies a name for the form, which can be used to identify the form in client-side scripts and server-side code.
  • autocomplete: This attribute controls whether or not the browser should provide autocomplete suggestions for form fields. Possible values are “on” (the default) and “off”.
Example of a <form> tag with several attributes:
<form action="submit-form.php" method="post" target="_blank" enctype="multipart/form-data" autocomplete="off">
  <!-- form fields go here -->
</form>

HTML Form Controls

HTML provides several form controls that can be used within a <form> tag to create input fields, checkboxes, radio buttons, dropdown lists, and more. Some of the most common form controls are:

1. Text Input Controls

there are three types of text input controls that can be used on forms:

  1. Single-line input controls: These are used for inputting a single line of text, such as a name or email address. They are created using the <input> tag with the type="text" attribute.
  2. Multi-line input controls: These are used for inputting longer blocks of text, such as comments or messages. They are created using the <textarea> tag.
  3. Password input controls: These are used for inputting passwords, where the user’s input is masked for security reasons. They are created using the <input> tag with the type=“password” attribute.

Single-line input controls

Single-line input controls are used for inputting a single line of text, such as a name or email address. They are created using the <input> tag with the type="text" attribute.

Example
<!DOCTYPE html>
<head>
   <title>Single-line input controls</title>
</head>
<body>
   <form action="">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username">
   </form>
</body>
</html>
Live preview

In this example, the type="text" attribute creates a single-line text input control, and the id and name attributes are used to identify the input control in the HTML and when submitting the form data to the server. The <label> tag is used to associate a label with the input control, which can improve accessibility and usability.

Single-line input controls can also include attributes such as placeholder, maxlength, required, and autocomplete to provide additional information or requirements for the user. For example, the placeholder attribute can be used to provide a hint or example of the type of input expected, while the maxlength attribute can limit the number of characters that can be entered. The required attribute can be used to ensure that the user must enter a value before submitting the form, and the autocomplete attribute can enable or disable autocomplete for the input control.

Multi-line input controls

Multi-line input controls are used for inputting longer blocks of text, such as comments or messages. They are created using the <textarea> tag.

Here’s an example of a multi-line input control:

<!DOCTYPE html>
<head>
   <title>Multi-line input controls</title>
</head>
<body>
   <form action="">
      <label for="message">Message:</label>
      <textarea id="message" name="message"></textarea>
   </form>
</body>
</html>
Live preview
In this example, the ``<textarea>`` tag creates a multi-line text input control, and the `` id`` and ``name`` attributes are used to identify the input control in the HTML and when submitting the form data to the server. The ``<label>`` tag is used to associate a label with the input control, which can improve accessibility and usability.

Multi-line input controls can also include attributes such as placeholder, maxlength, required, and autocomplete to provide additional information or requirements for the user. For example, the placeholder attribute can be used to provide a hint or example of the type of input expected, while the maxlength attribute can limit the number of characters that can be entered. The required attribute can be used to ensure that the user must enter a value before submitting the form, and the autocomplete attribute can enable or disable autocomplete for the input control.

Password input controls

Password input controls are used for inputting passwords, where the user’s input is masked for security reasons. They are created using the <input> tag with the type="password" attribute.

Here’s an example of a password input control:

<!DOCTYPE html>
<head>
   <title>Password input controls</title>
</head>
<body>
   <form action="">
      <label for="password">Password:</label>
      <input type="password" id="password" name="password">      
   </form>
</body>
</html>
Live preview

In this example, the type="password" attribute creates a password input control, and the id and name attributes are used to identify the input control in the HTML and when submitting the form data to the server. The <label> tag is used to associate a label with the input control, which can improve accessibility and usability.

Password input controls can also include attributes such as placeholder, maxlength, required, and autocomplete to provide additional information or requirements for the user. For example, the placeholder attribute can be used to provide a hint or example of the type of input expected, while the maxlength attribute can limit the number of characters that can be entered. The required attribute can be used to ensure that the user must enter a value before submitting the form, and the autocomplete attribute can enable or disable autocomplete for the input control.

Textarea tag form

This form control is used to create a multiline text input field, where the user can enter more than one line of text.

Example
<!DOCTYPE html>
<head>
   <title>Form in HTML</title>
</head>
<body>
   <form action="">
      <label for="address">Address</label><br>
      <textarea name="address" id="address" cols="30" rows="4" placeholder="Give your address"></textarea>
   </form>
</body>
</html>
Live preview

Select Box Control

This form control is used to create a dropdown list of options that the user can select from. The <select> tag must be paired with one or more <option> tags that define the individual options in the list.

Example
<!DOCTYPE html>
<head>
   <title>Select box control</title>
</head>
<body>
   <form action="">
      <select id="" name="dropdown">
         <option value="banana" selected>Banana</option>
         <option value="mango">Mango</option>
         <option value="vegetable">vegetable</option>
         <option value="tomato">Tomato</option>
       </select>
   </form>
</body>
</html>
Live preview

Checkbox Control

Checkbox controls are used when a user needs to select one or more options from a list of options. They are created using the <input> tag with the type="checkbox" attribute.

Here’s an example of a checkbox control:

<!DOCTYPE html>
<head>
   <title>Password input controls</title>
</head>
<body>
   <form action="">
      <label for="fruit">Select your favorite fruit:</label><br>
      <input type="checkbox" id="apple" name="fruit" value="apple">
      <label for="apple">Apple</label><br>
      <input type="checkbox" id="banana" name="fruit" value="banana">
      <label for="banana">Banana</label><br>
      <input type="checkbox" id="orange" name="fruit" value="orange">
      <label for="orange">Orange</label><br>            
   </form>
</body>
</html>
Live preview




In this example, the type="checkbox" attribute creates a checkbox control, and the id, name, and value attributes are used to identify the checkbox control in the HTML and when submitting the form data to the server. The <label> tags are used to associate labels with the checkbox controls, which can improve accessibility and usability.

Checkbox controls can also include attributes such as checked to indicate that the checkbox should be initially checked, and disabled to disable the checkbox so that it cannot be selected. Multiple checkboxes can have the same name attribute to group them together as a set of related options, and their value attributes can be used to specify the value(s) that will be submitted to the server when the form is submitted.

File Upload Box

A file upload box, also known as a file input control, is used to allow users to select and upload files from their local system to a web server. It is created using the <input> tag with the type="file" attribute.

Example
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <label for="file">Choose a file:</label>
         <input type="file" id="file" name="file">
      </form>
   </body>
	
</html>
Live preview

File upload boxes can also include attributes such as accept to specify the types of files that can be selected, and multiple to allow users to select multiple files at once. When the user selects a file and submits the form, the file is uploaded to the server along with the other form data, and can be processed and stored on the server as needed.

Button Controls

Button controls are used to trigger actions in a form, such as submitting the form or resetting the form fields. They are created using the <button> tag or the <input> tag with the type="button", type="submit", or type="reset" attribute.

Examples of button controls:
<!DOCTYPE html>
<html>

   <head>
      <title>Button Control</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "Click" value = "Click me" />
         <input type = "image" name = "image-button" src = "images/logo-sm.png" />
      </form>
   </body>
	
</html>
Output:
button-img

Button controls can also include attributes such as name and value to identify the button control in the HTML and when submitting the form data to the server. Additionally, the <button> tag can contain other HTML elements, such as images or icons, to create more complex button controls.

HTML <fieldset> element:

he HTML <fieldset> element is used to group related form controls together into a single unit and visually separate them from other parts of the form. It is often used in conjunction with the <legend> element, which provides a title or description for the group of form controls.

Here’s an example of how to use the <fieldset> and <legend> elements:

<!DOCTYPE html>
<html>

   <head>
      <title>Fieldset element</title>
   </head>
	
   <body>
      <form>
         <fieldset>
           <legend>Personal Information</legend>
           <label for="name">Name:</label>
           <input type="text" id="name" name="name"><br>
           <label for="email">Email:</label>
           <input type="email" id="email" name="email"><br>
           <label for="phone">Phone:</label>
           <input type="tel" id="phone" name="phone"><br>
         </fieldset>
       </form>       
   </body>
	
</html
Output:
fieldset-img

Radio Button Control

A radio button control is a type of input control used to allow users to select one option from a group of options. Radio buttons are created using the tag with the type=“radio” attribute, and each radio button in a group must have a unique name attribute and a common value attribute to identify the selected option.

Here’s an example of how to create a group of radio buttons:

<!DOCTYPE html>
<html>

   <head>
      <title>Radio Button Control</title>
   </head>
	
   <body>
         <form>
            <label for="gender">Gender:</label>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label>
            <input type="radio" id="other" name="gender" value="other">
            <label for="other">Other</label>
          </form>   
   </body>
	
</html
Live preview

Hidden Form Controls

A hidden form control is a type of input control that is not visible to the user, but is used to include data in the form submission. Hidden form controls are created using the <input> tag with the type="hidden" attribute.

Example
<!DOCTYPE html>
<html>

  <head>
     <title>Hidden Form Controls</title>
  </head>
	
  <body>
     <form>
        <input type="hidden" id="secret" name="secret" value="42">
        <input type="submit" value="Submit">
      </form>        
  </body>
	
</html
Live preview

Hidden form controls are often used to include data that is needed by the server to process the form submission, but that the user does not need to see or interact with directly. For example, a hidden form control could be used to include a user ID or session token with the form data, or to include a flag indicating that a particular action should be performed on the server side.

Previous
HTML - Phrase Tags
Next
HTML Images