web Archives - Michiel Arkema's Blog https://blog.michielarkema.com/tag/web/ The Official blog of Michiel Arkema Wed, 01 Mar 2023 13:12:51 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.5 214496708 How To Quickly & Easy Create A Login Form With Html and JavaScript https://blog.michielarkema.com/coding-secrets/how-to-quickly-easy-create-a-login-form-with-html-and-javascript/ https://blog.michielarkema.com/coding-secrets/how-to-quickly-easy-create-a-login-form-with-html-and-javascript/#comments Wed, 01 Mar 2023 13:05:48 +0000 https://blog.michielarkema.com/?p=331 Forms are one of the coolest features that you can add to your website. Whether it’s a login form, newsletter form, or search bar form. You can do anything with…

The post How To Quickly & Easy Create A Login Form With Html and JavaScript appeared first on Michiel Arkema's Blog.

]]> Forms are one of the coolest features that you can add to your website. Whether it’s a login form, newsletter form, or search bar form. You can do anything with it that you desire.

So that’s why if you read this blog post till the end, you will discover exactly how to create a simple login form using only HTML and JavaScript.

If you’ve been following me on Facebook for awhile, you are probably aware that I love telling stories about how I learned everything. So let me tell you a quick story about the first time I created a form for my website.

A few years back while I was in college, the teachers gave us the job to create our own portfolio website. Me of course with my ADHD getting all exited about it, I quickly created the website within an hour, once it was finished, I was so proud of myself that I had managed to create my very first website from scratch ever.

Now looking back at this memory, the website was the ugliest thing that I’ve ever seen but hey, it was pretty good for the time being. But the coolest feature that I had added was a little contact form where people could fill in their email address, their full name, and a short message that they wanted to send me.

Again, of course, me being super happy and hyper about it, I immediately shared my website with my classmates. Which turned out to be a horrible idea because that resulted in me getting thousands of spam messages sent to my email inbox through the little contact form.

Creating The Login Form

The creation of the login form is going to be split up into two parts. First, we will create the JavaScript code, and then as second, we will add the html.

Writing the JavaScript code

First, we will write the JavaScript code. So let’s assume that our login form has two input fields and a submit button. So let’s create the code based on that idea.

// To get started, let's retrieve the form element from our document.
const loginForm = document.querySelector("#loginForm")

// Now, let's grab the onsubmit event (That will run when we press the submit button).
// And add our own callBack handler to it. 
loginForm.onsubmit = (ev) => {
  // preventDefault will prevent the page from changing.
  ev.preventDefault();
  // All code in here will be executed when we press the submit button.
  
  const emailAddress = loginForm.elements.namedItem("emailAddress").value
  const password = loginForm.elements.namedItem("password").value
  
  console.log("Email Address: " + emailAddress)
  console.log("Password: " + password)
}

So in a nutshell, the code above will above will print out the values that we put in our form into the console, once we click the submit button.

PS – Put the JavaScript into a separate file with the name ‘script.js’.

Now, let’s add the HTML to the web page.

Adding the HTML

The second step is to add the html to our web page. Now this is very straight forward so you can literally just copy & paste the code below…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome login form</title>
</head>
<body>
    <form id="loginForm">
        <label for="email">Email:</label>
        <input type="email" id="email" name="emailAddress" placeholder="email@website.com" required>
        <br>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <br>
        <button type="submit">Click Here To Login</button>
    </form>

    <script src="script.js"></script>
</body>
</html>

Now when looking at the code above, you might be wondering… Michiel why did you add the script tag at the bottom of your body element?

Well, I did that because, in our JavaScript, we grab the form element from the HTML so we can access its input elements. If I would add the script tag before our form element, the JavaScript code would be executed before the form would be loaded onto the screen, which would result in an error.

So that’s it, you now know how you can quickly & easy create your very own login form using only HTML and JavaScript.

If you did found this blog post helpful, leave a comment down below saying how it helped you and your over al opinion about the post itself :).

And Remember, your dream career is closer than you think it is!

Michiel Out!

The post How To Quickly & Easy Create A Login Form With Html and JavaScript appeared first on Michiel Arkema's Blog.

]]> https://blog.michielarkema.com/coding-secrets/how-to-quickly-easy-create-a-login-form-with-html-and-javascript/feed/ 1 331