HTML Forms

An HTML form is composed of form elements, which are different kinds of input elements, such as checkboxes, text fields, submit buttons, radio buttons, and so on.

The HTML <input> element

The <input> element is an essential form element, which, depending on the "type" attribute, can be displayed in different ways.

Let’s speak about some of input types.

Text input

The <input type="text"> specifies a one-line input field for text input.

Example of the text input:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Text Input Example</h2>
    <form>
      Name:<br>
      <input type="text" name="name">
      <br>
      Surname:<br>
      <input type="text" name="surname">
    </form>
  </body>
</html>

Radio Button Input

The <input type="radio"> specifies a radio button with the help of which you can select one of many choices.

Example of the radio button input:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Radio Button Example</h2>
    <form>
      <input type="radio" name="game"value="football" checked> Football
      <input type="radio" name="game" value="basketball"> Basketball
    </form>
  </body>
</html>

Submit input

The <input type="submit"> submits the form data to a form-handler.

The form-handler is a server page with a script to process input data, which is defined in the "action" attribute of the form.

Example of the submit input:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>HTML Form Example</h2>
    <form action="/form/submit" method="POST">
      Name:<br>
      <input type="text" name="firstname" value="Tom">
      <br>
      Surname:<br>
      <input type="text" name="lastname" value="Brown">
      <br>
      Age:<br>
      <input type="text" name="Age" value="21">
      <br><br>
      <input type="submit" value="Submit">
    </form>
    <p>Click the "Submit" button, to sent the form-data to the action page.</p>
  </body>
</html>

The Action Attribute

The "action" attribute specifies the action that should be performed when the form is submitted.

When the user the form data is sent to a web page on the server when the user clicks on the submit button.

<form action="/form/submit">

The Target Attribute

The "target" attribute defines whether the form result is open in a new browser tab, frame, or in the current window.

The default value of this attribute is "_self". Using this value will open the form result in the current window.

The "_blank" value will open the form result open in a new browser tab.

<form action="/form/submit" target="_blank">

The Method Attribute

The "method" attribute defines the HTTP method (GET or POST) that will be used when submitting the form data.

Example of the GET method:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>The method Attribute With the GET Method</h2>
    <form action="/form/submit" target="_blank" method="GET">
      Neame:<br>
      <input type="text" name="name" value="Tom">
      <br>
      Surname:<br>
      <input type="text" name="Surname" value="Brown">
      <br>
      Age:<br>
      <input type="number" name="Aage" value="21">
      <br><br>
      <input type="submit" value="Submit">
    </form>
    <p> Here we used the "_blank" value, which will open the form result in a new browser tab.</p>
  </body>
</html>

Example of the POST method:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>The method Attribute With the Post Method</h2>
    <form action="/form/submit" target="_blank" method="POST">
      Name:<br>
      <input type="text" name="name" value="Tom">
      <br>
      Surname:<br>
      <input type="text" name="surname" value="Brown">
      <br>
      Age:<br>
      <input type="number" name="age" value="21">
      <br><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

When to use the GET Method

GET is the default method when submitting form data, and when using this method the form data is visible in the page address field.

Don’t use the GET method to send sensitive data, because it will be visible in the URL.
The GET method is useful for form submissions where a user wants to bookmark the result.
The length of a URL is limited (maximum 2048 characters).

When to use the POST Method

If the form data includes sensitive or personal information, always use the POST method, as it doesn’t display the submitted form data in the page address field.

As there are no size limitations while using the POST method, it can be used to send large amounts of data.

Form submissions with the POST method can’t be bookmarked.

Other Attributes

Below you can find other <form> attributes:

Attribute Description
accept-charset This attribute defines the charset that is used in the submitted form (default: the page charset).
autocomplete This attribute defines whether the browser should autocomplete the form or not (default: on).
enctype This attribute defines the encoding of the submitted data (default:url-encoded).
name This attribute defines a name that is used to identify the form.
novalidate This attribute defines that the browser must not validate the form.



Do you find this helpful?

Related articles