Skip to main content

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.
HTML Form


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.
 
 
 

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


 
 

 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 ?
Labels:

Comments

Post a Comment

Comment Here

Popular posts from this blog

Indian Food Culture -Khabork

Indian food culture Indian food culture  is the best in the world. Northern Indian food primarily includes items which are surge Linked like Tandoori roti ,garandma, Kulcha, etc. South Asian matter primary includes items which are created of cereal solid like Idli, Sambar vada, Upma ,Dosa etc. Indian Food Indian food corporation In India  other kinds of food like  North Indian food ,  South Indian Food  etc. North Indian Food primarily includes items are sugar linked like Tandoori roti grandma,kulcha etc. East Indian food provides the sweet dish like rashogolla, sandesh etc. South Indian matter primarily includes items which are created of cereal solid like Idli,sambar,vada,dosa,ctc. Chili is most important for every Indian.     I ndian food, street In Indian food Culture the most reliable cuisine of India is the India neighborhood food, which will be purchased just for same rupees portable kiosks seen in the Indian cities and town. These street vendors provide wa
6 comments
Read more

What is Corona Virus ? Novel Coronavirus (2019-nCoV) -Khabork

What is Corona Virus ?          Coronaviruses are   an outsized  family of viruses found in both animals and humans. Some infect people and are known to cause illness  starting from  the  cold  to more severe diseases  like  Middle East  Respiratory Syndrome (MERS) and Severe Acute Respiratory Syndrome (SARS). What is "Novel" Coronavirus (2019-nCoV) ? A novel coronavirus (CoV) may be a new strain of coronavirus that has not been previously identified in humans. The "novel" is defined as 2019-nCoV  ,it is not seen before the out break was reported in December 2019 in Wuhan city in China. How Dangerous on It ?? As with other respiratory illnesses, infection with 2019-nCoV can cause mild symptoms including a runny nose, pharyngitis , cough, and fever. It is not only one symptoms by the Corona Virus can be   fever , cough,  pharyngitis and  runny nose  .   It are often more severe for a few persons and may cause pneumonia or breathing difficulties.
3 comments
Read more

Valentines Day Images💕 -Khabork

💕 Valentines Day 💕 It's also called  Saint Valentine's Day  or the  Feast of Saint Valentine. Originating as a Western Christian fete day honoring one or two early saints named Valentin's, Valentine Day is recognized as a big cultural, religious, and commercial celebration of romance and romantic love in many regions round the world.The day first became related to romantic love within the circle of Chaucer within the 14th century, when the tradition of code of conduct flourished. happy valentine day 💕 Who is Your Valentines ? love is within the air! are you able to feel it? Every Valentine Day , Valentine Day rolls around and that we find ourselves trapped within the excitement of candy, flowers, cards and hearts of red, white and pink. So who is your valentine this year? If you are like most youngsters , you almost certainly have many them. Parents, sisters and brothers, aunts and uncles, neighbors, teachers and every one kinds of friends at college — th
Post a Comment
Read more