html login page

<html>
  <head>
        <title>
            Log In or Sign Up
        </title>
    </head>
    <body>
        <div>
            <input type="textarea" placeholder="Enter your username">
            <br>
            <br>
            <input type="password" placeholder="Enter your username">
            <br>
            <br>
            <input type="submit" value="Log In">
            <br>
            <br>
        </div>
        <div>
            <p>
                Or Sign Up!
            </p>
            <br>
            <br>
            <input type="textarea" placeholder="Create a username">
            <br>
            <br>
            <input type="password" placeholder="Create a password">
            <br>
            <br>
            <input type="submit" value="Sign Up">
        </div>
    </body>
</html>

View another examples Add Own solution

3.43

Julius Lohmann 95 points

                                       &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;style&gt;
body ,html{font-family: Arial, Helvetica, sans-serif;;}
form{
    width:fit-content;
    padding: 60px;
   
   
    height:fit-content;
    margin:0 auto;
    margin-top: 2%;
    background-color: #f9f9f9
}
/* Full-width input fields */
.form-control {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button{
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  width: 60%;
  margin: 5px auto;
  padding: 15px;
      box-shadow: 0px 5px 5px #ccc;
      border-radius: 5px;
      border-top: 1px solid #e9e9e9;
  display:block;
  text-align:center;
}
.signup{
    background-color:blue;
    margin-bottom:20px;
}
.login-box {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 15px;
      background-color: #fff;
      box-shadow: 0px 5px 5px #ccc;
      border-radius: 5px;
      border-top: 1px solid #e9e9e9;
    }
button:hover,#btn-signup:hover {
  opacity: 0.8;
}



/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

h2,p{
    text-align:center;
}



/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;



  
  &lt;form  action=&quot;/action_page.php&quot; method=&quot;post&quot;&gt;

    &lt;h2&gt;Welcome To Newscongragated&lt;/h2&gt;
    &lt;p&gt;Sign in&lt;/p&gt;
    &lt;div class=&quot;container&quot;&gt;
      
      &lt;label for=&quot;email&quot;&gt;&lt;b&gt;Email&lt;/b&gt;&lt;/label&gt;
          &lt;input
            type=&quot;email&quot;
            class=&quot;form-control&quot;
            id=&quot;email&quot;
            placeholder=&quot;Enter your email&quot;
                 required pattern='/^(([^&lt;&gt;()[\]\\.,;:\s@\&quot;]+(\.[^&lt;&gt;()[\]\\.,;:\s@\&quot;]+)*)|(\&quot;.+\&quot;))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'&gt;

     

      &lt;label for=&quot;name&quot;&gt;&lt;b&gt;Password&lt;/b&lt;/label&gt;
          &lt;input
            type=&quot;password&quot;
            class=&quot;form-control&quot;
            id=&quot;password&quot;
            placeholder=&quot;Enter your password&quot;
                 minlength=&quot;8&quot;
                 required&gt;
        
      &lt;button type=&quot;submit&quot;&gt;Login&lt;/button&gt;
      &lt;button type=&quot;button&quot;
          href=&quot;account/signup.php&quot;
          class=&quot;signup&quot; &gt;
            Sign Up
        &lt;/button&gt;
      &lt;a href=&quot;./resetpassword.php&quot;&gt;Forgot your password? &lt;/a&gt;

      
    &lt;/div&gt;

    

    
  &lt;/form&gt;


&lt;/body&gt;
&lt;/html&gt;

Thank you! 7

3.43 (7 Votes)

Kuroxander 75 points

                                    &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Login&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;style type=&quot;text/css&quot;&gt;
    
    #text{

        height: 25px;
        border-radius: 5px;
        padding: 4px;
        border: solid thin #aaa;
    }

    #button{

        padding: 10px;
        width: 100px;
        color: white;
        background-color: lightblue;
        border: none;
    }

    #box{

        background-color: grey;
        margin: auto;
        width: 300px;
        padding: 20px;
    }
    
    &lt;/style&gt;

    &lt;div id=&quot;box&quot;&gt;
    
        &lt;form method=&quot;post&quot;&gt;
            &lt;div style=&quot;font-size: 20px;margin: 10px;color: white;&quot;&gt;Login&lt;/div&gt;

            &lt;input id=&quot;text&quot; type=&quot;text&quot; name=&quot;user_name&quot;&gt;&lt;br&gt;&lt;br&gt;
            &lt;input id=&quot;text&quot; type=&quot;password&quot; name=&quot;password&quot;&gt;&lt;br&gt;&lt;br&gt;

            &lt;input id=&quot;button&quot; type=&quot;submit&quot; value=&quot;Login&quot;&gt;&lt;br&gt;&lt;br&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Thank you! 1

