浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery表单及相关 2015-09-19

人气7368

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


                                       这是一款使用html5表单验证新属性制作的HTML5超酷响应式表单美化模板插件。该html5表单美化插件可以使用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;
  }
}

查看演示
下载资源:3
下载资源
错误提交:

格式:zip 大小:15.51KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1141.html 非特殊说明,本文版权归原作者所有,转载请注明出处
HTML5超酷响应式表单美化模板插件

我当前G币余额:0 已下载次数:3

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)