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
  • Save chriswrightdesign/46a3bca5c9e932d57359 to your computer and use it in GitHub Desktop.
Save chriswrightdesign/46a3bca5c9e932d57359 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
inputs.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment