当前位置： 首页 > article >正文

【前端】html+css+javascript实现联系我们表单

article 2025/3/12 1:26:25

文章目录

  • 前言
  • 一、项目亮点与功能概览
    • 1.1 核心功能模块
    • 1.2 技术栈组成
  • 二、关键技术实现解析
    • 2.1 地图模块深度集成
      • 2.1.1 初始化配置
      • 2.1.2 城市联动实现
    • 2.2 现代表单系统构建
      • 2.2.1 增强型验证机制
      • 2.2.2 交互优化CSS
  • 三、性能优化实践
    • 3.1 地图加载优化策略
    • 3.2 样式渲染优化
  • 四、完整代码
    • html
    • css
    • javascript
    • 运行结果

前言

本文将通过一个企业级联系表单的开发案例，演示如何将百度地图与响应式表单完美结合，并融入现代Web开发的最佳实践。

一、项目亮点与功能概览

1.1 核心功能模块

  • 智能地图展示：动态加载企业位置

  • 城市联动定位：选择城市自动切换地图中心

  • 现代表单验证：HTML5原生验证+自定义规则

  • 响应式布局：完美适配移动端设备

  • 交互动效：按钮点击动效与地图标记交互

1.2 技术栈组成

  • 布局系统：CSS Grid + Flexbox
  • 地图引擎：百度地图API v3.0
  • 交互逻辑：原生JavaScript
  • 样式方案：CSS Variables + 现代选择器

二、关键技术实现解析

2.1 地图模块深度集成

2.1.1 初始化配置

// 创建地图实例
const map = new BMap.Map('allmap', {
    enableHighResolution: true,  // 启用高清显示
    enableMapClick: false        // 禁用默认点击事件
});

// 设置初始坐标（北京）
const initPoint = new BMap.Point(116.404, 39.915);
map.centerAndZoom(initPoint, 14);

// 添加控件集
map.addControl(new BMap.NavigationControl({ 
    anchor: BMAP_ANCHOR_TOP_LEFT,
    type: BMAP_NAVIGATION_CONTROL_SMALL
}));

2.1.2 城市联动实现

// 城市坐标映射表
const CITY_COORDINATES = {
    '北京': [116.404, 39.915],
    '上海': [121.4737, 31.2304],
    '深圳': [114.0579, 22.5431]
};

// 监听选择框变化
document.getElementById('city').addEventListener('change', function() {
    const [lng, lat] = CITY_COORDINATES[this.value];
    const newPoint = new BMap.Point(lng, lat);
    
    // 平滑过渡动画
    map.panTo(newPoint, { 
        duration: 1000,
        animation: BMAP_ANIMATION_DROP
    });
    
    // 重置地图缩放级别
    map.setZoom(14);
});

2.2 现代表单系统构建

2.2.1 增强型验证机制

<input type="tel" 
       id="phone" 
       pattern="[0-9]{11}" 
       required
       oninvalid="this.setCustomValidity('请输入11位手机号码')"
       oninput="this.setCustomValidity('')">

2.2.2 交互优化CSS

