Merge pull request #753 from petele/master

Updated forms article (for issue #482)
html5rocks · Nov 13, 2013 · d60e55c · d60e55c
2 parents a952549 + a899e96
commit d60e55c
Show file tree

Hide file tree

Showing 12 changed files with 570 additions and 530 deletions.
diff --git a/content/tutorials/forms/html5forms/en/index.html b/content/tutorials/forms/html5forms/en/index.html
diff --git a/content/tutorials/forms/html5forms/static/input-types.html b/content/tutorials/forms/html5forms/static/input-types.html
@@ -0,0 +1,126 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Request To Cross Bridge</title>
+
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
+
+    <style type="text/css">
+
+      body {
+        background-color: #eee;
+      }
+
+      input:invalid {
+        border-color: #b94a48;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      }
+
+      input:valid {
+        border-color: #468847;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      }
+
+    </style>
+
+  </head>
+  <body>
+    <div class="container">
+
+      <form class="form-bridge">
+        <h2>Before you may cross the bridge, you must answer these questions!</h2>
+        <div class="form-group">
+          <label for="first_last">WHAT, is your name?</label>
+          <input type="text" class="form-control" id="first_last" placeholder="First Last" required autofocus autocomplete="on">
+          <span class="help-block"></span>
+        </div>
+        <div class="form-group">
+          <label for="email_addr">WHAT, is your email address?</label>
+          <input type="email" class="form-control" id="email_addr" placeholder="Email address" required>
+          <span class="help-block"></span>
+        </div>
+        <div class="form-group">
+          <label for="email_addr_confirm">WHAT, is your email address? Again!</label>
+          <input type="email" class="form-control" id="email_addr_confirm" placeholder="Confirm email address" required autocomplete="off">
+          <span class="help-block"></span>
+        </div>
+        <div class="form-group">
+          <label for="fav_website">WHAT, is your favorite website?</label>
+          <input type="url" class="form-control" id="fav_website" placeholder="Favorite website" required>
+          <span class="help-block"></span>
+        </div>
+        <div class="form-group">
+          <label for="fav_pizza">WHAT, is the phone number of your favorite pizza place?</label>
+          <input type="tel" class="form-control" id="fav_pizza" placeholder="+1-416-967-1111">
+          <span class="help-block"></span>
+        </div>
+        <div class="form-group">
+          <label for="dob">WHAT, is your date of birth?</label>
+          <input type="date" class="form-control" id="dob">
+          <span class="help-block"></span>
+        </div>
+        <div class="form-group">
+          <label for="age">WHAT, is your age?</label>
+          <input type="number" class="form-control" id="age" placeholder="Age" min="1" max="110" required>
+          <span class="help-block"></span>
+        </div>
+        <div class="form-group">
+          <label for="color">WHAT, is your favorite color?</label>
+          <input type="color" class="form-control" id="color">
+          <span class="help-block"></span>
+        </div>
+        <div class="form-group">
+          <label for="chocolate">WHAT, is your favorite kind of chocolate?</label>
+          <input type="text" class="form-control" id="chocolate" list="chocType">
+          <span class="help-block"></span>
+          <datalist id="chocType">
+            <option value="white" />
+            <option value="milk" />
+            <option value="dark" />
+          </datalist>
+        </div>
+        <div class="form-group">
+          <label for="part_number">WHAT, is the part number of a <a href="http://goo.gl/0CNgfD">3/4" Philips Head machine screw</a>?</label>
+          <input type="text" class="form-control" id="part_number" placeholder="XXX9999XX" pattern="[A-Z,a-z]{3}[0-9]{4}[A-Z,a-z]{2}">
+          <span class="help-block"></span>
+        </div>
+        <div class="form-group">
+          <label for="airspeed_velocity">WHAT, is the airspeed velocity of an unladen swallow? <span id="asv">1</span> (m/s)</label>
+          <input type="range" class="form-control" id="airspeed_velocity" min="1" max="50" step="1" value="1">
+          <span class="help-block"></span>
+        </div>
+
+
+        <button class="btn btn-lg btn-primary btn-block" type="submit">Cross the bridge</button>
+      </form>
+
+    </div> <!-- /container -->
+
+    <script type="text/javascript">
+      document.getElementById("email_addr_confirm").addEventListener("input", verifyEmail);
+      document.getElementById("airspeed_velocity").addEventListener("input", showAirspeed);
+
+      function verifyEmail(input) {
+        input = input.srcElement;
+        if (input.value != document.getElementById('email_addr').value) {
+          input.setCustomValidity('The two email addresses must match.');
+        } else {
+          input.setCustomValidity('');
+        }
+        input.nextElementSibling.innerText = input.validationMessage;
+      }
+
+      function showAirspeed(input) {
+        input = input.srcElement;
+        document.getElementById("asv").innerText = input.valueAsNumber;
+      }
+
+    </script>
+  </body>
+</html>
diff --git a/content/tutorials/forms/html5forms/static/ios-email.png b/content/tutorials/forms/html5forms/static/ios-email.png
diff --git a/content/tutorials/forms/html5forms/static/ios-number.png b/content/tutorials/forms/html5forms/static/ios-number.png
diff --git a/content/tutorials/forms/html5forms/static/ios-url.png b/content/tutorials/forms/html5forms/static/ios-url.png
diff --git a/content/tutorials/forms/html5forms/static/n4-color_framed.png b/content/tutorials/forms/html5forms/static/n4-color_framed.png
diff --git a/content/tutorials/forms/html5forms/static/n4-date_framed.png b/content/tutorials/forms/html5forms/static/n4-date_framed.png
diff --git a/content/tutorials/forms/html5forms/static/n4-form_framed.png b/content/tutorials/forms/html5forms/static/n4-form_framed.png
diff --git a/content/tutorials/forms/html5forms/static/n4-tel_framed.png b/content/tutorials/forms/html5forms/static/n4-tel_framed.png
diff --git a/content/tutorials/forms/html5forms/static/n7-form_framed.jpg b/content/tutorials/forms/html5forms/static/n7-form_framed.jpg
diff --git a/content/tutorials/forms/html5forms/static/n7-form_framed.png b/content/tutorials/forms/html5forms/static/n7-form_framed.png
diff --git a/database/tutorials.yaml b/database/tutorials.yaml
@@ -1695,14 +1695,17 @@ tags:
 
 title: Making Forms Fabulous with HTML5
 url: /tutorials/forms/html5forms/
-author_id: jankleinert
+author_id: petele
+author_id2: jankleinert
 publication_date: 2011-06-02
+update_date: 2013-11-14
 description: Take advantage of improved forms support in HTML5 to build better forms, more easily.
 browser_support:
 - chrome
 - opera
 - safari
 - ff
+- ie
 tags:
 - forms
 - class:semantics