How to Write a Online Form in HTML

Would you like to set up a form on your website yourself? Then you have come to the right place. We will show you how web forms are structured and how you can create a form yourself with the desired input fields.

Websites are written in the markup language HTML. HTML stands for Hypertext Markup Language and is the basic language for the construction and structuring of websites. The description of an online form, i.e. which input fields are available and what labels they have, is also written in HTML. Below we will show you how this HTML code is structured and how you can use it to write your desired form yourself.

If HTML doesn't mean anything to you, you can find a beginner's tutorial at the following link: HTML For Beginners The Easy Way.

Structure of an HTML form

The following HTML code shows the source code of an example form, which we will explain to you step by step.

<form action="backend.php" method="post">

  <label for="name">Your name</label>
  <input type="text" id="name" name="Name">

  <label for="email">Email address</label>
  <input type="email" id="email" name="Email">

  <label for="msg">Your message</label>
  <textarea id="msg" name="Message"></textarea>

  <button type="submit">Submit</button>

</form>

To create an online form, HTML tags such as form, input, textarea, select and option are used.

form tag

The form tag is the container element for the form. It encloses all fields for entering content and contains information for sending the message.

<form action="backend.php" method="post">
  ...
</form>

The fields for entering content are defined between the opening and closing form tag. Attributes are used to enter some information in the form tag to specify where the form data should be sent and in what technical form the data should be transmitted. Below we explain the meaning and purpose of this information.

How does the form submission work?

The site visitor fills out the fields of the form and triggers the transmission by clicking on the send button. The web browser then compiles all form entries into a list with key-value pairs consisting of field names and field values. It sends this data to the backend, which takes over further processing.

The Backend

The backend is a computer program that accepts the form submissions and processes them further. Such a backend script often forwards the form entries as an email message.

The web address of the backend is entered in the action attribute of the form tag. The web browser sends the form input to this address when the form is submitted.

The sending methods GET and POST

The correct HTTP method must be set in the method attribute. There are two methods that can be used to set up form transmission. These are called GET and POST. The GET method is primarily used to retrieve data from a server and only transmit data in small amounts. POST, on the other hand, is specifically designed to transmit data to the server, even in larger amounts. This is why the POST method is generally used to send online forms.
When choosing the method, consider which method is required by the backend used so that the data is transmitted in the correct form.

Data encoding

The attribute enctype specifies the MIME type. This determines the data encoding used for transmission.

The type application/x-www-form-urlencoded is used as standard and does not need to be specified separately. If files are transferred with the form, the MIME type must be set to multipart/form-data.

<form action="..." method="post" enctype="multipart/form-data">

Character set

The accept-charset attribute informs the web browser in which character set the text characters should be sent to the backend script. Nowadays, the UTF-8 character set has prevailed and is used as the standard. If you notice that special characters or umlauts are not sent correctly, it is often because the backend is working with a different character set. In this case, you can use this attribute to change the character set to e.g. ISO-8859-1.

<form action="..." method="post" accept-charset="UTF-8">

The input elements of a form

The HTML standard provides a number of elements that you can use to create a form with the input fields you want.

Below we show you the different input elements, including an example HTML code that you can use and adapt for your form. The HTML code of all form fields must be inserted between the opening and closing form tag so that these fields are considered part of the form and are sent when it is submitted.

The text field

The most commonly used form element is a simple text field. This can be used for a variety of content that does not require multi-line text input.

A text field is used, for example, to enter a name, an address or any other text input. Let's look at the HTML code for a text field:

<input type="text" name="Field name" value="">

The input tag is used to mark a form field in HTML. To tell the browser that this form field is a simple text field, this is specified using the type="text" attribute.

Field attributes

Several attributes can be entered for the input tag to specify the exact field settings. The attributes type and name are mandatory for input fields and must always be present. Other attributes are optional and only need to be specified when using the respective functionality. Let's now look at the use of the most important attributes:

Type attribute

The attribute type must be present in every input field and indicates what type of input field it is. For a text field, text is entered here. But other information is also possible, which we will look at later in the description of the various input elements.

Name attribute

The field name is entered in the attribute name and is essential! This name is transmitted as a title together with the field input (value) during transmission.

Value attribute

The value attribute allows you to pre-fill a field with a value. However, form fields are usually empty when the page is opened and are only filled in by the user. In this case, you can omit this attribute.

Placeholder attribute