/* 现代输入框动效 */
input, textarea {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus {
    border-color: #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

/* 按钮加载状态 */
button.loading::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

三、性能优化实践

3.1 地图加载优化策略

  • 按需加载：延迟加载非首屏地图资源

  • 视图缓存：记录用户最后查看的位置

  • 矢量渲染：启用enableVectorMap选项

// 延迟加载地图
window.addEventListener('DOMContentLoaded', () => {
    const mapContainer = document.getElementById('allmap');
    const observer = new IntersectionObserver((entries) => {
        if(entries[0].isIntersecting) {
            initMap();
            observer.unobserve(mapContainer);
        }
    });
    observer.observe(mapContainer);
});

3.2 样式渲染优化

/* 启用GPU加速 */
.map-container {
    transform: translateZ(0);
}

/* 优化重绘区域 */
.contact-form {
    isolation: isolate;
}

四、完整代码

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 企业名称</title>

    <!-- 百度地图API -->
    <script src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

    <link rel="stylesheet" href="myCss.css">
</head>

<body>
<div class="container">
    <div class="contact-header">
        <h1>联系我们</h1>
        <p>请填写以下表单，我们将尽快与您联系</p>
    </div>

    <div class="grid-container">
        <div class="map-container" id="allmap"></div>

        <form class="contact-form" id="contactForm">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" required>
            </div>

            <div class="form-group">
                <label for="phone">联系电话</label>
                <input type="tel" id="phone" pattern="[0-9]{11}" required>
            </div>

            <div class="form-group">
                <label for="city">所在城市</label>
                <select id="city">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="深圳">深圳</option>
                </select>
            </div>

            <div class="form-group">
                <label for="message">留言内容</label>
                <textarea id="message" rows="5" required></textarea>
            </div>

            <button type="submit">发送消息</button>
        </form>
    </div>
</div>
<!-- Font Awesome -->
<script src="myJsp.js" defer></script>


</body>
</html>

css


    /* 现代样式设计 */
:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
}

body {
    font-family: 'Segoe UI', system-ui;
    line-height: 1.6;
    margin: 0;
    background: #f8f9fa;
}

.container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.contact-header {
    text-align: center;
    margin-bottom: 2rem;
}

.contact-header h1 {
    color: var(--primary-color);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.map-container {
    height: 500px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    font-weight: 500;
}

input, select, textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: border-color 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--secondary-color);
    outline: none;
}

button[type="submit"] {
    background: var(--secondary-color);
    color: white;
    padding: 14px 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, background 0.3s;
}

button[type="submit"]:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }

    .map-container {
        height: 300px;
    }
}

javascript


    // 增强版地图初始化
    const map = new BMap.Map('allmap');
    const point = new BMap.Point(116.404, 39.915);

    // 添加控件
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());

    // 个性化样式
    map.setMapStyle({
    styleJson: [
{
    "featureType": "all",
    "elementType": "labels",
    "stylers": {"visibility": "off"}
}
    ]
});

    // 添加信息窗口
    const marker = new BMap.Marker(point);
    const infoWindow = new BMap.InfoWindow("我们的总部位置");
    marker.addEventListener('click', () => {
    this.openInfoWindow(infoWindow);
});
    map.addOverlay(marker);

    map.centerAndZoom(point, 12);
    map.enableScrollWheelZoom(true);

    // 表单交互
    document.getElementById('contactForm').addEventListener('submit', (e) => {
    e.preventDefault();
    // 这里可以添加表单提交逻辑
    alert('表单提交成功！');
});

    // 城市选择联动
    document.getElementById('city').addEventListener('change', function() {
    const cityMap = {
    '北京': [116.404, 39.915],
    '上海': [121.4737, 31.2304],
    '深圳': [114.0579, 22.5431]
};
    const point = new BMap.Point(...cityMap[this.value]);
    map.panTo(point);
});

运行结果

在这里插入图片描述


http://www.kler.cn/a/580698.html

相关文章：

  • Java生成二维码并在二维码下添加文字，并导出为word
  • Nuxt.js 全栈开发指南：构建现代 Web 应用的终极解决方案
  • 计算机网络--访问一个网页的全过程
  • golang从入门到做牛马:第十一篇-Go语言变量作用域：变量的“生活圈”
  • nnUNet V2修改网络——全配置替换MultiResBlock模块
  • 【大模型基础_毛玉仁】2.2 大语言模型架构概览
  • Xilinx ZYNQ FSBL解读：LoadBootImage()
  • 一次现网问题定位-url超长导致的请求报错
  • babeltrace的使用
  • FX-extern C
  • idea打不开，idea打不开，Error occurred during initialization of VM
  • 前端充电 - 移动端 - 小程序登录、跳转/嵌入H5页面
  • VSCode 本人常用快捷键对照：德语键盘 vs. 英语键盘
  • Mac同时安装jdk8和jdk17，默认选择jdk8
  • [动手学习深度学习]12.权重衰退
  • 小结: IGMP协议
  • 【Redis】持久化(RDB和AOF)和事务
  • 平安养老险陕西分公司启动315金融消费者权益保护教育宣传活动
  • 密码学 网络安全 科普 网络安全密码技术
  • MFC 项目：简易销售系统实践