Form

The information for the registration and login forms has been added to the HTML code in the sections below. The codes listed below are copied, and they are then added directly to your HTML file. To start, we’ll add a «login-wrap» class to a div tag, which will wrap our signup and login forms.
Now that we have created an input box with the type «radio,» we can use the radio button to switch between the signup and signin forms.
We will now create our login form. To do that, we will design a label that requests a username and, beneath it, a text-only input box for the username.
We’re going to make a «password» input box now, along with a «checkbox» input box that says «keep me logged in.»
Now using tag we will make a horizontal rule to which we used to divide our form
Now we will create a forgot password link using the anchor tag. Let’s look at our login form now that we have created it. Now we will be creating the structure of our signup form. Using the div tag we will create a container for our singup form.
First, we’ll construct a label for our username and an input type for the username called «text.»Then, two input fields of the type «password» will be created.
A label asking for the user’s email address will now be created, along with an input box with the type «email» address.
we build an input type that serves as a button for signing them up. If the user has already registered on another website, we also create a link for our login page. Let’s look at our SignUp form now that we have created it. So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code. Before we can style our page, we must add external styling links to the head section of our html.

Step2: Style Login And Registration Form Using CSS Code

body < margin: 0; color: #6a6f8c; background: #c8c8c8; font: 600 16px/18px "Open Sans", sans-serif; >*, :after, :before < box-sizing: border-box; >.clearfix:after, .clearfix:before < content: ""; display: table; >.clearfix:after < clear: both; display: block; >a < color: inherit; text-decoration: none; >.login-wrap < width: 100%; margin: auto; max-width: 525px; min-height: 670px; position: relative; background: url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center; box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); >.login-html < width: 100%; height: 100%; position: absolute; padding: 90px 70px 50px 70px; background: rgba(40, 57, 101, 0.9); >.login-html .sign-in-htm, .login-html .sign-up-htm < top: 0; left: 0; right: 0; bottom: 0; position: absolute; transform: rotateY(180deg); backface-visibility: hidden; transition: all 0.4s linear; >.login-html .sign-in, .login-html .sign-up, .login-form .group .check < display: none; >.login-html .tab, .login-form .group .label, .login-form .group .button < text-transform: uppercase; >.login-html .tab < font-size: 22px; margin-right: 15px; cursor: pointer; padding-bottom: 5px; margin: 0 15px 10px 0; display: inline-block; border-bottom: 2px solid transparent; >.login-html .sign-in:checked + .tab, .login-html .sign-up:checked + .tab < color: #fff; border-color: #1161ee; cursor: pointer; >.login-form < min-height: 345px; position: relative; perspective: 1000px; transform-style: preserve-3d; >.login-form .group < margin-bottom: 15px; >.login-form .group .label, .login-form .group .input, .login-form .group .button < width: 100%; color: #fff; display: block; >.login-form .group .input, .login-form .group .button < border: none; padding: 15px 20px; border-radius: 25px; background: rgba(255, 255, 255, 0.1); >.login-form .group input[data-type="password"] < -webkit-text-security: circle; >.login-form .group .label < color: #aaa; font-size: 12px; >.login-form .group .button < background: #1161ee; cursor: pointer; >.login-form .group .button:hover < background:#1454c4; cursor: pointer; >.login-form .group label .icon < width: 15px; height: 15px; border-radius: 2px; position: relative; display: inline-block; background: rgba(255, 255, 255, 0.1); >.login-form .group label .icon:before, .login-form .group label .icon:after < content: ""; width: 10px; height: 2px; background: #fff; position: absolute; transition: all 0.2s ease-in-out 0s; >.login-form .group label .icon:before < left: 3px; width: 5px; bottom: 6px; transform: scale(0) rotate(0); >.login-form .group label .icon:after < top: 6px; right: 0; transform: scale(0) rotate(0); >.login-form .group .check:checked + label < color: #fff; >.login-form .group .check:checked + label .icon < background: #1161ee; >.login-form .group .check:checked + label .icon:before < transform: scale(1) rotate(45deg); >.login-form .group .check:checked + label .icon:after < transform: scale(1) rotate(-45deg); >.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm < transform: rotate(0); >.login-html .sign-up:checked + .tab + .login-form .sign-up-htm < transform: rotate(0); >.hr < height: 2px; margin: 60px 0 50px 0; background: rgba(255, 255, 255, 0.2); >.foot-lnk

