How to build a simple signup form using HTML and CSS
Enomfon Vincent
Honestly, I stared at the screen for what seemed like forever. Learning something new is the hardest thing, but it can be easier when you can maneuver your way around it. In the business world, creating a website or webpage is a unique way of connecting to the universe and giving people confidence that you are running a legit business. Just like you need a key to unlock the door, you need a signup form/page to gain full access to the content on a web page. Almost all applications (apps) that store data require a signup form/page. This article explains the procedures for creating a neat, captivating form using HTML and CSS.
Prerequisite
A working environment/device ( PC preferable)
Data and internet access
A code editor app (Visual Studio Code preferable) which you can download via the link https://code.visualstudio
Introduction
This first little piece begins with what HTML and CSS are and why we use them. HTML is an acronym that stands for HyperText Markup Language. It is like a library where other web languages are built upon. It is the basic building block of every webpage and determines its structure. The structure is not enough to make the website functional and attractive so we’ll need CSS.
CSS stands for Cascading Style Sheets. It is the interior decor to the already structured webpage.
Properties of HTML
Element /Tags– It is the building block of an html document. Every html document must have a “Start tag,” “Element content,” and “End tag.” These tags include; heading tag (<h1-h6></>), <br></>, <p></> etc. The element content is made of ;
<head>-- This belongs to the browser. It is where you put your search engine for ranking when looked up by your user.
<body>-- This belongs to the user. It is every information the user will see on the webpage.
Example;
<h1> WE ARE BACK </h1>
The html example above is made of;
<h1>-- Start tag
“WE ARE BACK”-- Element content
</h1>-- End tag
Attributes– Found in a tag and used to add more information to an html element. They include; <value>, <label>, <lang> etc.
How to build a signup form using HTML
A signup form is a form that pops up on the system interface of a new site/app, where an individual or new user’s data like name, phone number, email, and password is collected for easy access in subsequent login/visit.
Here are the steps to build one:
Step 1. Choose an HTML editor: A text editor is needed to write HTML codes. You can use the Visual Studio Code editor downloaded into your device. on your PC and name it. You are at liberty to name it whatever you want.
Step 2. Create an HTML file: create a name folder first from your file manager. Open the code editor, then open the created folder and create an html file by clicking on the file icon at the top left corner of your editor, save it with the .html extension e.g myspace.html.
Step 3. Design your signup page using HTML: first, click on the added html file to open your workspace. Automatically, your system opens the html environment with the tag <index.html>. Then, begin to structure your page in HTML code.
This is what to write in your html environment
<!DOCTYPE html>: This command identifies the document type which is HTML5
<html>: This includes all the elements inside the html doc (tags, element, stylesheets, text ,images).
<head>: It houses the metadata that won’t be displayed on the screen. This is where you link your HTML to CSS using <link rel="stylesheet" type="text/css" href="signup.css">
<tittle>: It is where the title of the webpage is embedded
<body>: It contains elements such as; <img> ,<h1> ,<b> ,<i>.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"type="text/css" href="signup.css">
<title>sign up</title>
</head>
<body>
<div class="signupform">
<form>
<h1 class="title">sign up</h1>
<div>
<labelfor="name">Name</label>
<input type="name" class="input" placeholder="First">
<input type="name" class="input" placeholder="Last" required>
</div>
<div>
<label for="email">Email</label>
<input type="email" class="input" placeholder="abc@email.com" required>
</div>
<div>
<label for="name">password</label>
<input type="password" class="input" placeholder="password" required>
</div>
<div>
<label for="name">Confirm password</label>
<input type="password" class="input" placeholder="confirm password" required>
<input type="submit" value="SIGN UP" class="submit">
<div>
</form>
</div>
</body>
</html>
The image below is the structure of the HTML codes.
Step 4: Style your HTML using CSS: The purpose of CSS is to beautify the already-designed HTML structure. But before you style your HTML, you have to first.
Create a “style.css” file inside the already existing folder you created.
Link the CSS inside the html head tag using the link tag <style.css>. The linking can be done using; the Inline method, Internal or External method. The external method is the best way, so I'll explain how to go about it.
<link rel="stylesheet" type="text/css" href="style.css">
- Begin to style your html with css attributes like; background color, fonts, sizing, etc.
body{
box-sizing: border-box;
font-family: Georgia, 'Times New Roman', Times, serif;
flex-direction: column;
}
.signupform{
border-radius: 8px;
padding: 10px 20px;
padding-left: 0;
box-shadow: 0 10px 25px;
}
form{
background-color: rgb(224, 218, 218);
max-width: 50%;
border-radius: 10px;
padding: 20px 40px;
box-shadow: 0px 10px;
margin: auto;
}
.title{
font-size: 40px;
margin-bottom: 30px;
}
label{
/* width: 100%; */
/* margin-bottom: 20px; */
font-size: 20px;
}
input[type="name"],
input[type="email"],
input[type="password"],
input[type="Confirm password"] {
width: 100%;
padding: 20px 25px;
margin: 10px 0;
box-sizing: content-box;
border: 4px solid rgb(20, 219, 30);
border-radius: 10px;
}
input[type="submit"] {
background-color: rgb(129, 129, 233);
color: blanchedalmond;
box-sizing: border-box;
border: 2px;
padding: 5px 15px;
border-radius: 5px;
cursor: pointer;
margin: 0 auto;
}
input{
max-width: 70%;
}
.submit{
padding: 3rem;
margin: 0 auto;
}
Inserting the necessary attributes will give you your final outcomes like the one below.
N/B: As you are styling your html, always view the outcome so you can detect where there is a fault or where you need an adjustment in your measurement.
Conclusion
Almost all applications (apps), websites/webpages have a signup page because it gives users access to your page. It looked challenging building one, but we see that it can be made easier with the right tool and knowledge from this article.
Subscribe to my newsletter
Read articles from Enomfon Vincent directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by