黑马程序员——HTML练习之表单

最新推荐文章于 2025-03-04 00:07:52 发布

Crystalbruce

最新推荐文章于 2025-03-04 00:07:52 发布

阅读量1.4k

点赞数

分类专栏：黑马程序员文章标签： html class div input windows phone stylesheet

本文链接：https://blog.youkuaiyun.com/Crystalbruce/article/details/7858113

版权

黑马程序员专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的HTML注册表单的设计方案，包括用户名、密码、邮箱等字段，并使用了基本的HTML元素如输入框、单选按钮、下拉菜单等进行实现。

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

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------

效果图

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>注册表单</title>
    <script type="text/javascript" src="Validate.js"></script>
    <link href="Register.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form action="" method="get" οnsubmit="return validate_form(this)">
        <div>
            <div>
                <div class="label">用户名</div>
                <div class="content"><input name="username" id="username" type="text" class="text" value="" /></div>
            </div><br /><br />
            <div>
                <div class="label">密码</div>
                <div class="content"><input name="password" id="password" type="password" class="text" value="" /></div>
            </div><br /><br />
            <div>
                <div class="label">确认密码</div>
                <div class="content"><input name="confirmPassword" id="confirmPassword" type="password" class="text" value="" /></div>
            </div><br /><br />
            <div>
                <div class="label">邮件</div>
                <div class="content"><input name="email" id="email" type="text" class="text" value="" /></div>
            </div><br /><br />
            <div>
                <div class="label">确认邮件</div>
                <div class="content"><input name="confirmEmail" id="confirmEmail" type="text" class="text" value="" /></div>
            </div><br /><br />

            <div>
                <div class="label">性别</div>
                <div class="content">
                    <input name="sex" type="radio" value="男" />
                    <input name="sex" type="radio" value="女" />
                </div>
            </div><br /><br />
            <div>
                <div class="label">城市</div>
                <div class="content">
                    <select name="city">
                        <option>北京</option>
                        <option>上海</option>
                        <option>天津</option>
                    </select>
                </div>
            </div><br /><br />

            <div>
                <div class="label">兴趣爱好</div>
                <div class="content">
                    <input name="interests1" type="checkbox" value="足球" />
                    <input name="interests2" type="checkbox" value="篮球" />
                    <input name="interests3" type="checkbox" value="乒乓球" />
                    <input name="interests4" type="checkbox" value="太极拳" />
                </div>
            </div><br /><br />
            <div class="content">
                <input type="reset" value="重置" />
                <input type="submit" value="提交" />
            </div>
    </div>
    </form>
</body>
</html>

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ------　　详细请查看：http://net.itheima.com