Create vertical form - HTML CSS CSS Form

HTML CSS examples for CSS Form:input

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input

Description

Create vertical form

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.row1:before,<!-- w  w  w  .  j av  a  2  s.co  m-->
.row1:after{
   display: table;
   content: " ";
}
.row1:after,{
   clear: both;
}
.row1 {
   margin-right: -15px;
   margin-left: -15px;
   background-color: red;
}
.Contact_form{
   width: 60%;
   float: none;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   min-height: 1px;
}
._input{
   display: block;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.38;
   margin-top: 5px;
   color: #000000;
   font-size: 13px;
   padding: 10px;
}
._input-long{
   height: 110px;
   padding-top: 5px;
}
._input-1 {
   height: 40px;
}
._button {
   display: block;
   float: left;
   width: 23.2%;
   height: 56px;
   margin: 10px 0 0 57.5%;
   background-color: #2979ff;
   line-height: 1.38;
   text-align: center;
   color: #ffffff;
}
hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #000;
   margin: 1em 0;
   padding: 0;
}
.Contact_text{
   margin-left: auto;
   margin-right: auto;
   width: 10%;
   float: none;
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
}



      </style> 
 </head> 
 <body> 
  <div class="container-fluid"> 
   <div class="row1"> 
    <div class="Contact_text"> 
     <p>This is a title</p> 
     <hr> 
    </div> 
    <div class=".Contact_form"> 
     <input id="name" class="_input _input-1 js-name" name="" placeholder="Name" type="text"> 
     <input id="connection" class="_input _input-1 js-contact" name="" placeholder="Tel." type="text"> 
     <input class="_input-long _input" name="+inute" placeholder="Address" type="text"> 
     <input class="_input _input-1 js-name" type="submit" id="send" value="OK"> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials