Tạo Form có khả năng Responsive bằng CSS3

Với khả năng Responsive cao, biểu mẫu (Form) mà mình chia sẻ cho các bạn trong bài viết này sẽ hiển thị tốt hầu hết trên các kích thước màn hình khác nhau, điều này rất thích hợp cho việc xây dựng những theme dành riêng cho mobile.

Xem Demo | Download

HTML

Khung chuẩn html cho form mà mình muốn giới thiệu cho các bạn sẽ như sau :

<form onsubmit="return false">
  <div class="col-2">
    <label>
      Name
      <input placeholder="What is your full name?" id="name" name="name" tabindex="1">
    </label>
  </div>
  <div class="col-2">
    <label>
      Company
      <input placeholder="Where do you currently work?" id="company" name="company" tabindex="2">
    </label>
  </div>

  <div class="col-3">
    <label>
      Phone Number
      <input placeholder="What is the best # to reach you?" id="phone" name="phone" tabindex="3">
    </label>
  </div>
  <div class="col-3">
    <label>
      Email
      <input placeholder="What is your e-mail address?" id="email" name="email" tabindex="4">
    </label>
  </div>
  <div class="col-3">
    <label>
      Availability
      <select tabindex="5">
        <option>5-15 hrs per week</option>
        <option>15-30 hrs per week</option>
        <option>30-40 hrs per week</option>
      </select>
    </label>
  </div>

  <div class="col-4">
    <label>
      Skills
      <input placeholder="List a few of your primary skills" id="skills" name="skills" tabindex="6">
    </label>
  </div>
  <div class="col-4">
    <label>
      Yrs Experience
      <input placeholder="How many years of experience?" id="experience" name="experience" tabindex="7">
    </label>
  </div>
  <div class="col-4">
    <label>Contact References?</label>
    <center style="position:relative; margin-bottom:8px;"><input type="checkbox" class="js-switch"></center>
  </div>
  <div class="col-4 switch">
    <label>E-mail Updates?</label>
    <center style="position:relative;margin-bottom:8px;"><input type="checkbox" class="js-switch"></center>
  </div>

  <div class="col-submit">
    <button class="submitbtn">Submit Form</button>
  </div>

  </form>

CSS

Đầu tiên, các bạn định dạng form với đoạn css sau :

/** 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;
  awidth: 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;
  awidth: 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 {
  awidth: 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);
}

Sau đó là đoạn css giúp chúng ta tạo khả năng Responsive cho Form.

/** responsive design **/
@media(min-awidth: 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 { awidth: 50% }
  .col-3 { awidth: 33.3333333333% }
  .col-4 { awidth: 25% }

  .col-submit button { awidth: 30%; margin: 0 auto; }
}

jQuery

Trong form này , chúng ta sẽ tạo nút option giống như trên iPhone, và để làm được điều này, chúng ta sẽ cần chèn plugin như sau:

 <link rel="stylesheet" type="text/css" media="all" href="css/switchery.min.css">
  <script type="text/javascript" src="js/switchery.min.js"></script>

Các file trên các bạn có thể tải về tại demo hoặc mục download trong bài viết này. Cuối cùng là các bạn chèn thêm đoạn script nhỏ sau là xong.

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 !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster