Project9：Data collector web（frontend）-优快云博客

本文链接：https://blog.youkuaiyun.com/BLUEsang/article/details/106794963

本文介绍如何使用HTML创建包含电子邮件和身高输入字段的表单，并通过CSS进行美化，同时展示了提交后的感谢页面设计。

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

Frontend

HTMLcode

index.html
form表单，构建两个输入+一个button按钮；

<!DOCTYPE html>
<html lang="en">
    <title>Data Collector App</title>
    <head>
        <link href="../static/main.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <h1>Collecting height</h1>
            <h3>Please fill entires to get population statistics on height</h3>
            <form action="success.html" method="POST">
                <input title="Your email will be safe with us" placeholder="Enter your email address" type="email" name="email_name" required><br>
                <input title="Your data will be safe with us" placeholder="Enter your Height in CM" type="number" min="50",max="300" name="height_name" required><br>
                <button type="submit">Submit</button>
            </form>
        </div>
    </body>
</html>

success.html
显示p标签内容；

<!DOCTYPE html>
<html lang="en">
    <title>Data Collector App</title>
    <head>
        <link href="../static/main.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <p> Thank you for your submission<br>
            You will receive an email with the survey results shortly.
            </p>
        </div>
    </body>
</html>

CSScode

html,body{
    height:100%;
    margin:0 auto;
}

.container {
    margin:0 auto;
    width: 100%;
    height: 100%;
    background-color: #006666;
    color: #e6ffff;
    overflow: hidden;
    text-align:center;    
    
}

.container h1 {
    font-family: Arial, sans-serif;
    font-size:30px;
    color:#DDCCEE;
    margin-top: 80px;

}

.container form{
    margin: 20px;
}

.container input{
    width:400px;
    height:30px;
    font-size:30px;
    margin: 4px;
    padding:20px;
    transition: all 0.2s ease-in-out;
}

.container button{
    width: 110px;
    height:50px;
    background-color: steelblue;
    margin:15px;
    font-size:20px;
    font-family: Arial, Helvetica, sans-serif;
}

.container p{
    margin:100px;
    font-size:20px;
}