Web Form in Plain HTML

former_member786693 · ‎2022 Mar 03

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

An HTML form is composed of several form controls such as input, checkbox, dropdown, radio buttons, text fields, and buttons. Form controls can be programmed to ensure the specific formats of values entered by the 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 of programming is required.

1. Create an 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 consists 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 attributes 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 registration 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 misinformation or wrong format in the form. It redirects the user towards the accepted format via the warning messages. The user validation in HTML can be coded through a combination of required, max length and pattern attribute.

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 does not allow number format or blank field. Once the user fills out all the fields correctly, the user can 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 involve different programming languages.

7. Execute the code

Double click the HTML file 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 here and the form deployed here. As we can see from the screenshot above, HTML doesn't give a lot of options when it comes to page visualization. The second tutorial will focus on the visualization of a registration form using the Fundamental NGX Library. For more information, follow the Fundamental Library community.