HTML5 Add cool responsive Form Landscaping Template plugin Tutorial

Source: Internet
Author: User

First, the HTML structure
<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= "[email protected]" >
<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>
<text area 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>


Second, 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 {
Color: #10689a;
Font-style:italic;
}

-moz-placeholder {
Color: #10689a;
Font-style:italic;
}

-moz-placeholder {
Color: #10689a;
Font-style:italic;
}

-ms-input-placeholder {
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;
}
}

Keymob Mobile advertising Platform, the most professional mobile phone advertising optimization management platform. Platform with high-quality resources, stable SDK, accurate data analysis, for the application of developers to bring higher revenue, committed to creating a high quality, efficient advertising technology Service platform.

HTML5 Add cool responsive Form Landscaping Template plugin Tutorial

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.