网站首页 > 技术文章正文

如何一分钟写出一个漂亮的表单页面你想知道吗?

nanyue 2025-09-01 10:17:49 技术文章 5 ℃
一分钟就能生成一个表单页面，以下是具体的步骤：
1、利用deepseek输入关键词：写一个兼容pc和H5的表单页面（可以根据需要，给出具体的字段名称，例如姓名，电话、联系方式等提示词）
2、输入完成以后deepseek就开始生成了
3、代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能表单系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .form-card {
            transition: all 0.3s ease;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .form-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .input-field:focus {
            border-color: #4f46e5;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
        }
        @media (max-width: 640px) {
            .form-container {
                padding: 1rem;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8 form-container">
        <div class="max-w-2xl mx-auto">
            <div class="bg-white rounded-xl form-card p-6 md:p-8">
                <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6 text-center">用户信息登记</h1>
                
                <form id="userForm" class="space-y-6">
                    <!-- 基本信息 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                            <input type="text" id="name" name="name" required
                                class="w-full px-4 py-2 rounded-lg border border-gray-300 input-field focus:outline-none"
                                placeholder="请输入您的姓名">
                            <p class="mt-1 text-xs text-red-500 error-message hidden">请输入有效姓名</p>
                        </div>
                        
                        <div>
                            <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                            <select id="gender" name="gender"
                                class="w-full px-4 py-2 rounded-lg border border-gray-300 input-field focus:outline-none">
                                <option value="">请选择</option>
                                <option value="male">男</option>
                                <option value="female">女</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                    </div>

                    <!-- 联系方式 -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
                        <input type="email" id="email" name="email" required
                            class="w-full px-4 py-2 rounded-lg border border-gray-300 input-field focus:outline-none"
                            placeholder="example@domain.com">
                        <p class="mt-1 text-xs text-red-500 error-message hidden">请输入有效邮箱地址</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                            <input type="tel" id="phone" name="phone"
                                class="w-full px-4 py-2 rounded-lg border border-gray-300 input-field focus:outline-none"
                                placeholder="13800138000">
                            <p class="mt-1 text-xs text-red-500 error-message hidden">请输入有效手机号</p>
                        </div>
                        
                        <div>
                            <label for="birthday" class="block text-sm font-medium text-gray-700 mb-1">出生日期</label>
                            <input type="date" id="birthday" name="birthday"
                                class="w-full px-4 py-2 rounded-lg border border-gray-300 input-field focus:outline-none">
                        </div>
                    </div>

                    <!-- 地址信息 -->
                    <div>
                        <label for="address" class="block text-sm font-medium text-gray-700 mb-1">居住地址</label>
                        <textarea id="address" name="address" rows="2"
                            class="w-full px-4 py-2 rounded-lg border border-gray-300 input-field focus:outline-none"
                            placeholder="请输入详细地址"></textarea>
                    </div>

                    <!-- 兴趣爱好 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">兴趣爱好</label>
                        <div class="flex flex-wrap gap-3">
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="hobbies" value="reading" class="rounded text-indigo-600">
                                <span class="ml-2 text-gray-700">阅读</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="hobbies" value="sports" class="rounded text-indigo-600">
                                <span class="ml-2 text-gray-700">运动</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="hobbies" value="music" class="rounded text-indigo-600">
                                <span class="ml-2 text-gray-700">音乐</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="hobbies" value="travel" class="rounded text-indigo-600">
                                <span class="ml-2 text-gray-700">旅行</span>
                            </label>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="pt-4">
                        <button type="submit"
                            class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200">
                            提交信息
                        </button>
                    </div>
                </form>
            </div>

            <!-- 数据展示区域 -->
            <div id="dataDisplay" class="mt-8 bg-white rounded-xl p-6 hidden">
                <h2 class="text-xl font-bold text-gray-800 mb-4">已提交信息</h2>
                <div id="userData" class="space-y-4"></div>
                <button id="clearData" class="mt-4 text-sm text-red-500 hover:text-red-700">清除所有数据</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('userForm');
            const dataDisplay = document.getElementById('dataDisplay');
            const userData = document.getElementById('userData');
            const clearBtn = document.getElementById('clearData');
            
            // 加载保存的数据
            loadSavedData();

            // 表单提交
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                if (validateForm()) {
                    const formData = getFormData();
                    saveData(formData);
                    displayData(formData);
                    form.reset();
                    
                    // 显示成功提示
                    showAlert('提交成功！', 'success');
                }
            });

            // 清除数据
            clearBtn.addEventListener('click', function() {
                localStorage.removeItem('userFormData');
                userData.innerHTML = '';
                dataDisplay.classList.add('hidden');
                showAlert('已清除所有数据', 'info');
            });

            // 表单验证
            function validateForm() {
                let isValid = true;
                const name = document.getElementById('name');
                const email = document.getElementById('email');
                const phone = document.getElementById('phone');
                
                // 验证姓名
                if (name.value.trim() === '') {
                    showError(name, '请输入姓名');
                    isValid = false;
                } else {
                    hideError(name);
                }
                
                // 验证邮箱
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email.value)) {
                    showError(email, '请输入有效邮箱地址');
                    isValid = false;
                } else {
                    hideError(email);
                }
                
                // 验证手机号（可选）
                if (phone.value && !/^1[3-9]\d{9}$/.test(phone.value)) {
                    showError(phone, '请输入有效手机号');
                    isValid = false;
                } else {
                    hideError(phone);
                }
                
                return isValid;
            }
            
            function showError(input, message) {
                const errorElement = input.nextElementSibling;
                errorElement.textContent = message;
                errorElement.classList.remove('hidden');
                input.classList.add('border-red-500');
            }
            
            function hideError(input) {
                const errorElement = input.nextElementSibling;
                errorElement.classList.add('hidden');
                input.classList.remove('border-red-500');
            }
            
            function getFormData() {
                const formData = {
                    name: document.getElementById('name').value,
                    gender: document.getElementById('gender').value,
                    email: document.getElementById('email').value,
                    phone: document.getElementById('phone').value,
                    birthday: document.getElementById('birthday').value,
                    address: document.getElementById('address').value,
                    hobbies: Array.from(document.querySelectorAll('input[name="hobbies"]:checked')).map(el => el.value)
                };
                return formData;
            }
            
            function saveData(data) {
                let savedData = JSON.parse(localStorage.getItem('userFormData')) || [];
                savedData.push(data);
                localStorage.setItem('userFormData', JSON.stringify(savedData));
            }
            
            function loadSavedData() {
                const savedData = JSON.parse(localStorage.getItem('userFormData'));
                if (savedData && savedData.length > 0) {
                    dataDisplay.classList.remove('hidden');
                    userData.innerHTML = savedData.map((data, index) => `
                        <div class="border-b border-gray-200 pb-4">
                            <h3 class="font-medium text-gray-800">记录 #${index + 1}</h3>
                            <p class="text-sm text-gray-600 mt-1"><span class="font-medium">姓名:</span> ${data.name || '未填写'}</p>
                            <p class="text-sm text-gray-600"><span class="font-medium">性别:</span> ${getGenderText(data.gender)}</p>
                            <p class="text-sm text-gray-600"><span class="font-medium">邮箱:</span> ${data.email || '未填写'}</p>
                            <p class="text-sm text-gray-600"><span class="font-medium">手机:</span> ${data.phone || '未填写'}</p>
                            <p class="text-sm text-gray-600"><span class="font-medium">生日:</span> ${data.birthday || '未填写'}</p>
                            <p class="text-sm text-gray-600"><span class="font-medium">地址:</span> ${data.address || '未填写'}</p>
                            <p class="text-sm text-gray-600"><span class="font-medium">爱好:</span> ${data.hobbies.length > 0 ? data.hobbies.join(', ') : '无'}</p>
                        </div>
                    `).join('');
                }
            }
            
            function displayData(data) {
                dataDisplay.classList.remove('hidden');
                const newEntry = document.createElement('div');
                newEntry.className = 'border-b border-gray-200 pb-4';
                newEntry.innerHTML = `
                    <h3 class="font-medium text-gray-800">最新记录</h3>
                    <p class="text-sm text-gray-600 mt-1"><span class="font-medium">姓名:</span> ${data.name || '未填写'}</p>
                    <p class="text-sm text-gray-600"><span class="font-medium">性别:</span> ${getGenderText(data.gender)}</p>
                    <p class="text-sm text-gray-600"><span class="font-medium">邮箱:</span> ${data.email || '未填写'}</p>
                    <p class="text-sm text-gray-600"><span class="font-medium">手机:</span> ${data.phone || '未填写'}</p>
                    <p class="text-sm text-gray-600"><span class="font-medium">生日:</span> ${data.birthday || '未填写'}</p>
                    <p class="text-sm text-gray-600"><span class="font-medium">地址:</span> ${data.address || '未填写'}</p>
                    <p class="text-sm text-gray-600"><span class="font-medium">爱好:</span> ${data.hobbies.length > 0 ? data.hobbies.join(', ') : '无'}</p>
                `;
                userData.insertBefore(newEntry, userData.firstChild);
            }
            
            function getGenderText(gender) {
                const genderMap = {
                    'male': '男',
                    'female': '女',
                    'other': '其他'
                };
                return gender ? genderMap[gender] || gender : '未填写';
            }
            
            function showAlert(message, type) {
                const alert = document.createElement('div');
                alert.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${
                    type === 'success' ? 'bg-green-500' : 'bg-blue-500'
                }`;
                alert.textContent = message;
                document.body.appendChild(alert);
                
                setTimeout(() => {
                    alert.classList.add('opacity-0', 'transition-opacity', 'duration-300');
                    setTimeout(() => alert.remove(), 300);
                }, 3000);
            }
        });
    </script>
</body>
</html>
4、效果图如下：
5、本地新建一个html文件，把代码拷贝进去，就可以本地浏览器预览效果。
上一篇： CSS技巧:box-sizing: border-box; 为什么能拯救你的布局?
下一篇：用 SpringBoot 构建轻量级日志查看器，省时又省力
网站首页 > 技术文章 正文

如何一分钟写出一个漂亮的表单页面你想知道吗?

猜你喜欢

网站首页 > 技术文章正文