The text specified in this attribute is displayed as a placeholder in the form field as long as nothing has been entered in this field. This can be useful to give the user information on how to enter the data correctly. For example, if the input should be in a certain format.

Labeling of the input fields

Of course, a form field also needs a label so that the visitor to the site can see what information needs to be entered. The label tag is provided for this in HTML. The label text is inserted as the content in this tag. In order to create a logical connection between the label and the input field, an arbitrary but unique identifier is entered in both tags. This example should make things clear:

<label for="field-01">Your name</label>
<input type="text" name="Name" id="field-01">

Input fields for telephone numbers and email addresses

To mark text fields for entering a telephone number or email address, enter the value tel or email in the type attribute. This allows the web browser to understand what type of input is expected and to support the user in entering the data. This means, for example, that an appropriately adapted keyboard is displayed when entering data on a smartphone.

<label for="field-01">Phone number</label>
<input type="tel" name="Phone" id="field-01">

<label for="field-02">Email address</label>
<input type="email" name="Email" id="field-02">

The multi-line text field

For a text field for entering multi-line text, a separate element with the tag textarea is used in HTML.

<textarea name="Message"></textarea>

If you want to pre-fill a textarea with content, insert the text as content between the opening and closing tag.

Checkboxes

Checkboxes are options that can be activated by the user. Activated checkboxes are displayed with a cross or a check mark, depending on the browser and operating system, and are often used in online forms, for example to have the user confirm the terms and conditions.

In HTML, a checkbox is created with an input element and the type checkbox.

<input type="checkbox" name="Terms and Conditions confirmed" value="Yes" id="option-terms">
<label for="option-terms"> I confirm the terms and conditions</label>

Please note that the value of the checkbox is only transferred when activated. To avoid this behavior and always transfer a value for this information, it is a little trick to add a hidden form field to the markup, the value of which is transferred when the checkbox is not activated. Here is an example:

<input type="hidden" name="Callback requested" value="No">
<input type="checkbox" name="Callback requested" value="Yes" id="option-callback">
<label for="option-callback"> I would like to receive a call back</label>

If the checkbox is not activated when the form is submitted, the value "No" is transferred for the form field named "Callback requested". Activating the checkbox overwrites the information and the value "Yes" is transferred.

Option selection with radio buttons

Radio buttons are used when a user needs to choose from several predefined answer options for a form entry.

For each option, an input element with type radio is created in HTML.

<input type="radio" name="favorite color" value="red" id="radio-01">
<label for="radio-01">red</label><br>

<input type="radio" name="favorite color" value="blue" id="radio-02">
<label for="radio-02">blue</label><br>

<input type="radio" name="favorite color" value="green" id="radio-03">
<label for="radio-03">green</label>

Using the same name for all radio buttons within a group (here "favorite color") ensures that the user can only select one option. When the user selects one option, the other options are automatically deselected.

Only the option selected by the user is transmitted. If no radio button is activated, no transmission takes place. If you want to ensure that an option selection is always sent for this form entry, you can preselect an option using the checked attribute:

<input type="radio" name="favorite color" value="red" checked>

Selection list with select field

A select field (often called a drop-down list) is used in an HTML form to provide the user with a choice from a list of options.

The HTML tags select and option are used for implementation. Here is an example of how to create a select list in HTML:

<label for="select-01">Country:</label>
<select name="Country" id="select-01">
  <option value="Germany">Germany</option>
  <option value="Austria">Austria</option>
  <option value="Switzerland">Switzerland</option>
</select>

An option must be created in the markup for each possible selection. The content of the option tag is used for display. For transmission during the send process, however, the value from the value attribute is taken.

Divide the form into sections

The HTML element fieldset can be used to group form fields and divide the form into areas.

<form action="...">
  <fieldset>
    <legend>Section A</legend>
    ...
  </fieldset>
  <fieldset>
    <legend>Section B</legend>
    ...
  </fieldset>
</form>

The form fields that belong to this group are placed within the fieldset tag. In addition, an area title can be inserted at the beginning of the fieldset using legend.

Buttons

Buttons can be used to trigger an action. Two types of buttons are relevant for forms. On the one hand, the submit button, which triggers the sending process, and the reset button, which resets all form fields.

<button type="reset">Reset form</button>
<button type="submit">Submit form</button>

The buttons must be located in the content area of ​​the form tag so that they are functionally connected to the form.