"login form only using html"


hey budy's in this post we learn How to make Login & sign-inform using html. very simple basic html login and sign-in form gor beginner-

HTML- hyper text markup language
 login&sign-in user will access his acoount and for security we using login for

component in login form-

  • user name
  • password
  • submit
  • login
  • sign-in
  • forgot
  • email
  • name
-this is some common elements in login&sign-in form...

 -using only html the the form is simple we can not design professional form. first we learn simple form using html and next we learn to make professional form using html and css

CSS stands for Cascading Style Sheets

-css use in html to create attractive and designed webpage 
-in short css is use to add design in html page
  
use notpad++ or sublime text editor to fast coding

form attributes→

  • <fieldset> 
  • <input>
  • <input type="">
  • <lable>
  • <value>
  • <select>
  • <textarea>

input types or control in form→

  • <input type="button">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="checkbox">
  • <input type="color">
  • <input type="week">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="password">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">

lets start coding.

1). login&sign-in using html only

<!DOCTYPE html>
<html>
<head>
    <title>login&sign-in</title>
</head>
<body background="">
    <center>
    <form>
        Name:<input type="text" name="name"><br>
        password:<input type="password" name="password"><br>
        <input type="submit" name="login" value="login">
        <input type="submit" name="login" value="sign-in"><br>
        <input type="checkbox" name="checkbox">i accept terms<br>
        <a href="#">forgot password</a>
    </form>
    </center>
</body>
</html>

→output
login sign-in
click image to view clear





note- in this form we just use only html

2).login & sign-in page using table in html
*why we use table?
- we use table to set alignment of elements. as you see first output the text-box is unaligned using html we can adjust alignment lets see via this example.


 <!DOCTYPE html>
<html>
<head>
    <title>login&sign-in</title>
</head>
<body text="white">
    <form>
    <table  align="center" cellspacing="1" bgcolor="green">
        <tr>
            <td align="center" colspan="2">Login</td>
        </tr>
        <tr>
            <td align="right">Name:</td>
            <td>
            <input type="text" name="name">
            </td>
        </tr>
        <tr>
            <td align="right">password:</td>
            <td><input type="password" name="password"></td>
        </tr>

        <tr>
            <td></td>
            <td>
        <input type="submit" name="login" value="login">
        <input type="submit" name="login" value="sign-in">
            </td>
        </tr>
        <tr>
            <td></td>
            <td ><input type="checkbox" name="">i accept terms<br></td>
        </tr>
        <tr>
            <td></td>
            <td ><a href="#">forgot password</a></td>
        </tr>

    </table>
    </form>
</body>
</html>

-output
signing using html
click to view clear

 3).login sign in using html&css

→lets use css in html to design page. before use css under <head>  tag <style> is to use access css properties 
→to use css first you give id or class to the tag 
ex-
<div id="this-is-id">
<div class="this-is-class">

→without css webpage not look attractive
→design is important to give user best experience so grow your website and also user experience is good for seo
→learn css is very easy and very usefull
    follow our website to learn css and html
    www.niljadav.com is best platform to learn coading

<!DOCTYPE html>
<html>
<head><title>Login form</title></head>
<style>
body{

padding:200px;
padding-left:550px;
padding-right:550px;
background-image:url('20215.jpg');
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #e7e7e7;
  
}
.login {

  width: 250px;
  position: absolute;
  top: 60%;
  left: 50%;
  margin: -184px 0px 0px -155px;
  background: rgba(0,0,0,0.5);
  padding: 20px 30px;
  border-radius: 5px;
  box-shadow: 0px 1px 0px rgba(0,0,0,0.3),inset 0px 1px 0px rgba(255,255,255,0.07)
}

h1{
 color:white;
}
input{
 width:250px;
 height:30px;
}
input[type="submit"]{
   background: #3399ff;
  border: 0;
  width: 250px;
  height: 40px;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.4s linear;
}
</style>
<body>
<center>
<div class="login">
<form method="POST">
<h1>Login form</h1>
<input type="email" name="email" id="email" placeholder="Email" required><br><br>
<input type="password" name="password" id="password" placeholder="Password" required><br><br>
<input type="submit" name="submit" value="submit" id="submit">
</form>
</div>
</body>
</html>

-output
www.niljadav.com
click to view clear
to download all html coading click me

 there are some example of login & sign-in form using html & css we please like and share with your frd's thanks giving us your golden time😍thank you

 www.niljadav.com
      Anil Jadav

follow us on social media just click on icons to follow ⇀