在HTML5中使用Form新的input types

下面的例子展示了在HTML5中你如何使用新的form input type,和现在的iPod Touch(使用IOS4.2.1和Safari 5.0.2)输出一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Using the new form input types in HTML5</title>
</head>
<body>
 
    <form>
        <table>
            <tr>
                <td>color:</td>
                <td><input type="color" /></td>
            </tr>
            <tr>
                <td>date:</td>
                <td><input type="date" /></td>
            </tr>
            <tr>
                <td>datetime:</td>
                <td><input type="datetime" /></td>
            </tr>
            <tr>
                <td>datetime-local:</td>
                <td><input type="datetime-local" /></td>
            </tr>
            <tr>
                <td>email:</td>
                <td><input type="email" /></td>
            </tr>
            <tr>
                <td>month:</td>
                <td><input type="month" /></td>
            </tr>
            <tr>
                <td>number:</td>
                <td><input type="number" /></td>
            </tr>
            <tr>
                <td>range:</td>
                <td><input type="range" /></td>
            </tr>
            <tr>
                <td>search:</td>
                <td><input type="search" /></td>
            </tr>
            <tr>
                <td>tel:</td>
                <td><input type="tel" /></td>
            </tr>
            <tr>
                <td>time:</td>
                <td><input type="time" /></td>
            </tr>
            <tr>
                <td>url:</td>
                <td><input type="url" /></td>
            </tr>
            <tr>
                <td>week:</td>
                <td><input type="week" /></td>
            </tr>
        </table>
    </form>
 
</body>
</html>
源码下载 :

相关推荐