Registration Form

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.

Источник

36 CSS Login Forms

Discover a collection of stylish and functional CSS login forms for your website from CodePen, GitHub, and other resources. Our update includes eight new items that will enhance your website’s user experience and improve the login process.

In today’s world, where most interactions take place online, creating a user-friendly and functional login form is crucial for any website or application. In this collection, we will explore some of the best pure CSS login forms available for free on the web, along with their features and benefits. Whether you’re a web developer or designer, these login forms are sure to inspire and help you create a seamless login experience for your users.

Related Articles

1. Bootstrap Login Forms

Author

Links

Made with

About a code

Hacker Login Form

The Hacker Login Form is a unique and creative login form designed to resemble a hacker’s terminal. Overall, the Hacker Login Form is a fun and engaging login form that can add a unique touch to any website or application.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Finance Mobile Application-UX/UI Design Screen One

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Glassmorphism Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Sign Up / Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Creative and Customizable Registration Form

The form is fully customizable, allowing you to add or remove fields as per your requirements. You can also change the color scheme and fonts to match your brand’s identity. The form is easy to use and navigate, making it a great choice for users.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

eCommerce Registraion Form

The form’s modern design and responsive layout make it a great addition to any website looking to improve its user experience.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Registration Form #18

A modern and stylish registration form template that can be easily customized to fit any website. With its clean design and user-friendly interface, this form is perfect for collecting user information and creating a seamless registration process. It includes fields for name, email, password, and more.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Sign Up Form #26

A modern and stylish registration form template that can be used for various purposes. It features a clean and minimal design with a beautiful color scheme that can be customized to match your brand. The form includes fields for name, email, password, and confirmation, as well as a submit button. The template is fully responsive and can be easily integrated into your website or application.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Sign Up Form #7

Instead of getting one free creative signup form template, this bundle offers you two lovely alternatives to play with.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Glassmorphism Login Form

The form has a transparent glass-like effect with a blurred background, giving it a sleek and elegant look. The form has a username and password input field with attractive focus effect, making it easy for users to interact with.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Sign Up Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, jquery.js, bootstrap.js, popper.js

Author

Links

Made with

About the code

Double Slider Sign In/Up Form

Double slider login form in HTML, CSS and JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Simple Registration Form

Simple HTML and CSS registration form with validation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Login Modal Form

HTML and CSS modal login form with little JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Cube Login Form

Pure CSS cube buttons and inputs for login form with gradien styles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Login Form with Floating Labels

Pure CSS login form with floating labels.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Prismatic Forms

Prismatic login, sign up and other forms.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Login Form Animation

Login page animation template created with CSS3 and vanilla JavaScript DOM elements. Will surely try to upgrade it with more better animation effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Login/Sign Up Form Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Form UI Animation

Form transitions UI based on Dominik Markušić dribble.

Author

Источник

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

Register

Please fill in this form to create an account.

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.

Источник