Skip to content

Instantly share code, notes, and snippets.

@chriswrightdesign

chriswrightdesign/inputs.html

Forked from robtarr/inputs.html
Last active August 29, 2015 14:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chriswrightdesign/46a3bca5c9e932d57359 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chriswrightdesign/46a3bca5c9e932d57359 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @robtarr robtarr created this gist Feb 2, 2012.
    176 changes: 176 additions & 0 deletions inputs.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,176 @@
    <!doctype html>

    <html>
    <head>
    <title>Number Test</title>
    <style>
    tr {
    background: #ddd;
    }
    tr:nth-child(odd) {
    background: #ccc;
    }
    td {
    border: 1px solid #bbb;
    }
    </style>
    </head>

    <body>
    <table>
    <thead>
    <tr>
    <th>Input</th>
    <th>Chrome 16 (Mac)</th>
    <th>Firefox 8 (Mac)</th>
    <th colspan="2">iOS 5</th>
    <th colspan="2">Kindle Fire</th>
    </tr>
    <tr>
    <th></th>
    <th>Comma</th>
    <th>Comma</th>
    <th>Comma</th>
    <th>Keyboard</th>
    <th>Comma</th>
    <th>Keyboard</th>
    </tr>
    <tbody>
    <tr>
    <td>
    <input type="number" value="45402">
    <pre>&lt;input type="number" value="45402"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>yes</td><td>number</td>
    <td>no</td><td>keypad</td>
    </tr>
    <tr>
    <td>
    <input type="number" value="45402">
    <pre>&lt;input type="number" value="45402"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>yes</td><td>number</td>
    <td>no</td><td>keypad</td>
    </tr>
    <tr>
    <td>
    <input type="number" value="45402" pattern="[0-9]*">
    <pre>&lt;input type="number" value="45402" pattern="[0-9]*"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>yes</td><td>keypad</td>
    <td>no</td><td>keypad</td>
    </tr>
    <tr>
    <td>
    <input type="number" value="45402" pattern="[0-9]{5}">
    <pre>&lt;input type="number" value="45402" pattern="[0-9]{5}"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>yes</td><td>number</td>
    <td>no</td><td>keypad</td>
    </tr>
    <tr>
    <td>
    <input type="number" value="45402" name="zip">
    <pre>&lt;input type="number" value="45402" name="zip"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>yes</td><td>number</td>
    <td>no</td><td>keypad</td>
    </tr>
    <tr>
    <td>
    <input type="text" value="45402" name="zip">
    <pre>&lt;input type="text" value="45402" name="zip"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>no</td><td>text</td>
    <td>no</td><td>text</td>
    </tr>
    <tr>
    <td>
    <input type="number" value="45402" name="phone">
    <pre>&lt;input type="number" value="45402" name="phone"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>yes</td><td>number</td>
    <td>no</td><td>keypad</td>
    </tr>
    <tr>
    <td>
    <input type="text" value="45402" name="phone">
    <pre>&lt;input type="text" value="45402" name="phone"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>no</td><td>text</td>
    <td>no</td><td>text</td>
    </tr>
    <tr>
    <td>
    <input type="tel" value="45402">
    <pre>&lt;input type="tel" value="45402"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>no</td><td>keypad</td>
    <td>no</td><td>keypad</td>
    </tr>
    <tr>
    <td>
    <input type="text" value="45402">
    <pre>&lt;input type="text" value="45402"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>no</td><td>text</td>
    <td>no</td><td>text</td>
    </tr>
    <tr>
    <td>
    <input type="text" value="45402" pattern="[0-9]*">
    <pre>&lt;input type="text" value="45402" pattern="[0-9]*"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>no</td><td>keypad</td>
    <td>no</td><td>text</td>
    </tr>
    <tr>
    <td>
    <input type="text" value="45402" pattern="[0-9]{5}">
    <pre>&lt;input type="text" value="45402" pattern="[0-9]{5}"></pre>
    </td>
    <td>no</td><td>no</td>
    <td>no</td><td>text</td>
    <td>no</td><td>text</td>
    </tr>
    <tr>
    <td>
    <input type="text" value="45402" pattern="[0-9]{5}(-[0-9]{4})*">
    <pre>&lt;input type="text" value="45402" pattern="[0-9]{5}(-[0-9]{4})*"></pre>
    </td>
    <td>no</td><td></td>
    <td>no</td><td>text</td>
    <td>no</td><td>text</td>
    </tr>
    <tr>
    <td>
    <input type="pc" value="45402">
    <pre>&lt;input type="pc" value="45402"></pre>
    </td>
    <td>no</td><td></td>
    <td>no</td><td>text</td>
    <td>no</td><td>text</td>
    </tr>
    <tr>
    <td>
    <input type="date" value="45402">
    <pre>&lt;input type="date" value="45402"></pre>
    </td>
    <td>no</td><td></td>
    <td>--</td><td>Date dropdown</td>
    <td>no</td><td>text</td>
    </tr>
    </tbody>
    </table>
    </body>