Comprehensive examples

Code Demo:

<fieldset>
    <legend>表单演示</legend>
    <form action="" method="POST" id="form1" oninput="output.value=parseInt(range.value)">
        <input type="text" autofocus="autofocus" required pattern="\d+" name="auto" placeholder="必填项测试" />
        <input type="number" name="demoNumber" min="1" max="100" step="2" />
        <input type="email" placeholder="请输入邮箱" name="mail" />
        <input type="url" name="url" placeholder="输入正确的网址" />
        <br />
        日期：<input type="datetime" name="time" />
        颜色：<input type="color" name="color" /><br />
        <br />
        <input type="range" min="0" max="50" step="5" name="range" value="0" />
        <output name="output">0</output>
        <br />
        <input type="submit" value="提交表单" />
    </form>
    表单外的input标签：
    <input type="text" form="form1" name="demo" />
</fieldset>