How can i create simple register form using html and css

+1 vote
I want to have simple web page form that  contains simple email id and password  to login with develop some style on that form.
Jan 31, 2020 in HTML by anonymous
• 37,510 points
4,244 views

1 answer to this question.

+1 vote

Html5 contains lots of elements using which you can have lots of different forms and the extra sugar qoued term "CSS" which provide additional styles to your form. CSS helps to make the forms look attractive and we can also use javascript to make the form more interactive.

Lets have some simple code to create form using html and css

Steps:

1.Add HTML code first:

Use a <form> element to process the input.. Then add inputs (with a matching label) for each field:

Example:

Output will be:

2. Now from the above output image, it is simpe web page without any style so add some CSS code here

Example:

* {box-sizing: border-box}

/* 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: #4CAF50;

  color: white;

  padding: 16px 20px;

  margin: 8px 0;

  border: none;

  cursor: pointer;

  width: 100%;

  opacity: 0.9;

}

.registerbtn:hover {

  opacity:1;

}

/* 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;

}

Final output:



answered Jan 31, 2020 by Niroj
• 82,880 points
Thank for this information....liked your sample attached screenshot which help me to understand me in a better way

Related Questions In HTML

0 votes
0 answers

How to make a simple modal pop up form using jquery and html?

I've read the jQuery tutorials, but I'm ...READ MORE

Jul 24, 2022 in HTML by Ashwini
• 5,430 points
357 views
0 votes
0 answers

How can I create download link in HTML?

I am somewhat familiar with HTML. I ...READ MORE

Jul 19, 2022 in HTML by Tejashwini
• 3,820 points
301 views
0 votes
0 answers

How to make a back-to-top button using CSS and HTML only?

I'm attempting to create a back-to-top button ...READ MORE

Aug 1, 2022 in HTML by Ashwini
• 5,430 points
254 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

In order to ensure that your image ...READ MORE

answered Feb 8, 2022 in HTML by Rahul
• 9,670 points
925 views
0 votes
1 answer

Explain general Routing workflow between several web pages?

hii, Routing is just another way of fixing some content ...READ MORE

answered Feb 10, 2020 in Angular by Niroj
• 82,880 points
497 views
0 votes
1 answer

How do I turn a string to a json in Node.js?

Hello Kartik, Use the JSON function  JSON.parse(theString) ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,880 points
755 views
0 votes
1 answer

How to write files in Node.js?

Hello @kartik, Currently there are three ways to ...READ MORE

answered Jul 8, 2020 in Node-js by Niroj
• 82,880 points
682 views
0 votes
1 answer

How to install a previous exact version of a NPM package?

Hello @kartik, If you have to install an ...READ MORE

answered Jul 8, 2020 in Node-js by Niroj
• 82,880 points
2,544 views
0 votes
1 answer

What is Html Web storage

With web storage, web applications can store ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,880 points
1,347 views
0 votes
1 answer

How to align a <div> to the middle (horizontally/width) of the page?

Hello Kartik, position: absolute and then top:50% and left:50% places the top edge ...READ MORE

answered Apr 23, 2020 in HTML by Niroj
• 82,880 points
562 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP