How can i create simple register form using html and css?

0 votes
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 in HTML by anonymous
• 1,910 points
41 views

1 answer to this question.

0 votes

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 by Niroj
• 3,230 points

Related Questions In HTML

0 votes
0 answers

How to do calculation in PHP using a csv file for retrieving data?

Morning, I have a csv file and i ...READ MORE

6 days ago in HTML by anonymous
• 140 points
15 views
0 votes
1 answer

How to Identify Web Element( Button) when there are multiple buttons without any ID

Hi Gangadhar, Do you need the HTML code to ...READ MORE

answered Feb 10 in HTML by Roshni
• 400 points
18 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 in Angular by Niroj
• 3,230 points
14 views
0 votes
0 answers
0 votes
0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17 in Web Development by anonymous
• 1,910 points
26 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20 in Web Development by Niroj
• 3,230 points

edited Jan 21 by Niroj 29 views
0 votes
1 answer

What is Html Web storage

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

answered Jan 31 in HTML by Niroj
• 3,230 points
15 views
0 votes
2 answers

How can I create File and write data in it using Java?

import java.io.BufferedWriter; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Paths; public class WriteFiles{ ...READ MORE

answered Jul 26, 2018 in Java by samarth295
• 2,190 points
164 views
0 votes
1 answer

How can I create a new user using ansible ploybook?

You're switching from the root user. Root ...READ MORE

answered Mar 29, 2018 in Ansible by DareDev
• 6,850 points
172 views
0 votes
1 answer

How can I create global macros and templates in jenkins job builder?

you can append the path to the ...READ MORE

answered Apr 2, 2018 in Jenkins by ajs3033
• 7,280 points
422 views