Almost everyone who has used the Internet has come across Forms, many Internet users who are familiar with forms have come across them when signing up or joining a particular platform, it could be a Gmail sign-up page, Instagram, Facebook, or many other platforms. It is safe to think of a form as a door that can enable access to some information once opened. This article serves both beginners and experts in web development.
This article will showcase how to create an online flipping form, we will create a sign-up page for new users and a log-in form for existing users. The form will flip on click to the sign-up page if one is a new user and flip on click if one is an existing user. We will dive in shortly and it will come clear. We will build the structure of the form via HTML, make our form look good using CSS, and then introduce some Javascript for interactivity.
To make this more fun, we will break it down it two parts;
Part 1 → Will cover the HTML part.
Part 2 → Will cover the CSS part. Here is a link for part 2. https://dev.to/george_kingi/the-power-of-css-in-styling-up-forms-o8m
Let's grab a seat, shall we?
A form is a container that allows users to input data and submit it to a web server for processing. Forms are fundamental in enabling user interaction and data submission. The <form> <\form> element defines a form in HTML.
Definition and Uses of Tags
When creating a form, the <form> element acts as a container for other elements. The space within the form is defined by the <input> tag which allows users to input data. The <input> tag is defined by the type attribute which sets data in the form of text, number, date, image, reset, etc, while the placeholder provides the watermark.
Examples:
<input type =”text” >
<input type= “number”>
It is possible to define a class within the <input> element as we can see below, to allow for styling of the contents of the tag. The Placeholder attribute provides a watermark for the “First name”.
<input type="text" class="input-box" placeholder="First name" required>
An Overview of the Final Form
A Preview of the Front and Back of the Form
Creating The Online Flipping Form from Scratch
We will go ahead and create an HTML file and a CSS file then link them via the external style. Our code editor for this case will be the VS Code.
To create the Form follow the below steps;
- Create a folder and name it whatever you want.
- Open Vs Code Editor, go to file select open folder then select the folder you just created.
While on the Vs Code Editor, create a new file and name it
index.html. The file name must have the extension.htmlCreate a new file and name it
style.css. file. The file name must have the extension.css.
You should have something like the snip below, I named my folder “FLIPPING FORM”.
You do not need to generate the below code line by line, just hold shift and press the ! (exclamation mark ) on the keyboard, and the below code will be auto-generated, change the title to whatever you want,
Then use the link element to connect the HTML and CSS files as below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Flipping Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
The first step, declare three <div>s with their respective classes as we can see below, and then declare our <form> tag in the last <div>. Remember to name the heading of your page and the title which in this case is “Online Flipping Form” and ”‘Login” respectively.
To note, the class names we declared are random names that will help us when using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Flipping Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" >
<div class="card">
<div class="card-front">
<h2>Login</h2>
<form>
</div>
</form>
</div>
</div>
</body>
</html>
Within the <form> tag, we introduce the tag which allows users to input data in the form.
<body>
<div class="container" >
<div class="card">
<div class="card-front">
<h2>Login</h2>
<form>
<input type="email" class="input-button" placeholder="Email" required>
</div>
</form>
</div>
</div>
</body>
With the above code, the output on the browser is displayed as below.
We go ahead and create more forms as per our target project. See the below code block that will do the trick.
<body>
<div class="container" >
<div class="card">
<div class="card-front">
<h2>Login</h2>
<form>
<input type="email" class="input-button" placeholder="Email" required>
<input type="number" class="input-button" placeholder="Phone Number" required>
<input type="password" class="input-button" placeholder="Password" required>
<button type="submit" class="submit-btn">Submit</button>
<input type="checkbox" class="checkbox"><span>Remember me</span>
<button type="button" class="btn">I am new here</button>
<a href="">Forgot password</a>
</div>
</form>
</div>
</div>
</body>
With this, the output should be as per the below; Remember, we are creating a flipping form that has two sides, so let's call the below output the front side of the form.
Let's go ahead and create the back of the form and to do so, we declare another
tag and other DIVs as below.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Flipping Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" >
<div class="card">
<div class="card-front">
<h2>Login</h2>
<form>
<input type="email" class="input-button" placeholder="Email" required>
<input type="number" class="input-button" placeholder="Phone Number" required>
<input type="password" class="input-button" placeholder="Password" required>
<button type="submit" class="submit-btn">Submit</button>
<input type="checkbox" class="checkbox"><span>Remember me</span>
<button type="button" class="btn">I am new here</button>
<a href="">Forgot password</a>
</div>
</form>
<div class="card-back">
<h2>Register</h2>
<form>
<input type="text" class="input-button" placeholder="Full Name" required>
<input type="email" class="input-button" placeholder="Email" required>
<input type="number" class="input-button" placeholder="Phone Number" required>
<input type="password" class="input-button" placeholder="Password" required>
<input type="date" class="input-button" placeholder="Date-of-Birth" required>
<button type="submit" class="submit-btn">Submit</button>
<input type="checkbox" class="checkbox"><span>Remember me</span>
<button type="button" class="btn">I have an Account</button>
<a href="">Forgot password</a>
</form>
</div>
</div>
</div>
</body>
</html>
With the above code, our HTML structure is set. The browser should display the below output.
This brings us to the end of Part 1 on how to create an online flipping form. Part 2 will focus on how to make our form look good, introduce different styles on all the elements of the form, and finally make the form flip.
Here is the link to the Part 2: https://dev.to/george_kingi/the-power-of-css-in-styling-up-forms-o8m
Top comments (0)