HTML Forms

❮ Prev Next ❯

Formsare the way you can interact with a page, or an app, built with Web technologies.

You have a set of controls, and when you submit the form, either with a click to a "Submit" button or programmatically, the browser will send the data to the server.

By default this data sending causes the page to reload after the data is sent, but using JavaScript you can alter this behavior (not going to explain how in this book).

HTML Formsare used to collect user input data on a web page. Forms contain various types of input elements such as text fields, checkboxes, radio buttons,dropdown list,and more.

When a user submits a form, the data entered by the user is sent to the server for further processing.

A form is created using the form tag: 

<form>...</form>

By default forms are submitted using the GET HTTPmethod. Which has its drawbacks, and usually you want to use POST.

You can set the form to use POST when submitted by using the method attribute: 

<form method="POST">...</form>

The form is submitted, either using GET or POST, to the same URL where it resides.

So if the form is in the https://flaviocopes.com/contacts page, pressing the "submit" button will make a request to that same URL.

Which might result in nothing happening.

You need something server-side to handle the request, and typically you "listen" for those form submit events on a dedicated URL.

You can specify the URL via the action parameter: 

<form action="/new-contact" method="POST">...</form>

This will cause the browser to submit the form data using POST to the /new-contactURL on the same origin.

If the origin (protocol + domain + port) is https://codingkoleji.com(port 80 is the default), this means the form data will be sent to https://codingkoleji.com/new-contact

I talked about data. Which data?

Data is provided by users via the set of controls that are available on the Web platform:

  • input boxes (single line text)
  • text areas (multiline text)
  • select boxes (choose one option from a drop-down menu)
  • radio buttons (choose one option from a list always visible)
  • checkboxes (choose zero, one or more option)
  • file uploads
  • and more!

The <form>element contains all the input elements of a form.

The actionattribute specifies where to send the form data, and the method attribute specifies the HTTP method to use when sending the form data

Here's an example of a simple form with a text input field: 

<form action="/submit-form" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

In the above example, the form data will be sent to the URL /submit-formusing the HTTP POST method when the user clicks the "Submit" button. The form contains a single text input field with a label "Name"

There are many types of input elements that can be used in a form, each with its own specific purpose. Here are a few examples:

  • <input type="text">Creates a text input field for the user to enter text.
  • <input type="checkbox">Creates a checkbox that the user can select or deselect.
  • <input type="radio">Creates a radio button that the user can select from a group of options.
  • <select> and <option> Creates a dropdown list of options for the user to select from.
  • <textarea>Creates a multiline text input field for the user to enter longer pieces of text.

Example 

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Title of the Document</title>
</head>
<body>
  <h1>HTML Form</h1>
  <form action="/submit-form" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <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>
    <label for="age">Age:</label>
    <select for="age">
      <option value="18-24">18-24</option>
      <option value="25-34">25-34</option>
      <option value="35-44">35-44</option>
      <option value="40+">40+</option>
    </select>
    <label for="comments">Comments:</label>
    <textarea id="comments" placeholder="write comments here"></textarea>
    <input type="submit" value="Submit">
  </form>
  </body>
</html>

In this example, the form contains a text input field for the user's name, an emailinput field, a set of radio buttons for the user's gender, a dropdown list for the user's age, and a textarea for the user's comments.

When the user clicks the "Submit" button, the form data will be sent to the URL /submit-form using the HTTP POST method.

After you understand what form is and some form input now let see what Form Attribute are in the next chapter.

❮ Prev Next ❯