"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
- name
-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>
<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
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>
<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
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
click to view clear |
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 ⇀