html5-form表单

来源：互联网发布：水利网络培训编辑：程序博客网时间：2024/06/05 02:18
本文介绍了html5的form表单的基本应用。
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <form action="http://localhost/CGWangWeb/service/register" method="post" id="register"></form>    <input type="text" name="user" value="" form="register"/>    <input type="password" name="pwd" value="" form="register"/>    <select name="year" form="register">        <option value="2010">2010</option>        <option value="2011">2011</option>        <option value="2012">2012</option>    </select>    <input type="submit" value="注册" form="register"/>    <br/><hr><br/>    Email：<input type="email" name="email" form="register"/>    <span style="color: red">（要么不填，要么填写合法）</span><br/><br/>    URL：<input type="url" name="url" form="register"/>    <span style="color: red">（要么不填，要么填写合法）</span><br/><br/>    Date：<input type="date" name="date" form="register"/><br/><br/>    Time：<input type="time" name="time" form="register"/><br/><br/>    Month：<input type="month" name="month" form="register"/><br/><br/>    Week：<input type="week" name="week" form="register"/><br/><br/>    数字：<input type="number" name="number" form="register"/>    <span style="color: red">（要么不填，要么填写合法）</span><br/><br/>    滑动条：<input type="range" name="range" max="10" step="2" form="register"/><br/><br/>    搜索：<input type="search" name="search" results="n" form="register"/><br/><br/>    颜色：<input type="color" name="color" form="register"/><br/><br/>    <hr>    required测试：<input type="text" name="userid" required="required" form="register"/>    <span style="color: red">（该字段为必填）</span>    <br/><br/>    placeholder测试：<input type="text" name="username" placeholder="我是默认值" form="register"/>    <span style="color: red">（该默认值不会提交到后台，若需要把默认值提交到后台，请用value属性）</span>    <br/><br/>    autofocus测试：<input type="text" name="age" autofocus="autofocus" form="register"/>    <span style="color: red">（进入页面，该属性获取焦点）</span>    <br/><br/>    pattern测试：<input type="text" name="money" pattern="\d{3}" form="register"/>    <span style="color: red">（符合"\d{3}"正则表达式的输入才合法，要么不填，要么填写合法）</span>    <br/><br/>    <hr>    自动填充表单<span style="color: red">（类似搜索框的自动填充功能）</span></br>    <input type="text" name="auto" list="singer">    <datalist id="singer">        <option>张学友</option>        <option>张敬轩</option>        <option>张国荣</option>        <option>大张</option>        <option>小张</option>    </datalist>    <br/><br/>    输出表单output：<span style="color: red">（自动算出结果）</span>    <form action="" method="post" oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">        <input type="text" name="num1" /> +        <input type="text" name="num2" />        <output name="result" />    </form></body></html>
1 0