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

ดาวน์โหลด Web Forms with HTML5 no javascript
เข้าชมทั้งหมด : 637 ครั้ง | ดาวน์โหลด : 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

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

: 637 ครั้ง


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

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

: 162 ครั้ง

ประเภท

: Freeware

ขนาดไฟล์

: 6.7 kb

หมวดหมู่

: HTML5

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


Html5 canvas loading animation effect


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

HTML5 Demo: Drag and drop


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


Direct