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

ดาวน์โหลด Twitter Sign-up Page using HTML5 And CSS3 (no js)
เข้าชมทั้งหมด : 1125 ครั้ง | ดาวน์โหลด : 172 ครั้ง | หมวด : HTML5


Twitter Sign-up Page using HTML5 And CSS3 (no js)

As we all know HTML5 gives us some pretty useful feature . Today I am going to show the feature which gives a new look to Forms module.In Old version of html , Forms were pretty boring and you have to add some js file to validate the Form field.Html5 gives some feature by which we don’t have to add extra js file for validation(till now only works with Webkit).

To see the new features of HTML5 , just submit the form without filling any field.Now the form will submitted only when you have all the form fields correct , and you should keep that in mind that there is no use of javascript.
Now the form validation handled by HTML5 itself .Isn’t that Nice?

Now let go through the code.

HTML

 

<form action="" method="post">
   <div id='name' class='outerDiv'>
 <label for="name">Full name:</label>
 <input type="text" name="name" required  />
 <div class='message' id='nameDiv'> Enter your first and last name. </div>
   </div>
   <div id='username' class='outerDiv'>
 <label for="number">Username:</label>
 <input type="text" name="username" required  />
 <div class='message' id='usernameDiv'> Pick a unique name on Twitter. </div>
   </div>
   <div id='password' class='outerDiv'>
 <label for="password">Password:</label>
 <input type="password" name="password" required />
 <div class='message' id='websiteDiv'>6 characters or more (be tricky!).</div>
   </div>
   <div id='email' class='outerDiv'>
 <label for="email">Email:</label>
 <input type="email" name="email" required />
 <div class='message' id='emailDiv'> We'll send you a confirmation.</div>
   </div>
   <div id='submit' class='outerDiv'>
        <input type="submit" value="Create my account" />
   </div>
 </form>

 

CSS

 

#twitter input:not(:focus){
 opacity:0.6;
}

#twitter  input:required{
}

#twitter  input:valid {
 opacity:0.8;
}  

#twitter input:focus:invalid{
 border:1px solid red;
 background-color:#FFEFF0;
}

Here I have given only the important css pseudo classes -:valid, :invalid:, :required.
If you want to add any symbol or mark to show the field is required , just add them within :required pseudo class.

ข้อมูลการดาวน์โหลด Twitter Sign-up Page using HTML5 And CSS3 (no js)

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

: 1125 ครั้ง


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

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

: 172 ครั้ง

ประเภท

: Freeware

ขนาดไฟล์

: 20.4 kb

หมวดหมู่

: HTML5

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


Html5 canvas loading animation effect


Html5 canvas loading animation effect
เข้าชมทั้งหมด : 915 ครั้ง | ดาวน์โหลด : 267 ครั้ง | หมวด : HTML5

HTML5 Demo: Drag and drop


Drag the list items over the dustbin, and drop them to have the bin eat the item
เข้าชมทั้งหมด : 662 ครั้ง | ดาวน์โหลด : 205 ครั้ง | หมวด : HTML5

Neon Text Effect With jQuery & CSS


In this combined design and coding tutorial, we are creating a neon glow text effect with CSS and jQuery, perfect for spicing up your web pages while keeping an eye on SEO. Read more。
เข้าชมทั้งหมด : 640 ครั้ง | ดาวน์โหลด : 179 ครั้ง | หมวด : HTML5

jQuery html5 canvas 3D animation effect


Directions: Step 1: Add the below code inside the section of the page: …
เข้าชมทั้งหมด : 652 ครั้ง | ดาวน์โหลด : 185 ครั้ง | หมวด : HTML5

Editable CSS3 jQuery html5 Image Gallery


We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with…
เข้าชมทั้งหมด : 895 ครั้ง | ดาวน์โหลด : 182 ครั้ง | หมวด : HTML5

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

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

Free Templates

 Joomla Template
 WordPress Template
 Free Templates

jQuery Script

 Menu & Navigation
 Slideshow & Scroller
 Image Effects
 HTML5
 Form