Now that we’ve included our CSS code in our article, let’s go over it step by step. Step1: We’ve now set the margin and padding on our webpage to «zero» using the body tag. «Open Sans» is the family of fonts. «Light Grey» is the backdrop colour setting. The font size was also changed to «dark-grey.» Using the universal selector (*) we will set the box-sizing of our webpage as «border-box». If any of the items overflow, the clearfix attribute will cause them to be automatically set to the height.

body < margin: 0; color: #6a6f8c; background: #c8c8c8; font: 600 16px/18px "Open Sans", sans-serif; >*, :after, :before < box-sizing: border-box; >.clearfix:after, .clearfix:before < content: ""; display: table; >.clearfix:after

Step 2: We will now set its width to «100%» using the (.login-wrap) class. The margin is set to auto, meaning that it will change depending on the content. Additionally, we specified «525 px» for the maximum width and «670 px» for the minimum height. To give our login form a little more flair, we also include a backdrop image. To style our login form, we will use the «.login-html» class. We have set the width to «100%» and the position to absolute. Additionally, we added additional space and made the backdrop of our login form a dark blue color.

Step3:We will set the top, left, right, and bottom space to «zero» and the position to «absolute» using the (.sign-in-htm and.sign-up-htm) files. Our login and signup forms will be rotated 180 degrees by adding some transform properties. We’ll now style the sign-in button. The font size was set to «22 px,» the margin to the right was set to «15 px,» the cursor was set to «pointer,» and the padding to the bottom was set to «5 px.» Additionally, we gave our button a 2-px bottom border. In the similar way we will style our signup form . you will easily understand the code just go through our css code once.

.login-html .tab < font-size: 22px; margin-right: 15px; cursor: pointer; padding-bottom: 5px; margin: 0 15px 10px 0; display: inline-block; border-bottom: 2px solid transparent; >.login-html .sign-in:checked + .tab, .login-html .sign-up:checked + .tab < color: #fff; border-color: #1161ee; cursor: pointer; >.login-form < min-height: 345px; position: relative; perspective: 1000px; transform-style: preserve-3d; >.login-form .group < margin-bottom: 15px; >.login-form .group .label, .login-form .group .input, .login-form .group .button < width: 100%; color: #fff; display: block; >.login-form .group .input, .login-form .group .button < border: none; padding: 15px 20px; border-radius: 25px; background: rgba(255, 255, 255, 0.1); >.login-form .group input[data-type="password"] < -webkit-text-security: circle; >.login-form .group .label < color: #aaa; font-size: 12px; >.login-form .group .button < background: #1161ee; cursor: pointer; >.login-form .group .button:hover < background:#1454c4; cursor: pointer; >.login-form .group label .icon < width: 15px; height: 15px; border-radius: 2px; position: relative; display: inline-block; background: rgba(255, 255, 255, 0.1); >.login-form .group label .icon:before, .login-form .group label .icon:after < content: ""; width: 10px; height: 2px; background: #fff; position: absolute; transition: all 0.2s ease-in-out 0s; >.login-form .group label .icon:before < left: 3px; width: 5px; bottom: 6px; transform: scale(0) rotate(0); >.login-form .group label .icon:after

Step4: Now, we will switch between our sign-in and sign-up forms utilising the checked attribute. Now, utilising the checked property, if we select the signup button, it will display a blue border along the bottom, and if you select signin, the checked property signin form will appear.

.login-form .group .check:checked + label < color: #fff; >.login-form .group .check:checked + label .icon < background: #1161ee; >.login-form .group .check:checked + label .icon:before < transform: scale(1) rotate(45deg); >.login-form .group .check:checked + label .icon:after < transform: scale(1) rotate(-45deg); >.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm < transform: rotate(0); >.login-html .sign-up:checked + .tab + .login-form .sign-up-htm