4 (1 Votes)

Nubtom 90 points

                                    &lt;html&gt;
      &lt;head&gt;
    &lt;title&gt;Login page example&lt;/title&gt;
    &lt;style&gt;
      input{
        font-size: 20;
      }
      body{
        background-color: red;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;input placeholder=&quot;Username&quot;/&gt;
    &lt;br /&gt;
    &lt;input type=&quot;password&quot; placeholder=&quot;Password&quot;/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;button&gt;Login&lt;/button&gt;
    &lt;/body&gt;

&lt;/html&gt;

Thank you! 10

Rm -rf slash 100 points

                                    &lt;!doctype html&gt;
&lt;form name=&quot;loginForm&quot; method=&quot;post&quot; action=&quot;index.html&quot;&gt;
&lt;table width=&quot;20%&quot; bgcolor=&quot;0099CC&quot; align=&quot;center&quot;&gt;
  &lt;tr&gt;
&lt;td colspan=2&gt;&lt;center&gt;&lt;font size=4&gt;&lt;b&gt;light-net login&lt;/b&gt;&lt;/font&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;Username:&lt;/td&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; size=25 name=&quot;user&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;Password:&lt;/td&gt;
&lt;td&gt;&lt;input type=&quot;Password&quot; size=25 name=&quot;pass&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td &gt;&lt;input type=&quot;Reset&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type=&quot;submit&quot; onclick=&quot;return check(this.form)&quot; value=&quot;Login&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;
&lt;/form&gt;
&lt;script language=&quot;javascript&quot;&gt;
function check(form)
{

if(form.user.value == &quot;public&quot; &amp;&amp; form.pass.value == &quot;peasants&quot;)
{
	return true;
}
else
{
	alert(&quot;Error Password or Username&quot;)
	return false;
}
}
	      &lt;/script&gt;

Thank you! 3

3.33

Lamart 75 points

                                    &lt;html&gt;
&lt;head&gt;
&lt;title&gt;Account&lt;/title&gt;
&lt;style&gt;
body
{
	background-color:#ffda08;
}
table
{
	border:1px white;
	margin-top:200px;
	margin-left:500px;
	background-color:white;
	padding:20px
}
#btn
{
	width:200px;
	height:50px;
	background-color:#1ee3d2;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;form name=frmNewAcc&gt;
		&lt;table border=0 cellspacing=5px&gt;
	&lt;tr&gt;
		&lt;th colspan=3&gt;&lt;input class=in =text name=txtuname placeholder=&quot;Enter your account name&quot;&gt;&lt;/th&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th colspan=3&gt;&lt;input class=in type=password name=txtupass placeholder=&quot;Enter your new password&quot;&gt;&lt;/th&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th colspan=3&gt;&lt;input  class=in type=password name=txtuconfirmpass placeholder=&quot;Enter confirmed password&quot;&gt;&lt;/th&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th colspan=3&gt;&lt;input id=btn type=button value=&quot;Create new account&quot;&gt;&lt;/th&gt;
		&lt;a href=&quot;Login task 1.html&quot;&gt;Go back to login&lt;/a&gt;
	&lt;/tr&gt;

	
&lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Thank you! 3

3.33 (3 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Html

Html 2022-03-27 21:55:05 how to kill html
Html 2022-03-27 21:55:02 How to create web urls without extensions
Html 2022-03-27 21:45:11 space between 2 h tags without break
Html 2022-03-27 21:40:13 how to resize submit button in html
Html 2022-03-27 20:40:18 https://www.codegrepper.com
Html 2022-03-27 19:55:09 show image inside table with innerhtml
Html 2022-03-27 19:30:47 html email input
Html 2022-03-27 18:45:01 how to add favicon in html
Html 2022-03-27 18:15:21 picture html
Html 2022-03-27 18:15:11 ex: javaasdasdasdasd

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

html login page

Welcome Back!

Create a Free Account