How to Create A Basic Sign Up Form with HTML

365 Days of CodingFront EndSign Up Form Challenge
Written By Rachael Smith

Happy day 8 of 365 Days of Coding! Today we are starting a 4 day series on creating a sign up form! This form can have any input but you must require, first name, last name, phone number and email. It should also have a section for OAuth (allow for sign in with Facebook, Google, etc.). The phone number must be formatted. It will also have validation for the email and phone number. Since this is more than just 1 function I am going to create a Github repository for it. Every day will be a branch and each day the branch will be merged into master so master will eventually have the final solution but each day will still be broken out if you want to see my solution for each day as well. Here is the link to the repository I will also link it below.

If you would like me to do a post on Github and how to use it let me know I am happy to do so!

Disclaimer: there are MANY ways to solve this challenge this is just my version of this challenge

TLDR: Solution is at the bottom of the post

Repo for this series: https://github.com/hellodevworldblog/SignUpForm

To test your code all your have to do is go to the folder where the index.html document created is and double click it. It will open a web browser with your code. To see changes you have made save the file and refresh that page.

The Problem

Create a page with a basic form

Solution

You can clone or fork the repository if you want or create your own. Once you do so create an index.html file in the folder that was created for the repository on your machine.

First we need to create our boiler plate for the HTML document.

Note: VS Code has a built in helper. If you write “doc” and press tab it will write out the boilerplate. You can leave everything alone but I am going to change the “title” this tag changes the text for the tab in your browser for that page. I am going to make it “Sign Up Form”

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
    </head>
    <body>
    </body>
</html>

I am going to add a container to hold our form. This will just be a div with a class called “formContainer”. This is proper practice and helps with readability. We will also be using it later (in day 2) for styling.

Note: I like to use camel case for my classes and most of my naming. You can use whatever naming convention you want you do not HAVE to use camel case

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
    </head>
    <body>
        <div class="formContainer">
        </div>
    </body>
</html>

I am going to create a title for my form with and h1 tag and we need to create inputs for each field in the challenge. These are all going to be type text. I am going to add a name attribute and this is used for referencing for data and is a way to reference the input in JavaScript. You will also want to add this if you are using labels as this is how labels will reference which input it is for.

I am also going to use placeholder as I am not going to use a label. The placeholder attribute will add the grey text you see a lot in search bars that goes away once you click on it or start typing.

All of the inputs are going to be required so I will be adding a required attribute for them. If you have optional inputs on your form you do not need this attribute. You can also add validation for those input later in JavaScript so this attribute really isn’t required.

The last input is going to be our submit button. This is going to be type submit instead of type text as it is a submit button. The value attribute is going to be the text that shows on the button.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
    </head>
    <body>
        <div class="formContainer">
          <h1>Sign Up!</h1>
          <form>
              <input type="text" name="firstName" class="formInput" placeholder="First Name" required />
              <input type="text" name="lastName" class="formInput" placeholder="Last Name" required />
              <input type="text" name="email" class="formInput" placeholder="Email" required />
              <input type="text" name="phoneNumber" class="formInput" placeholder="Phone Number" required />
              <input type="submit" name="submitButton" value="Sign Up">
         </form>
       </div>
    </body>
</html>

So now we have our basic form but it looks a little funky. We are going to have a styles file later to put all our styling but since we are just doing one style today I am going to add it to the index file.

I am going to target the class name formInput since I was the styling applied to all the inputs I added and that class is on all of those inputs. I am making it display block, this makes that element take up the whole line that it is on. You can read more about this css property here and I am also going to at a bottom margin to give the inputs some space between each other.

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Sign Up Form</title>
  </head>
  <body>
      <div class="formContainer">
          <h1>Sign Up!</h1>
          <form>
              <input type="text" name="firstName" class="formInput" placeholder="First Name" required />
              <input type="text" name="lastName" class="formInput" placeholder="Last Name" required />
              <input type="text" name="email" class="formInput" placeholder="Email" required />
              <input type="text" name="phoneNumber" class="formInput" placeholder="Phone Number" required />
              <input type="submit" name="submitButton" value="Sign Up">
         </form>
      </div>
  </body>
</html>
<style>
    .formInput {
        display: block;
        margin-bottom: 10px;
    }
</style>

There you have your basic form! Its not pretty but we will work on that tomorrow. I am not using labels because for the style of form I want I don’t need them but if you do it will look like this.

    <div class="formContainer">
        <h1>Sign Up!</h1>
        <form>
            <label for="firstName">First Name</label>
            <input type="text" name="firstName" class="formInput" placeholder="First Name" required />
            <label for="lastName">Last Name</label>
            <input type="text" name="lastName" class="formInput" placeholder="Last Name" required />
            <label for="email">First Name</label>
            <input type="text" name="email" class="formInput" placeholder="Email" required />
            <label for="phoneNumber">Phone Number</label>
            <input type="text" name="phoneNumber" class="formInput" placeholder="Phone Number" required />
            <input type="submit" name="submitButton" value="Sign Up">
        </form>
    </div>

If you do not want the grey text in the inputs just remove the placeholder attribute. You can also use a HTML form if you want but the way I am going to write this worm we don’t need to.

I hope you had fun with this one! Please leave your repo links to your form in the comments section. Also let me know if you like the multi day challenges or really hate them! If you have any challenge you would like to see done also leave that in the comments below you may see it come up! If you would like to get the challenge emailed to you every day in morning and a notification when the solution is posted subscribe below.

Rachael Smith
Previous

Day 9 Challenge
Next

Day 8 Challenge