Let’s take a look at our final output now that we’ve styled our popup login form. The project is now finished, we have completed Login And Registration Form In Html With Css. Now We have Successfully created the Login and Registration Form using HTML and CSS . You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!! If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page. follow : codewithrandom Written By : arun Code by : Arun

Источник

Register

By creating an account you agree to our Terms & Privacy.

How To Create a Register Form

Step 1) Add HTML:

Use a element to process the input. You can learn more about this in our PHP tutorial. Then add inputs (with a matching label) for each field:

Example

Step 2) Add CSS:

Example

/* Add padding to containers */
.container padding: 16px;
>

/* Full-width input fields */
input[type=text], input[type=password] width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
>

input[type=text]:focus, input[type=password]:focus background-color: #ddd;
outline: none;
>

/* Overwrite default styles of hr */
hr border: 1px solid #f1f1f1;
margin-bottom: 25px;
>

/* Set a style for the submit/register button */
.registerbtn background-color: #04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
>

/* Add a blue text color to links */
a color: dodgerblue;
>

/* Set a grey background color and center the text of the «sign in» section */
.signin background-color: #f1f1f1;
text-align: center;
>

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.

Источник

HTML Registration Form

Creating an interactive and responsive user registration form is a fundamental skill in web development. On most websites, users interact primarily through forms, whether to sign up for a service, enter personal information, or leave feedback. This tutorial will show you how to use HTML and CSS to build a stylish and simple user registration form.

HTML User Registration Form Design Demo

Step 1: Setting Up Your HTML File

First, create a new HTML file. Name it whatever you want, such as register.html.

In your new HTML file, you’ll need to add the basic structure of an HTML document:

The above code creates a blank HTML page titled «Registration Form.»

Step 2: Creating the Form in HTML

Next, let’s add a form inside the tag:

  
 
First Name Last Name Email New Password 
By clicking Sign Up, you are indicating that you have read and agree to the Terms of Use and Privacy Policy.
 
 

The above code adds a registration form with fields for the user’s first name, last name, email, and password. The form also contains links to the Terms of Use and Privacy Policy and a Submit button.

Step 3: Styling the Form with CSS

Let’s add some CSS to the form to make it more visually appealing. You can include this within the tag in the document’s or a separate CSS file. For this tutorial, we’ll place this in an HTML file:

/* Outer box styles */ .box-outer < border: 1px solid #ccc; background-color: #FFFFFF; margin-bottom: 1rem; padding: 1rem; border-radius: .12rem; >/* Heading styles */ .heading < margin-bottom: 1rem; >/* Input control styles */ .input-control < transition: border .1s linear 0s, box-shadow .1s, width .25s, color .2s; border: 1px solid #ced4da; box-shadow: 0 1px 3px rgb(50 50 93 / 10%), 0 1px 0 rgb(0 0 0 / 2%); display: block; width: 100%; padding: .375rem .75rem; font-size: .969rem; font-weight: 400; line-height: 1.6; color: #212529; background-color: #FFF; background-clip: padding-box; appearance: none; border-radius: .12rem; margin-bottom: 1rem; >.input-control:focus < border-color: #9fd4fc; box-shadow: 0 0 0 4px rgb(0 149 255 / 15%); background-color: #fffffa; outline: 0; >/* Button styles */ .button < color: #FFFFFF; box-shadow: 0 1px 3px rgb(50 50 93 / 10%), 0 1px 0 rgb(0 0 0 / 2%); background: linear-gradient(#6dbd45, #51a326); border: 0; padding: .5rem; border-radius: .12rem; >.button:focus

This CSS adds styles to the form, input, and button.

Thats all! You have created a user registration form using HTML and CSS. Also note that when you submit this form, no data is sent anywhere; to do so, server-side programming would need to be added.

Remember to replace the # in the form’s action attribute with the URL of your server-side script, verify that the links in your Terms of Use and Privacy Policy point to the correct documents.

Источник