Web Form in Plain HTML

Web forms can be pictured as a bridge between a user and a web site or application. They are commonly used to collect user data which is technically referred as client side and store them to a database or client side. There are several types of forms offered on the internet but in this tutorial will focus on creating a web form in plain HTML.

A HTML form is composed of several form controls such as input, checkbox, dropdown, radio buttons, textfields, buttons. Form controls can be programmed to ensure the specific formats of values entered by user. Usually all the form controls are paired with labels to shortly describe their purposes to the user.

For this tutorial you will need:

  • Your favourite code editor.
  • Your favourite web browser.

Note: No previous knowledge in programming is required.

1. Create a HTML file

Open your favourite code editor and create a new file. Name the file and save it using the .html extension.

2. HTML Declaration

All the HTML documents start with a HTML declaration. With the introduction of HTML5 the declaration code all the HTML documents start with:

<!DOCTYPE html>

The purpose of the declaration is to let the browser know the type of the document and the version of the HTML.

3. Structure the File

Every HTML file consist of two main parts:

  • Head : contains information about the document such as the title and any further extensions such as CSS, different script languages or meta tags.
  • Body : contains the document’s content which is shown in the browser.
<!DOCTYPE html>
<html>
<head>
<title>Register Page</title> </head> <body> </body>
</html>

4. HTML Form

All HTML forms begin with the <form> element. This element identifies the form within the HTML file. It contains two main attribute which configure the way the form behaves.

  • Action: defines the URL path the form will follow after the data is submitted
  • Method: defines the HTTP method (usually get or post) that the data will be transported to the client side.
<form action="/form-page-handling" method="post">
</form>

5. Register Form

This tutorial’s register form is a combination of different form controllers:

  • <fieldset> : It is used to group all the controls and labels used within this registration form.
  • <legend> : It provides a caption for the fieldset.

The input element offers a variety of types through different type attributes, some of which are used in the registration form.

  • <input type="text"> : It creates a basic single line inputs which are visible as the user types away.
  • <input type="email"> : It helps the user to enter or edit an email address.
  • <input type="password"> : It provides a secured way for user to type in the password.
  • <input type="date"> : It lets the user pick a date from the datepicker.
  • <input type="checkbox"> : It creates a box which can be checked when the user clicks on it
  • <input type="reset"> : It resets all the input fields.
  • <input type="text> required list="listname"> : It is a combination of two attributes which create a dropdown menu with several option. In order for the input element to be complete, a <datalist id="listname"> element is added to populate the dropdown menu with options. 

6. User Validation

An important step before sending the data to the server side is to make sure that all the required fields are filled out in the correct format. The user validation is the first step that catches any misiformation or wrong format in the form. It redirect the user towards the accepted format via the warning messages. The user validation in HTML can be coded through a combination of required, maxlength and patternattributes.

The example below demonstrates the case where the user tries to enter numbers instead of letters in   the first name input field. In this case the user will get a warning message as the first name input controller has the respective attribute, required maxlength=”32″ pattern=”[A-Za-z]{1,32}” which do not allow number format or blank field. Once the user fills out all the fields correctly, the user is able to submit the form through the register button. The data collected from the form will be sent to the server side through POST or GET methods which involves different programming languages.

7. Execute the code

Double click the HTML file in order to see how the page is represented in the browser.

This article focused on creating a web form on plain HTML without any prior programming experience. The full code of the Registration Page can be found hereand the form deployed here. As we can see from the screenshot above, HTML doesn’t give lot of options when it comes to page’s visualization.The second tutorial will focus on the visualization of a registration form using Fundamental NGX Library.