h5表单实例

最新推荐文章于 2025-03-05 18:57:40 发布

Gumballs

最新推荐文章于 2025-03-05 18:57:40 发布

阅读量4k

点赞数 1

本文链接：https://blog.csdn.net/wo7024389/article/details/69403120

版权

本文将深入探讨HTML5中的新表单元素和属性，包括输入类型、验证机制以及表单控件的增强功能。通过实例展示如何创建交互性强、用户体验良好的网页表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/1.css"/>
    <title>用户注册</title>
</head>
<body>
<form action="#">
    <fieldset style="font-size: 10px">
        <header style="width: 100%;height: 30px;">
            <img src="../img/User.jpg" width="21px" height="21px"
                 alt="" style="float: left"/>
            <span style="float: left">用户注册</span>
        </header>
        <table>
            <tr>
                <td align="right">用户名：</td>
                <td>
                    <input type="text" name="name" autofocus/>
                    <span style="color: red">*<a href="#">检测是否有相同的用户名</a></span>
                </td>


            </tr>
            <tr>
                <td align="right">密码：</td>
                    <td>
                        <input type="password" name="pwd1"/>
                        <span style="color: red">*<span style="color: grey;">(至少6位)</span></span>
                    </td>
                <td align="right">真实姓名：</td>
                <td>
                    <input type="text" name="reallyname"/>
                    <span style="color: red">*</span>
                </td>
            </tr>
            <tr>
                <td align="right">确认密码：</td>
                <td>
                    <input type="password" name="pwd2"/>
                    <span style="color: red">*</span>
                </td>
                <td align="right">性别：</td>
                <td>

                    <select name="mysex" id="sex" style="width: 170px">
                        <option value="boy">男</option>
                        <option value="gril">女</option>
                    </select><span style="color: red">*</span>
                </td>
            </tr>
            <tr>
                <td align="right">证件类型：</td>
                <td>
                    <select name="mypapers" id="papers" style="width: 170px    ">
                        <option value="identity">身份证</option>
                        <option value="others">其他</option>
                    </select><span style="color: red">*</span>
                </td>
                <td align="right">出生日期：</td>
                <td>
                    <input type="datetime" name="datetime"/>
                    <span style="color: red">*</span>（格式为2010-02-10）
                </td>
            </tr>
            <tr>
                <td align="right">证件号码：</td>
                <td>
                    <input type="number" name="Papernumber"/>
                    <span style="color: red">*</span>
                </td>
                <td align="right">国家：</td>
                <td><input type="text" name="country"/></td>
            </tr>
            <tr>
                <td align="right">联系号码：</td>
                <td>
                    <input type="number" name="phone"/>
                    <span style="color: red">*</span>
                </td>
                <td align="right">城市：</td>
                <td><input type="text" name="city"/></td>
            </tr>
            <tr>
                <td align="right">手机号码：</td>
                <td><input type="number" name="movephone"/>
                    <span style="color: red">*</span>
                    <span style="font-size: 6px">（建议填写，以便进行短信通知）</span></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td align="right">e-mail</td>
                <td><input type="email" name="email"/></td>
                <td align="right">邮编</td>
                <td><input type="number" name="ZipCode"/></td>
            </tr>
            <tr>
                <td align="right">联系地址：</td>
                <td colspan="3">
                    <input type="text" name="address" style="width: 81%"/>
                    <span style="color: red">*</span></td>
            </tr>
            <tr>
                <td colspan="2"><input type="reset" style="float: right;background-color: gainsboro" /></td>
                <td colspan="2"><input type="submit" value="注册"style="background-color: red"/></td>
            </tr>
        </table>

    </fieldset>
</form>
</body>
</html>
显示如下：