HTML--关于form表单//邮箱登录

最新推荐文章于 2023-12-10 20:28:40 发布

原创最新推荐文章于 2023-12-10 20:28:40 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

随笔专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个简单的表单，包括邮箱输入、密码设置、性别选择和验证码验证，以及阅读条款。通过实例展示了基础前端开发的实践过程。

制作结果：

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于form表单的实现</title>
    <style>
        form{
            background-color:bisque;
            width:30%;
            height:420px
        }
    </style>
</head>
<body>
    <form action="http://www.baidu.com/">
        <div>
            邮箱地址：
            <input type="text" name="name" id="name">
            @
            <select name="email">
                <option value="163.com">163.com</option>
                <option value="163.com">qq.com</option>
                <option value="163.com">126.com</option>
            </select>
        </div>
        <br>
        <div>
            密码：
            <input type="password" name="password">
        </div>
        <br>
        <div>
            性别：
            <input type="radio" name="gender" value="男">男
            <input type="radio" name="gender" value="女">女
        </div>
        <br>
        <div>
            验证码：
            <input type="text">
            <img src="验证码.png" title="这是验证码" width="20">
        </div>
        <br>
        <div>
            <button type="button">免费获取验证码</button>
        </div>
        <br>
        <div>
            备注：
            <textarea name="tips" rows="5" cols="20" style="resize:none;"></textarea>
        </div>
        <br>
        <div>
            <button>提交</button>
        </div>
        <br>
        <div>
            <input type="checkbox" name="read">我已阅读并同意<a href="#">XXX协议</a> 和隐私政策。
        </div>

    </form>
</body>
</html>