ดาวน์โหลดฟรี

ดาวน์โหลด Stylish Contact Form with CSS3 HTML5
เข้าชมทั้งหมด : 673 ครั้ง | ดาวน์โหลด : 146 ครั้ง | หมวด : Form


Stylish Contact Form with CSS3 HTML5

we will show you the code step by step to create a full HTML5 CSS3 contact form like the one above, without using any images. First, a little disclaimer. HTML5 and CSS3 are still working drafts; the goal of this tutorial is to show what we can do with those technologies. This form has some compatibility issues with old browsers, so if you want to use it in production, do so at your own risks.

The form we will build is a simple contact form with basic information: name, email, URL, subject and message.

For the sanity of the code, I omitted the vendor prefixes in this article, but you will find them in the complete file (or by viewing the source code of the example)

HTML5 New Form Elements

HTML5 specs introduce many new form elements to enhance form functionalities. For this tut, here are the ones we will use in our form:

  • Input type = email can be used when user needs to enter an email address. Browsers that support it will be able to detect if what the user entered was an email address or not.
  • Input type = url can be used to check if the user entered a correct and valid URL.
  • Autocomplete = on attribute can be placed either on the form, or on single inputs. When autocomplete = "on", if the a user has already completed a form, the autocomplete attribute enables him to find what he already entered.
  • Require = required attribute sets the state of a form element as required. For browsers which support it, the user won’t be able to send the form until all the required fields have been completed. By default the user can’t see required fields until he submits the form, so the web designer still has to add a visual indication.
  • Placeholder this attribute represents a short hint so that the user knows what he can enter as data, for example the format for email. The placeholder disappears when the user clicks on the field, and reappears when the cursor is moved and the field is still empty.

Now that you are more familiar with the new elements, let’s see the HTML code for our nice little form :

01 <div id="content">
02 <h1> Contact me h1>
03   
04 <form action=" " method="post"  autocomplete="on">
05 <p> <label for="username" class="iconic user" > Name <span class="required">*span>label> <input type="text" name="username" id="username"  required="required" placeholder="Hi friend, how may I call you ?"  /> p>
06   
07 <p> <label for="usermail" class="iconic mail-alt"> E-mail address <span class="required">*span>label> <input type="email" name="usermail" id="usermail" placeholder="I promise I hate spam as much as you do" required="required"  /> p>
08   
09 <p> <label for="usersite" class="iconic link"> Website label> <input type="url" name="usersite" id="usersite"  placeholder="e.g.: http://www.miste.com" /> p>
10   
11 <p> <label for="subject" class="iconic quote-alt"> Subject label> <input type="text" name="subject" id="subject"  placeholder="What would you like to talk about?" /> p>
12   
13 <p> <label for="message" class="iconic comment"> Message  <span class="required">*span>label> <textarea placeholder="Don't be shy, live me a friendly message and I'll answer as soon as possible "  required="required" >textarea> p>
14   
15 <p class="indication"> All fields with a <span class="required">*span> are requiredp>
16   
17 <input type="submit" value=" ★  Send the mail !" />
18 form>
19 div>

Not many ids or classes, the goal here is to use as less HTML as possible and to use CSS3 to style the form. And don’t forget to use the HTML5 doctype !

Creating the Striped Background

Let's start with general layout and let's give this form a background.To create the striped border, we will only style one element : #content. The idea here is pretty simple : we will create a full striped background on this element using CSS3 gradients like this :

01 #content{
02 position:relative;
03 margin:50px auto;
04 width:400px;
05 min-height:200px;
06 z-index:100;
07 padding:30px;
08 border:1px solid #383838;
09 background: #D1D1D1;
10 /* My stripped background */
11 background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px);
12 border-radius:8px;
13 box-shadow:0px 1px 6px #3F3F3F;
14 }

ข้อมูลการดาวน์โหลด Stylish Contact Form with CSS3 HTML5

เข้าชมทั้งหมด

: 673 ครั้ง


ตัวอย่างการทำงาน

ดาวน์โหลดไปแล้ว

: 146 ครั้ง

ประเภท

: Freeware

ขนาดไฟล์

: 127.9 kb

หมวดหมู่

: Form

แนะนำโปรแกรมที่เกี่ยวข้อง


cool jQuery and CSS3 Login Box Dialog Window


Hello guys, in this demo will introduce how to create a simple modal dialog window with jQuery by using of a login box. This demorequires intermediate knowledge of CSS and jQuery. For best results, please…
เข้าชมทั้งหมด : 957 ครั้ง | ดาวน์โหลด : 197 ครั้ง | หมวด : Form

jQuery Awesome File Upload effect


File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing.…
เข้าชมทั้งหมด : 783 ครั้ง | ดาวน์โหลด : 205 ครั้ง | หมวด : Form

jQuery & CSS3 custom skin select lists


Skin your HTML select lists easily with Selectyze plugin. It works with IE6-9, chrome, Safari, Firefox.. HOW DOES IT WORK ? Selectyze hide your select element, and build a
just below the select…
เข้าชมทั้งหมด : 706 ครั้ง | ดาวน์โหลด : 176 ครั้ง | หมวด : Form

Stylish Handwritten Letter Style jQuery Form


Follow this step by step tutorial to create a traditional pen & paper inspired contact form in HTML and CSS. use a mix of basic and intermediate CSS techinques to give the form the appearance…
เข้าชมทั้งหมด : 725 ครั้ง | ดาวน์โหลด : 177 ครั้ง | หมวด : Form

Unique css3 contact form


This is an effect of a letter sliding out from an envelope on mouse hover. It works in browsers supporting css3 transitions. In IE the envelope is not visible, I certainly could have played a bit more…
เข้าชมทั้งหมด : 729 ครั้ง | ดาวน์โหลด : 195 ครั้ง | หมวด : Form

หมวดหมู่โปรแกรม

 เกมส์
 ไดร์ฟเวอร์
 โปรแกรมด้านความปลอดภัย
 บราวเซอร์และปลั๊กอิน
 โปรแกรมด้านธุรกิจ
 โปรแกรมการติดต่อสื่อสาร
 เครื่องมือ สำหรับนักพัฒนา
 โปรแกรมสำหรับจัดการภาพ
 โปรแกรมเพื่อการศึกษา
 โปแกรมการออกแบบกราฟฟิก
 โปรแกรมด้านอินเตอร์เน็ต
 โปรแกรมสำหรับ iTunes & iPod
 โปรแกรมสำหรับ MP3 & Audio
 โปรแกรมด้านเครือข่าย
 โปรแกรมทั่วไป & OS
 โปรแกรมจัดการวีดีโอ&ภาพยนต์
 เว็บไซต์สำเร็จรูป (CMS)

Free Templates

 Joomla Template
 WordPress Template
 Free Templates

jQuery Script

 Menu & Navigation
 Slideshow & Scroller
 Image Effects
 HTML5
 Form