首页 > 其他分享 >示例 28: 联系我们页面

示例 28: 联系我们页面

时间:2024-09-17 22:22:25浏览次数:12  
标签:group form 示例 color margin 28 5px border 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: #f0f2f5;
        }
        .container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form-group textarea {
            resize: vertical;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            font-size: 1em;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .success-message {
            color: green;
            font-weight: bold;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Contact Us</h1>
        <form id="contactForm">
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">Message:</label>
                <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="button" onclick="sendMessage()">Send Message</button>
        </form>
        <div id="message" class="success-message"></div>
    </div>
    <script>
        function sendMessage() {
            const form = document.getElementById('contactForm');
            if (form.checkValidity()) {
                document.getElementById('message').textContent = 'Message sent successfully!';
                form.reset();
            }
        }
    </script>
</body>
</html>

标签:group,form,示例,color,margin,28,5px,border,页面
From: https://blog.51cto.com/u_16160172/12038959

相关文章

  • 织梦dedecms文章页面怎么随机推荐文章
    要在织梦CMS的文章页面上实现随机推荐文章的功能,可以使用织梦提供的 {dede:arc} 标签来实现。下面是一个简单的示例,展示如何在织梦CMS的文章页面上随机推荐文章。步骤1:编辑模板文件登录织梦CMS后台。导航到“模板”->“模板列表”,找到你想要编辑的文章详情页模板文件,通常这......
  • java线程池编程示例
    程序功能这段代码展示了如何使用Java线程池来并发执行多个任务。通过创建一个固定大小为3的线程池,程序提交了5个任务,并让线程池中的线程并发处理这些任务。每个任务模拟了一个耗时操作,最后程序等待所有任务完成后关闭线程池。代码importjava.util.concurrent.Ex......
  • 828华为云征文 | 云服务器Flexus X实例:one-api 部署,支持众多大模型
    目录一、one-api介绍二、部署one-api2.1拉取镜像2.2部署one-api三、运行one-api3.1添加规则3.2运行one-api 四、添加大模型API4.1添加大模型API五、总结本文通过 Flexus云服务器X实例部署one-api。Flexus云服务器X实例是新一代面向中小企业和开发......
  • 水果软件21更新!Image-Line FL Studio Producer Edition v24.1.1.4285 WIN全插件版本+
    在数字音乐创作领域,FLStudio(也称为FruityLoops)一直以来都是众多音乐制作人心目中的首选工具。随着版本的不断更新迭代,FLStudioProducerEdition24.1.1.4285中文版的发布,无疑为广大的华语音乐创作者们带来了更为便捷、高效且功能强大的音乐制作体验。本文将从多个角度深入......
  • <<编码>> 第13章如何实现减法--示例电路
    8位加减法器info::操作说明鼠标单击逻辑输入切换0|1状态鼠标点击SUB开关切换加/减法状态做加法时,和超过255则产生“上溢出”,OU标志变为高电平.做减法时,当B比A大时则产生“下溢出”,OU标志变为高电平.primary::在线交互操作链接https://cc.......
  • 【Linux进程】Linux Shell编程实战:构建简易脚本示例与技巧详解
    ......
  • Nuxt Kit 中的页面和路由管理
    title:NuxtKit中的页面和路由管理date:2024/9/17updated:2024/9/17author:cmdragonexcerpt:摘要:本文介绍了NuxtKit中页面和路由管理的高级功能,包括extendPages自定义页面路由、extendRouteRules定义复杂路由逻辑及addRouteMiddleware注册路由中间件。通过这些功能,......
  • 828华为云征文 | 云服务器Flexus X实例:轻量级http服务器 Tinyhttpd 部署
    目录一、云服务器Flexus二、Tinyhttpd介绍三、部署Tinyhttpd四、运行4.1编译项目4.2运行项目五、总结Flexus云服务器X实例是华为云推出的一款高性能、高可靠性的云服务器产品,它专为满足企业级用户对计算资源的严格要求而设计。本篇文章通过部署 轻量级http服务......
  • 828 华为云征文|华为 Flexus 云服务器搭建 PicGo 图床
    一、引言在这个数字化的时代,高效地管理和存储图片资源变得至关重要。2024年9月14日,我将利用华为Flexus云服务器搭建一个PicGo图床,开启一场便捷的图片管理之旅。二、华为Flexus云服务器:稳定的基石华为Flexus云服务器以其卓越的性能和高度的稳定性脱颖而出。......
  • 示例 29: 个人简历页面
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Resume</title>&......