Create an HTML registration form

A registration form is one of the most frequent elements in any application that requires access from a user. In this post, we will teach you how to create a registration form in HTML with the different inputs username and password.

How to create a registration form in HTML?

A registration form is a component, usually located on the home page of our application, that allows us to control user creation. This form usually has inputs of text type so that the user creates their name and password with which they will access our application.

To create a registration form in HTML, as with any element that requires a new view, we will have to create a new file. In our case, we have created the file signup.html, although you can call it whatever you want.

Within this new file, you can create an automatic skeleton that you will then modify. If you are working with Visual Studio Code, inserting the letters .html will cause Emmet (abbreviation tool) to give you the option to create different skeletons. We will work with a base HTML5 skeleton. Below you can see what this skeleton looks like:

Once we have this initial skeleton, we can place ourselves in the bodysuit to start inserting the labels we will need.

To create a registration form in HTML, the fundamental tags to take into account are form and input. To understand the label form, You can read our post about forms in React. If you want to know more about input, We invite you to read our post on types of input in React.

Now, within the bodysuit From our skeleton we will create a form However, first we will create a main and inside a section to place this form Below you can see these initial lines of code:

Maybe when you insert the label form within your skeleton the attribute is immediately activated action. Whether or not to use this attribute depends on your project. If you use it, what the browser and the tag will do form is to consume the URL you put in action to make a request to the server directly and authenticate whatever you want. However, many times you will want to manage your forms directly from JavaScript. This is the difference between uncontrolled forms and controlled forms.

Now that we have managed to create an HTML registration form, we must decide what inputs insert in this form. That is, what data do we want to ask the user to register in our application. In our case, we have decided to ask for the username, password and confirmation of the inserted password (repeat the initial password).

Below, we show you the lines of code that we have inserted to create these three inputs. Keep in mind that we have given each one the same name and ID to recognize them more easily and not kill our brains with names.

What other elements can we insert?

Now that we have managed to create an HTML registration form with the input desired, we can Insert some other attributes and tags to offer better user experience. That is, we can insert a labels to each input so the user knows what to insert in the given space. Additionally, we can put an attribute placeholder to facilitate understanding of the type of response desired.

Below we show you the changes we have made to our form using the tag labels and the attribute placeholder:

Now, the only thing left to create a registration form in HTML is to generate a button of type submit so that the user can send their data by clicking on the element.

Create user

The result of what we have done in this post is seen in the following image:

What is the next step?

Now that you know how to create an HTML registration form, It’s time for you to create your own forms! To continue learning about the creation and development of web elements and projects, we recommend our Full Stack Web Development Bootcamp, a space where you will learn to develop with fundamental tools and languages ​​such as HTML, CSS and JavaScript. What are you waiting for to take the next step in your training? Sign up now and become an expert in a matter of months!