综合实例

代码演示：

<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>

继续学习

新建文件

<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>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