HTML5超酷响应式表单美化模板插件

这是一款非常效果非常酷的HTML5超酷响应式表单美化效果插件。表单的整体效果使用扁平化风格，使用media queries来为各种屏幕创建响应式效果。在大屏幕上，整个表单分三列显示，当屏幕小到一定程度，表单的每个字段占一行。

该表单采用HTML5新的表单type属性，使用它们可以对表单进行验证，相关内容可以查看：浅谈HTML5表单验证技术。

HTML结构

<form class="cbp-mc-form">
  <div class="cbp-mc-column">
    <label for="first_name">First Name</label>
    <input type="text" id="first_name" name="first_name" placeholder="Jonathan">
    <label for="last_name">Last Name</label>
    <input type="text" id="last_name" name="last_name" placeholder="Doe">
    <label for="email">Email Address</label>
    <input type="text" id="email" name="email" placeholder="jon@doe.com">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option>Choose a country</option>
      <option>France</option>
      <option>Italy</option>
      <option>Portugal</option>
    </select>
    <label for="bio">Biography</label>
    <textarea id="bio" name="bio"></textarea>
  </div>
  <div class="cbp-mc-column">
    <label for="phone">Phone Number</label>
    <input type="text" id="phone" name="phone" placeholder="+351 999 999">
    <label for="affiliations">Affiliations</label>
    <textarea id="affiliations" name="affiliations"></textarea>
    <label>Occupation</label>
    <select id="occupation" name="occupation">
      <option>Choose an occupation</option>
      <option>Web Designer</option>
      <option>Web Developer</option>
      <option>Hybrid</option>
    </select>
    <label for="cat_name">Cat's name</label>
    <input type="text" id="cat_name" name="cat_name" placeholder="Kitty">
    <label for="gagdet">Favorite Gadget</label>
    <input type="text" id="gagdet" name="gagdet" placeholder="Annoy-a-tron">
  </div>
  <div class="cbp-mc-column">
    <label>Type of Talent</label>
    <select id="talent" name="talent">
      <option>Choose a talent</option>
      <option>Ninja silence</option>
      <option>Sumo power</option>
      <option>Samurai precision</option>
    </select>
  <label for="drink">Favorite Drink</label>
    <input type="text" id="drink" name="drink" placeholder="Green Tea">
    <label for="power">Special power</label>
    <input type="text" id="power" name="power" placeholder="Anti-gravity">
    <label for="weapon">Weapon of choice</label>
    <input type="weapon" id="weapon" name="weapon" placeholder="Lightsaber">
    <label for="comments">Comments</label>
    <textarea id="comments" name="comments"></textarea> 
  </div>
  <div class="cbp-mc-submit-wrap"><input class="cbp-mc-submit" type="submit" value="Send your data" /></div>
</form>
                

CSS

.cbp-mc-form {
  position: relative;
}

/* Clearfix hack */
.cbp-mc-form:before, 
.cbp-mc-form:after { 
  content: " "; display: table; 
}

.cbp-mc-form:after { 
  clear: both; 
}

.cbp-mc-column {
  width: 33%;
  padding: 10px 30px;
  float: left;
}

.cbp-mc-form label {
  display: block;
  padding: 40px 5px 5px 2px;
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

.cbp-mc-form input,
.cbp-mc-form textarea,
.cbp-mc-form select {
  font-family: 'Lato', Calibri, Arial, sans-serif;
  line-height: 1.5;
  font-size: 1.4em;
  padding: 5px 10px;
  color: #fff;
  display: block;
  width: 100%;
  background: transparent;
}

.cbp-mc-form input,
.cbp-mc-form textarea {
  border: 3px solid #fff;
}

.cbp-mc-form textarea {
  min-height: 200px;
}

.cbp-mc-form input:focus,
.cbp-mc-form textarea:focus,
.cbp-mc-form label:active + input,
.cbp-mc-form label:active + textarea {
  outline: none;
  border: 3px solid #10689a;
}

.cbp-mc-form select:focus {
  outline: none;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #10689a;
    font-style: italic;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #10689a;
    font-style: italic;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #10689a;
    font-style: italic;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #10689a;
    font-style: italic;
}

.cbp-mc-submit-wrap {
  text-align: center;
  padding-top: 40px;
  clear: both;
}

.cbp-mc-form input.cbp-mc-submit {
  background: #10689a;
  border: none;
  color: #fff;
  width: auto;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  padding: 15px 30px;
  font-size: 1.1em;
  border-radius: 2px;
  letter-spacing: 1px;
}

.cbp-mc-form input.cbp-mc-submit:hover {
  background: #1478b1;
}

@media screen and (max-width: 70em) {
  .cbp-mc-column {
    width: 50%;
  }
  .cbp-mc-column:nth-child(3) {
    width: 100%;
  }
}

@media screen and (max-width: 48em) {
  .cbp-mc-column {
    width: 100%;
    padding: 10px;
  }
}