HTML Forms

An HTML form is a container that holds interactive elements used to collect user input and send it to a server for processing.

Structure :
An HTML form is defined using the <form> element. It typically consists of the following components:

1. Form Start Tag: <form>
• The <form> tag represents the start of the form.
2. Action Attribute
• The action attribute specifies the URL or server-side script that will handle the form data when it is submitted.
• Example: <form action="/submit" method="POST">
3. Method Attribute
• The method attribute defines the HTTP method to be used when submitting the form.

Common methods are :

• GET: Sends form data as query parameters appended to the URL. Suitable for simple data retrieval.
• POST: Sends form data within the request body. Suitable for sensitive or large data.
• Example: <form action="/submit" method="POST">
4. Form Fields

Various types of form fields can be included within the <form> element to collect user input. Some common form field types are:

• <input> : Text input, checkboxes, radio buttons, etc.
• <select> : Dropdown menus for selecting options.
• <textarea> : Multi-line text input area.
• <button> : Submit or reset buttons.
• Example: <input type="text" name="username">
5. Submit Button
• A submit button triggers the form submission process when clicked. It is defined using the <input> element with type="submit".
• Example: <input type="submit" value="Submit">
6. Form End Tag: </form>
• The </form> tag represents the end of the form.

Here's a simple example of an HTML form with a text input field and a submit button:

Edit Copy Hide

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Enter your username">

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

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Enter your username">
  
  <input type="submit" value="Submit">
</form>

In this example, we have a simple form with a text input field. The user can enter their username, which will be submitted to the "/submit" URL when the form is submitted. The name attribute is used to identify the field in the form data.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<form action="/submit" method="POST">
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
    <option value="uk">UK</option>
  </select>
<input type="submit" value="Submit">
</form>
      

In this example, we have a form with a select dropdown field for selecting a country.
The selected country value will be submitted to the "/submit" URL when the form is submitted. Each option is defined using the <option> element within the <select> element.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<form action="/submit" method="POST">
  <label for="newsletter">Subscribe to Newsletter:</label>
  <input type="checkbox" id="newsletter" name="newsletter">
  
  <input type="submit" value="Submit">
</form>

In this example, we have a form with a checkbox field for subscribing to a newsletter. The user can check the checkbox to indicate their subscription preference. When the form is submitted, the value of the checkbox (typically "on" when checked) will be sent to the "/submit" URL.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<form action="/submit" method="POST">
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4" cols="30"> </textarea>
  
  <input type="submit" value="Submit">
</form>
  

In this example, we have a form with a textarea field for entering a message. The user can enter multiple lines of text within the textarea. The content of the textarea will be submitted to the "/submit" URL when the form is submitted.

These examples demonstrate different types of form fields that can be used to collect user input. You can combine and customize these fields according to your specific requirements. Remember to specify the action attribute to determine where the form data should be sent, and the method attribute to determine the HTTP method to use (typically GET or POST).