HTML+CSS+JS 表单数据处理

最新推荐文章于 2023-08-26 11:20:32 发布

炉火纯青-旺

最新推荐文章于 2023-08-26 11:20:32 发布

阅读量1.6k

点赞数

分类专栏： js HTML+CSS 文章标签： html css js

本文链接：https://blog.csdn.net/qq_34870529/article/details/89445241

版权

js 同时被 2 个专栏收录

46 篇文章 1 订阅

订阅专栏

HTML+CSS

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web 前端开发</title>
    <link href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            background: #92bde7;
            color: #485e74;
            line-height: 1.6;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 1em;
        }

        .container {
            max-width: 1170px;
            margin-left: auto;
            margin-right: auto;
            padding: 1em;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        .brand {
            text-align: center;
        }

        .brand span {
            color: #fff;
        }

        .wrapper {
            box-shadow: 0 0 20px 0 rgba(72, 94, 116, 0.7);
        }

        .wrapper>* {
            padding: 1em;
        }

        .company-info {
            background: #c9e6ff;
        }

        .company-info h3,
        .company-info ul {
            text-align: center;
            margin: 0 0 1rem 0;
        }

        /* form */
        .contact {
            background: #f9feff;
        }

        .alert {
            display: none;
            text-align: center;
            padding: 10px;
            background: #79c879;
            color: #fff;
            margin-bottom: 10px;
        }

        .contact form {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
        }

        .contact form label {
            display: block;
        }

        .contact form p {
            margin: 0;
        }

        .contact form button,
        .contact form input,
        .contact form textarea {
            width: 100%;
            padding: 1em;
            border: 1px solid #c9e6ff;
        }

        .contact form button {
            background: #c9e6ff;
            border: 0;
        }

        .contact form button:hover,
        .contact form button:focus {
            background: #92dbe7;
            color: #fff;
            outline: 0;
            transition: background-color 0.8s ease-out;
        }

        .contact form .full {
            grid-column: 1/3;
        }

        /* 大屏幕尺寸下的样式 */
        @media(min-width:700px) {
            .wrapper {
                display: grid;
                grid-template-columns: 1fr 2fr;
            }

            .wrapper>* {
                padding: 2em;
            }

            .company-info h3,
            .company-info ul,
            .brand {
                text-align: left;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="brand"><span>Web</span>&nbsp;前端开发技术交流群</h1>
        <div class="wrapper animated bounceInLeft">
            <div class="company-info">
                <h3>Web前端开发技术交流群</h3>
                <ul>
                    <li><i class="fa fa-road"></i>&nbsp;北京市海淀区</li>
                    <li><i class="fa fa-phone"></i>&nbsp;QQ:1178980144</li>
                    <li><i class="fa fa-envelope"></i>&nbsp;1178980144@qq.com</li>
                </ul>
            </div>
            <div class="contact">
                <h3>邮件联系</h3>
                <div class="alert animated fadeIn">信息发送成功！</div>
                <form id="contactForm">
                    <p>
                        <label>姓名</label>
                        <input type="text" name="name" id="name">
                    </p>
                    <p>
                        <label>公司</label>
                        <input type="text" name="company" id="company">
                    </p>
                    <p>
                        <label>邮件</label>
                        <input name="email" id="email">
                    </p>
                    <p>
                        <label>电话</label>
                        <input type="text" name="phone" id="phone">
                    </p>
                    <p class="full">
                        <label>信息</label>
                        <textarea name="message" rows="5" id="message"></textarea>
                    </p>
                    <p class="full">
                        <button id="submit">提交</button>
                    </p>
                </form>
            </div>
        </div>
    </div>
    <script>
        // 添加submit事件
        document.getElementById('contactForm').addEventListener('submit', submitForm);

        function submitForm(e) {
            e.preventDefault();
            // 获取input中的值
            var name = getInputValue('name');
            var company = getInputValue('company');
            var email = getInputValue('email');
            var phone = getInputValue('phone');
            var message = getInputValue('message');
            console.log(name, company, email, phone, message);

            /* 将获取的数据保存至数据库，此处省略代码展示 */

            // 数据发送成功信息显示
            var alert = document.querySelector('.alert');
            alert.classList.remove('fadeOut');
            alert.style.display = "block";

            // 两秒后数据发送成功信息消失
            setTimeout(() => {
                alert.classList.add('fadeOut');
            }, 2000);
            alert.classList.remove('fadeOut');
        }

        function getInputValue(id) {
            return document.getElementById(id).value;
        }
    </script>
</body>

</html>

效果展示：（含PC端和移动端两种样式）

炉火纯青-旺

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS 表单数据处理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