精美的HTML5/CSS3表單 帶小圖標

今天我們要來分享一款非常精美的HTML5/CSS3表單，准備地說，這是一款經過美化的input輸入表單，每一個輸入表單都可以定義其兩側的小圖標，非常華麗。另外，這款表單應用還采用了3種不同的風格主題，你可以在演示頁的菜單欄中選擇一種樣式。需要高版本的瀏覽器才能支持。

你也可以在這里在線演示

下面我們來簡單分析一下這款表單的源代碼，源代碼由HTML代碼、CSS代碼及Javascript代碼組成。一共3組樣式，我們只對其中一組作解說。

HTML代碼：

<ul data-for="prefix">
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
      <li> <input type="text" placeholder="Type here..." /> </li>
    </ul>

很簡單，用一組input實現基本的輸入表單。這里利用了HTML5的placeholder屬性實現輸入框空白時默認的提示文字。

接下來是CSS代碼，將渲染這些輸入表單的樣式。

CSS代碼：

.postfix {
      vertical-align: top;
      display: inline-block;
      width: 20px;
      height: 20px;
      padding: 8px 10px;
      background: #f2f2f2;
      border: 1px solid #cccdcf;
      border-left: 0;
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
      -moz-border-radius-topright: 2px;
      -moz-border-radius-bottomright: 2px;
      -webkit-border-top-right-radius: 2px;
      -webkit-border-bottom-right-radius: 2px;
    }

  .prefix,
  .postfix {
    font-family: FontAwesome;
    line-height: 1.5em;
    font-size: 16px;
    color: #737373;
  }

其中表單前面的小圖標是這樣實現的：

.prefix.orange,
  .postfix.orange {
    background: #ffb700;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjhjMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ffb700 0%, #ff8c00 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb700), color-stop(100%,#ff8c00));
    background: -webkit-linear-gradient(top,  #ffb700 0%,#ff8c00 100%);
    background: -o-linear-gradient(top,  #ffb700 0%,#ff8c00 100%);
    background: -ms-linear-gradient(top,  #ffb700 0%,#ff8c00 100%);
    background: linear-gradient(to bottom,  #ffb700 0%,#ff8c00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
    border: 1px solid #e59500;
    color: #fff;
  }

data:image是CSS3專有的屬性，可以用編碼的二進制流來生成圖片。

Javascript代碼：

$(document).ready(function() {

    /* Force placeholder support */
    if(!Modernizr.input.placeholder){
      $("input").each( function(){

        thisPlaceholder = $(this).attr("placeholder");

        if(thisPlaceholder!=""){

         $(this).val(thisPlaceholder);
         $(this).focus(function(){ if($(this).val() == thisPlaceholder) $(this).val(""); });
         $(this).blur(function(){ if($(this).val()=="") $(this).val(thisPlaceholder); });
       }
     });
    }

   /* Prefix  */
    $('.ppfix.pre').each(function() {

      var className, preElem;

      className  = $(this).attr('class').replace('pre', '').replace('ppfix', '').trim();
      preElem    = '<span>  </span>';

      $(this).before(preElem);
    });

    /* Postfix */
    $('.ppfix.post').each(function() {

      var className, preElem;

      className  = $(this).attr('class').replace('post', '').replace('ppfix', '').trim();
      preElem    = '<span>  </span>';

      $(this).after(preElem);
    });

});

以上代碼只是一些最核心的代碼，全部代碼大家可以下載源碼來研究。源碼下載>>