如何一分钟写出一个漂亮的表单页面你想知道吗?
haoteby 2025-09-18 19:12 2 浏览
一分钟就能生成一个表单页面，以下是具体的步骤：
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文件，把代码拷贝进去，就可以本地浏览器预览效果。
相关推荐
- 如何随时清理浏览器缓存_清理浏览器缓存怎么弄
-
想随时清理浏览器缓存吗？Cookieformac版是Macos上一款浏览器缓存清理工具，所有的浏览器Cookie，本地存储数据，HTML5数据库，FlashCookie，Silverlight，...
- Luminati代理动态IP教程指南配置代理VMLogin中文版反指纹浏览器
-
介绍如何使用在VMLogin中文版设置Luminati代理。首先下载VMLogin中文版反指纹浏览器（https://cn.vmlogin.com）对于刚接触Luminati动态ip的朋友，是不是不懂...
- mac清除工具分享，解除您在安全方面的后顾之忧
-
想要永久的安全的处理掉重要数据，删除是之一，使用今天小编分享的mac清除工具，为您的操作再增一层“保护”，小伙伴慎用哟，一旦使用就不可以恢复咯，来吧一起看看吧~mac清除工具分享，解除您在安全方面的后...
- 取代cookie的网站追踪技术:”帆布指纹识别”
-
【前言】一般情况下，网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体，这样可以通过收集这些个体的数据，通过分析后更加精准的去推送广告（精准化营销）或其他有针对性的一些活动。Co...
- 辅助上网为啥会被抛弃 曲奇(Cookie)虽甜但有毒
-
近期有个小新闻，大概很多小伙伴都没有注意到，那就是谷歌Chrome浏览器要弃用Cookie了！说到Cookie功能，很多小伙伴大概觉得不怎么熟悉，有可能还不如前一段时间被弃用的Flash“出名”，但它...
- 浏览器指纹是什么?浏览器指纹包括哪些信息
-
本文关键词：浏览器指纹、指纹浏览器、浏览器指纹信息、指纹浏览器原理什么是浏览器指纹？浏览器指纹是指浏览器的各种信息，当我们访问其他网站时，即使是在匿名的模式下，这些信息也可以帮助网站识别我们的身份。...
- 那些通用清除软件不曾注意的秘密_清理不常用的应用软件
-
系统清理就像卫生检查前的大扫除，即使你使出吃奶的劲儿把一切可能的地方都打扫过，还会留下边边角角的遗漏。随着大家电脑安全意识的提高，越来越多的朋友开始关注自己的电脑安全，也知道安装360系列软件来"武装...
- 「网络安全宣传周」这些安全上网小知识你要知道!
-
小布说：互联网改变了人们的衣食住行，但与之伴生的网络安全威胁也不容忽视。近些年来，风靡全球的勒索病毒、时有发生的电信诈骗、防不胜防的个人信息泄露时时刻刻都威胁着我们的生活。9月18日-24日是第四届...
- TypeScript 终极初学者指南_typescript 进阶
-
在过去的几年里TypeScript变得越来越流行，现在许多工作都要求开发人员了解TypeScript...
- jQuery知识一览_jquery的认识和使用
-
一、概览jQuery官网：https://jquery.com/jQuery是一个高效、轻量并且功能丰富的js库。核心在于查询query。...
- 我的第一个Electron应用_electronmy
-
hello，好久不见，最近笔者花了几天时间入门Electron，然后做了一个非常简单的应用，本文就来给各位分享一下过程，Electron大佬请随意~笔者开源了一个Web思维导图，虽然借助showSav...
- HTML5 之拖放(Drag 和 Drop)_html拖放api
-
简介拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。先点击一个小例子：在用户开始拖动<p>元素时执行JavaScrip...
- 如何用JavaScript判断输入值是数字还是字母?
-
在日常开发中，我们有时候需要判断用户输入的是数字还是字母。本文将介绍如何用JavaScript实现这一功能。检查输入值是否是数字或字母...
- 图形编辑器开发:快捷键的管理_图形编辑工具
-
大家好，我是前端西瓜哥。...
- 浏览器原生剪贴板:原来它能这样读取用户截图!
-
当我们使用GitHub时，会发现Ctrl+V就能直接读取用户剪贴板图片进行粘贴，那么它是如何工作的？安全性如何？...