流萤k423 2024-11-13 11:55 采纳率: 81.4%
浏览 3
已结题

web前端制作HTML表单

project 4：HTML表单的应用
web前端制作HTML表单，编写一个会员登录页面

img

  • 写回答

1条回答 默认 最新

  • 阿白 2024-11-14 00:39
    关注

    html

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员登录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 400px;
            margin: 100px auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 8px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="submit"],
        input[type="reset"] {
            width: 48%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="reset"] {
            background-color: #f44336;
        }

        input[type="submit"]:hover,
        input[type="reset"]:hover {
            opacity: 0.8;
        }

        .form-footer {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>会员登录</h2>
    <form action="login.php" method="POST" onsubmit="return validateForm()">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>

        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required minlength="6">

        <div class="form-footer">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </div>
    </form>
</div>

<script>
    function validateForm() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;

        // 确保密码大于6个字符
        if (password.length < 6) {
            alert("密码长度必须大于6个字符");
            return false;
        }

        // 可根据需求添加其他验证

        return true;
    }
</script>

</body>
</html>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • Python Web Flask Web前端基础
    2025-01-19 14:03
    Python Web Flask Web前端基础 Python是一门广泛应用于多个领域的编程语言，以其简洁明了的语法和强大的社区支持而闻名。Web开发是Python应用的一个重要分支，而Flask则是众多Python Web框架中的佼佼者。Flask以其...
  • 基于Python和HTML/CSS技术的flask Web应用设计源码
    2024-09-27 02:42
    其中Python源文件是整个Web应用的后端核心，负责处理业务逻辑、数据库操作以及与前端的数据交互。Python的简洁性和易读性使得开发者可以快速地编写和调试代码，从而提高开发效率。在这个项目中，Python文件可能涉及...
  • python web前端开发框架,python 前端框架
    2021-04-26 18:33
    weixin_39637924的博客 Python web 开发一定要用框架吗?Python web 开发不一定要用框架因为Python Web框架也是Python开发出来的。只是为了减少重复造轮子，降低开发门槛。Python 的 Web 并不作为语言的一部分实现。因为通用语言的设计目标...
  • html基础及python web开发
    2024-07-23 15:17
    独白不白的博客 html标签，python的web开发
  • Python-Web---表单
    2023-12-15 21:03
    洛小yuan的博客 自定义的表单类dataForm继承了django.forms.Form类，它包含一个data字段。字段data的类型为forms.CharField。表单data字段会被渲染为一个元素和一个元素。表单字段的label参数指定在表单渲染生成的元素中显示的字符...
  • python-web开发[10]之初始前端
    2022-10-22 10:17
    Jasminexjf的博客 python-web开发系列
  • PythonWeb从入门到实战教程之2CSS、JavaScript、HTML.zip
    2023-11-01 07:35
    这是一份针对Python Web开发者的进阶学习资料，尽管侧重于前端，但对PythonWeb开发者来说同样重要，因为了解前端技术能更好地实现前后端协同工作。 首先，让我们从HTML开始。HTML是网页内容的基础，用于定义文本、...
  • Python Web前端开发JavaScript视频教程（四）
    2021-06-13 15:58
    在本套"Python Web前端开发JavaScript视频教程（四）"中，主要聚焦于JavaScript这门重要的编程语言在Web前端开发中的应用。JavaScript是构建交互式网页的关键技术，无论是对于有基础还是无基础的学习者，都能从中...
  • 基于Python的跨平台气象站Web应用设计源码
    2024-09-25 15:50
    基于Python的跨平台气象站Web应用设计源码所蕴含的知识点涉及多个方面，首先，项目的核心是使用Python语言编写的。Python由于其简洁明了的语法和强大的库支持，广泛应用于Web开发、数据分析、人工智能等多个领域。在...
  • python 零基础学习篇web前端开发基础Html基础9 表单提交 .mp4
    2022-04-21 13:17
    python 零基础学习篇
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 11月14日
  • 已采纳回答 11月14日
  • 修改了问题 11月13日
  • 创建了问题 11月13日