HTML Form - khabork

HTML  Form  is one of the most important element in any kind of data collect. For any kind of opening an account the user data must be need ,the authority collects the user data for the identification of the user.This user data collect by online form, this form can be the Sign Up, Admission Form ,Log In Form, Subscription Form,search form any kind of information input which field by the user.
In HTML for  create a form we use the <form> </form> Tag and for the final submit we can use the <submit> Tag or <button> Tag. Here we make a sign up form for an example.

1) Sign Up HTML  Form
html :
<form class="modal-content" action="/action_page.php">
<div class="container">
 <h1>Sign Up</h1>
 <p>Please fill in this form to create an account.</p>
 <label id="text1"><b>Email</b></label>
 <input type="text" placeholder="Enter Email" name="email" required><br>
  <label id="text2"><b>Password :</b></label>
  <input type="password" id="user_password" placeholder="Enter Password" name="psw" required><br>
  <label id="text3"><b>Repeat Password :</b></label>
  <input type="password" id="user_confirm_password" placeholder="Repeat Password" name="psw-repeat" required><br>
   <label>
   <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me</label>
   <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
    <div class="clearfix">
    <button type="button"  class="cancelbtn">Cancel</button>
     <button type="submit" class="signupbtn">Sign Up</button>
     </div> </div>

  </form>
CSS:
input[type=text], input[type=password] {
  width: 25%;
  padding: 15px;
  margin: 10px 0 10px 0;
  display: inline-block;
  border: none;
   background: #dcefef;
}
input[type=text]:focus, input[type=password]:focus {
  background-color: #adeab6;
  outline: #e80202;
}
#text1{
 margin-left: 90px;
}
#text2{
 margin-left:50px;
}
#text3{
 margin-left: -10px;
}
#user_password
{
margin-left: 2px;
}
#user_confirm_password
{
 margin-left: 0px;
}
button {
    background-color: #4CAF50;
    color: white;
    width:50;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 15%;
    opacity: 2;
    }
.cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;

}


Out Put :

Sign Up

Please fill in this form to create an account.

 Email 
Password : 
Repeat Password : 
                                                Remember me

By creating an account you agree to our Terms & Privacy.

 

2)Log in HTML  Form 

Log In form is use full form form the entering any website which you have signed up before. This form is basically use the user id of your account and password of your account. It is a form which cheek the user name and password which you entered when you Signed Up in there data. If the user id and password will matched with there data then the you can log in your account if don't matched the data you can not enter the account. Here we make a simple log In form using HTML and CSS.

html:  

<h1>Login Form</h1>
 <form>
  <label ><b>Username</b></label>
  <input type="text" placeholder="Enter Username" name="uname" required><br>
   <label><b>Password</b></label>
   <input type="password" placeholder="EnterPassword"
      name="psw" required><br>
   <label>
   <input type="checkbox"checked="checked"name="remember">        Remember me</label>  
   <button type="submit">Login</button><br>
   <button type="button" style="background-color:#f94d2f;"                  class="cancelbtn" href="/#">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>

  </form>


CSS:

input[type=text], input[type=password] {
    width: 25%;
    padding: 15px;
    margin: 10px 0 10px 0;
    display: inline-block;
    border-radius: 10px;
    background: #dcefef;
   }
input[type=text]:focus, input[type=password]:focus {
    background-color: #adeab6;
    outline: #e80202;
}
button{
    background-color: #4CAF50;
    color: white;
    width:15%;
    padding: 8px 9px;
    margin: 8px 0;
    border-radius: 8px;
    cursor: pointer;
    width: 5%;
    opacity: 2;

}

Out Put:

Login Form

Username 
Password 
 Remember me 

 Forgot password?

In this type you can easily make a login , Sign Up form also ant kind of html form. For a web designer this is so important.Form is the user input data, the form can be the sign up html form or log in html form or other form which is field by the user. 


You May also Like : 

i) CSS of Input Type Text in Html

ii) CSS in Buttons of HTML

iii) What is HTML Tag ?

iv)  How Linl in HTML ?