start learning
Image 1

HTML Forms

HTML forms are a fundamental part of web development that allow users to input and submit data to a server. Forms provide a structured way to collect information from users through various types of input fields.

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
  5. 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">
  6. 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">
  7. 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:


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

Preview :

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

Text Input Field


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


Preview :

Select Dropdown

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


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


Preview :

Checkbox

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


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


Preview :

Textarea

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


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


Preview :

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).


Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor