Hot File

Guide to Creating Capacity for Responsive Form With CSS3

View: 321    Dowload: 2   Comment: 0   Post by: hanhga  
Author: none   Category: HTML-CSS template   Fields: Other

9 point/2 review File has been tested

Download   guide-to-creating-capacity-for.zip (38.84 KB)

You need to Sign In to download the file guide-to-creating-capacity-for.zip
If you do not have an account then Sign up for free here

Download error   Report copyright violation

With high ability Responsive forms (Form) that I shared with you in this article will show you a good mostly on different screen sizes, which are suitable for the construction of the theme dedicated for mobile.

Introduction

With high ability Responsive forms (Form) that I shared with you in this article will show you a good mostly on different screen sizes, which are suitable for the construction of the theme dedicated for mobile.

HTML

Html standard framework for the form you want to introduce to you the following:

 onsubmit="return false">
   class="col-2">
    
      Name
       placeholder="What is your full name?" 
id="name" name="name" tabindex="1">
    
   class="col-2">
    
      Company
       placeholder="Where do you currently work?" id="company" 
name="company" tabindex="2">
 
   class="col-3">
    
      Phone Number
       placeholder="What is the best # to reach you?" id="phone" 
name="phone" tabindex="3">
   class="col-3">
    
      Email
       placeholder="What is your e-mail address?" id="email" 
name="email" tabindex="4">
    
  
   class="col-3">
    
      Availability
       tabindex="5">

5-15 hrs per week

15-30 hrs per week

30-40 hrs per week class="col-4"> Skills placeholder="List a few of your primary skills" id="skills"
name="skills" tabindex="6"> class="col-4"> Yrs Experience placeholder="How many years of experience?" id="experience"
name="experience" tabindex="7"> class="col-4"> Contact References? style="position:relative; margin-bottom:8px;">
type="checkbox" class="js-switch"> class="col-4 switch"> E-mail Updates? style="position:relative;margin-bottom:8px;">
type="checkbox" class="js-switch"> class="col-submit"> class="submitbtn">Submit Form
CSS

First, you format the form with the following code:


/** form field **/
form {
  display: block;
  margin: 30px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 5px;
  font-size: 0;
}
 
form > div > label {
  display: block;
  padding: 20px 20px 10px;
  vertical-align: top;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  color: #939393;
  cursor: pointer;
}
form > div.switch > label {
  padding: 16px 20px 13px;
}
 
.col-2, .col-3, .col-4 {
  border-bottom: 1px solid #e4e4e4;
}
 
form > div > .col-4 {
  height: 86px;
}
 
label > input {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 27px;
  line-height: 27px;
  margin: 5px -5px 0;
  padding: 7px 5px 3px;
  border: none;
  outline: none;
  color: #555;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  opacity: .6;
  transition: all linear .3s;
}
 
.col-submit {
  text-align: center;
  padding: 20px;
}
 
label > select {
  display: block;
  width: 100%;
  padding: 0;
  color: #555;
  margin: 16px 0 6px;
  font-weight: 500;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  opacity: .4;
  transition: all linear .3s;
}
 
label > input:focus, label > select:focus {
  opacity: 1;
}
 
/** button design based on http://codepen.io/guvootes/pen/eyDAb **/
button {
  width: 100%;
  height: 35px;
  border: none;
  border-radius: 4px;
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  overflow: hidden;
  outline: none;
}
 
button.submitbtn {
  background-image: -moz-linear-gradient(#97c16b, #8ab959);
  background-image: -webkit-linear-gradient(#97c16b, #8ab959);
  background-image: linear-gradient(#97c16b, #8ab959);
  border-bottom: 1px solid #648c3a;
  cursor: pointer;
  color: #fff;
}
button.submitbtn:hover {
  background-image: -moz-linear-gradient(#8ab959, #7eaf4a);
  background-image: -webkit-linear-gradient(#8ab959, #7eaf4a);
  background-image: linear-gradient(#8ab959, #7eaf4a);
}
button.submitbtn:active {
  height: 34px;
  border-bottom: 0;
  margin: 1px 0 0 0;
  background-image: -moz-linear-gradient(#7eaf4a, #8ab959);
  background-image: -webkit-linear-gradient(#7eaf4a, #8ab959);
  background-image: linear-gradient(#7eaf4a, #8ab959);
  -moz-box-shadow: inset 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 3px 1px rgba(0, 0, 0, 0.3);
}

Then is the css help us make it possible for Responsive Form.


/** responsive design **/
@media(min-width: 850px){
  form > div { display: inline-block; }
  .col-submit { display: block; }
 
  .col-2, .col-3, .col-4 { box-shadow: 1px 1px #e4e4e4; border: none; }
 
  .col-2 { width: 50% }
  .col-3 { width: 33.3333333333% }
  .col-4 { width: 25% }
 
  .col-submit button { width: 30%; margin: 0 auto
JQuery
In this form, we will create option button like on the iPhone, and to do this, we will need to insert the plug as follows:

 rel="stylesheet" type="text/css" media="all" href="css/switchery.min.css">
 

The file on you can download the demo or in the download section of this article. Finally, you insert the following small script is finished.


var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
  var switchery = new Switchery(html);
});

; }

}

Chúc các bạn thành công !

 

Guide to Creating Capacity for Responsive Form With CSS3

Guide to Creating Capacity for Responsive Form With CSS3 Posted on 15-12-2015  With high ability Responsive forms (Form) that I shared with you in this article will show you a good mostly on different screen sizes, which are suitable for the construction of the theme dedicated for mobile. 4.5/10 321

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd