Exquisite HTML5/CSS3 forms with small icons and html5css3 forms

Exquisite HTML5/CSS3 forms with small icons and html5css3 forms

Today we are going to share a very exquisite HTML5/CSS3 form. We are going to say that this is a beautifying input form. Each input form can define small icons on both sides of it, very gorgeous. In addition, this form application uses three different style themes. You can select a style from the menu bar on the presentation page. A later version of browser is required.

You can also demonstrate it online here

Next, let's analyze the source code of this form. The source code consists of HTML code, CSS code, and Javascript code. There are three styles in total. We will only describe one of them.

HTML code:

<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>

It is easy to use a set of inputs to implement basic input forms. Here, the placeholder attribute of HTML5 is used to implement the default prompt text when the input box is blank.

The following is the CSS code, which will render the style of these input forms.

CSS code:

.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;  }

The small icon in front of the form is implemented as follows:

.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 is a proprietary attribute of CSS3 and can be generated using an encoded binary stream.

Javascript code:

$(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);    });});

The above code is only some of the core code. You can download the source code for research. Download source code>

Html5/CSS3 create a table

I wrote you a simple curriculum style table.
Take a look

<Style type = "text/css">
Table {border-collapse: collapse; text-align: center; vertical-align: middle ;}
Table tr {height: 25px ;}
Table td {width: 100px ;}
. Bg1 {background: # ccc ;}
Table tr: hover {background: # 09C ;}
. Bg2 {background: #999 ;}
. T1,. t2,. t3,. t4,. b1,. b2,. b3,. b4,. tab {display: block; overflow: hidden ;}
. T1,. t2,. t3,. b1,. b2,. b3 {height: 1px ;}
. T2,. t3,. t4,. b2,. b3,. b4,. tab {border-left: 2px solid # f6f; border-right: 2px solid # f6f ;}
. T1,. b1 {margin: 0 5px; background: # F6F ;}
. T2,. b2 {margin: 0 3px; border-width: 2px ;}
. T3,. b3 {margin: 0 2px ;}
. T4,. b4 {height: 2px; margin: 0 1px ;}
. Tab {height: 130px; background: # F7F8F9 ;}
. Tab_width {width: 700px; margin: 0 auto; cursor: pointer ;}
</Style>
<Div class = "tab_width">
<B class = "t1"> </B> <B class = "t2"> </B> <B class = "t3"> </B> <B class = "t4"> </B>
<Div class = "tab">
<Table>
<Tr>
<Td> Monday </td>
<Td> Tuesday </td>
<Td> Wednesday </td>
<Td> Thursday </td>
<Td> Friday </td>
<Td> Saturday </td>
<Td> Sunday </td>
</Tr>
<Tr class = "bg1">
<Td> Chinese Learning </td>
<Td> mathematics </td>
<Td> English </td>
<Td> multimedia </td>
<Td & g ...... remaining full text>

Html5/css3 how to write the following results, it is best to have detailed code to give high scores

<! DOCTYPE html>