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

ดาวน์โหลด Web Forms with HTML5 no javascript
เข้าชมทั้งหมด : 629 ครั้ง | ดาวน์โหลด : 162 ครั้ง | หมวด : HTML5


Web Forms with HTML5 no javascript

For years now, most Web forms have included at least some lines of JavaScript code. Typically this JavaScript is used to validate the form — that is, check all the fields have been filled in correctly before the form is sent to the server. JavaScript is also used to enhance forms with additional functionality, such as calendar widgets and the like.

While using JavaScript for these purposes is a pretty good solution, it's not without its problems:

  • Not all browsers have JavaScript enabled, or can even run JavaScript.
  • Each Web developer builds their JavaScript form validation and widgets differently. This means that, when confronted with a new form, a user has to learn the form's unique quirks and foibles in order to use it.
  • Adding decent validation to a form — not to mention creating custom widgets for things like dates and number ranges — is both fiddly and time-consuming.

The good news is that these dark days of JavaScript-laden Web forms may soon be coming to an end. Thanks to the joys of HTML5, we can now create forms with built-in validation and rich widgets for dates, numbers and so on, all without including a single line of JavaScript code. Hallelujah!

As with most cutting-edge Web stuff, there's a catch to all this, and that is browser support (or lack of it). Fortunately, there are a few JavaScript libraries out there that can emulate HTML5 form validation and widgets, as we'll see later in the tutorial. Sure, this does mean we're not exactly banishing JavaScript for now, but at least we can remove it once the browsers catch up!

In this tutorial I'm going to walk you through the process of creating a nice, self-validating, widget-rich, HTML5 Web form. It's an online order form for an imaginary software company.

Step 1. Create the basic markup

First we'll create the basic skeleton markup for the page and form:

<!doctype html>
<html lang="en">
<head>

<title>HTML5 Web Form with (almost!) No JavaScript in Sight | Elated.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

</head>

<body>

<div class="wideBox">
  <h1>HTML5 Web Form with (almost!) No JavaScript in Sight</h1>
</div>

<form id="orderForm" action="" method="get">

  <h1>Software Order Form</h1>

  <fieldset>
    <legend>License details</legend>

    <ul>
    </ul>

  </fieldset>

  <fieldset>
    <legend>Billing details</legend>

    <ul>
    </ul>

  </fieldset>

  <fieldset>
    <legend>Payment details</legend>

    <ul>
    </ul>

  </fieldset>

  <input type="submit" name="placeOrder" value="Place Your Order" />
   
</form>

</body>
</html>

No big surprises here — this is fairly standard stuff. We're using the HTML5 doctype, adding head and title elements, specifying the utf-8 (Unicode) character set, adding a page title, and creating the basic form.

The form itself consists of an h1 heading, and 3 fieldset elements for the 3 sections of the form. Each fieldset has a legend, and an empty ul (unordered list) element. We'll place our fields inside these lists. The form ends with a submit button so that the user can send the form.

Step 2. Add the "Email address" field

The first field we'll add to the form is the "Email address" field. This goes inside the unordered list in the "License details" fieldset.

 <fieldset>
    <legend>License details</legend>

    <ul>

      <li>
        <label for="emailAddress">Email address</label>
        <input type="email" name="emailAddress" id="emailAddress" placeholder="name@example.com" required="required" autofocus="autofocus" maxlength="50" />
      </li>
      
    </ul>

  </fieldset>

ข้อมูลการดาวน์โหลด Web Forms with HTML5 no javascript

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

: 629 ครั้ง


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

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

: 162 ครั้ง

ประเภท

: Freeware

ขนาดไฟล์

: 6.7 kb

หมวดหมู่

: HTML5

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


Html5 canvas loading animation effect


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

HTML5 Demo: Drag and drop


Drag the list items over the dustbin, and drop them to have the bin eat the item
เข้าชมทั้งหมด : 656 ครั้ง | ดาวน์โหลด : 204 ครั้ง | หมวด : 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。
เข้าชมทั้งหมด : 632 ครั้ง | ดาวน์โหลด : 178 ครั้ง | หมวด : HTML5

jQuery html5 canvas 3D animation effect


Directions: Step 1: Add the below code inside the section of the page: …
เข้าชมทั้งหมด : 646 ครั้ง | ดาวน์โหลด : 183 ครั้ง | หมวด : 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…
เข้าชมทั้งหมด : 882 ครั้ง | ดาวน์โหลด : 181 ครั้ง | หมวด : HTML5

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

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