برنامه نویس های حرفه ای قدرت این را دارند که فرم های مختلف با استایل های شیک و حرفه ای طراحی کنند.
اما خب اینکار میتواند وقت گیر باشد و به جای انجام اینکار وقت برای انجام کار های دیگر گذاشت... . پس اینجاست که علم هوش مصنوعی به کار میآید.
در این مقاله میخواهیم فرم با ویژگی های مختلف با استفاده از هوش مصنوعی طراحی کنیم.
فرم ورود و ثبت نام
قابلیت های این فرم :
دارای حالت دارک مود و لایتمود با استفاده از دکمه
استایل نارنجی و زرد
دارای دو فرم ورود و ثبت نام
ورود؛ ایمیل - رمز عبور
ثبت نام؛ نام و نام خانوادگی - ایمیل - رمز عبور
دکمه مستقیم برای تغییر صفحه ( ورود - ثبت نام )
رنگ نوار فرم خاکستری
تم دارک مود پشت زمینه مشکی و دکمه ها و ایکون های نارنجی زرد
بریم برای ساخت..!
یک هوش مصنوعی انتخاب و وارد آن شوید. مانند مثال ChatGPT.Com
روی نوار سرچی که در پایین خط کشی شده است کلیک کنید.
بعد از کلیک باید محتوایی که میخواهید را تایپ و به این هوش مصنوعی بدهید.
نوشته برای فرمی که ویژگی هایش در بالا ذکر شده :
یک فرم شیک میخوام که یک دکمه بالاش داشته باشه برای تغییر صفحه ورود و ثبت نام که داخل صفحه ثبت نام 3 فرم باشه که به ترتیب گذاشته بشه.
نام و نام خانوادگی
ایمیل
رمز عبور
و در صفحه ورود هم فقط ایمیل و رمز عبور باشه.
پس زمینه فرم نارنجی و زرد باشه که یک حالت دارک مود هم داشته باشه که با یک دکمه تغییر کنه. و تم دارک مود هم پشت زمینه سیاه و سرمه ای و آیکون ها و دکمه ها نارنجی زرد باشه.
و یک دکمه کشیده برای ورود و ثبت نام که بعد از کلیک انجام بشه.
بعدش همش رو با html بساز و بهم بده.
بعد از نوشتن روی دکمه ارسال کلیک کرده و منتظر پاسخ باشید.
کد تحویلی از هوش مصنوعی :
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>فرم ورود / ثبتنام</title>
<style>
* {
box-sizing: border-box;
font-family: 'Tahoma', sans-serif;
transition: all 0.3s ease;
}
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, orange, yellow);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body.dark {
background: linear-gradient(135deg, #000, #1a1a40);
}
.container {
background-color: rgba(255, 255, 255, 0.9);
padding: 30px;
border-radius: 15px;
width: 300px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
body.dark .container {
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.toggle-mode {
background-color: black;
color: orange;
padding: 5px 10px;
border: none;
border-radius: 10px;
cursor: pointer;
position: absolute;
top: 20px;
left: 20px;
}
.toggle-form {
width: 100%;
background-color: orange;
color: white;
padding: 10px;
border: none;
border-radius: 10px;
margin-bottom: 20px;
cursor: pointer;
font-weight: bold;
}
body.dark .toggle-form {
background-color: orange;
color: black;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 8px;
}
.btn-submit {
width: 100%;
padding: 12px;
background-color: orange;
color: white;
border: none;
border-radius: 15px;
font-size: 16px;
cursor: pointer;
font-weight: bold;
}
body.dark .btn-submit {
background-color: #ffcc00;
color: black;
}
</style>
</head>
<body>
<button class="toggle-mode" ="toggleMode()">🌓 تغییر تم</button>
<div class="container">
<button class="toggle-form" ="toggleForm()">تغییر به ثبتنام</button>
<form id="loginForm">
<h2>ورود</h2>
<input type="email" placeholder="ایمیل" required />
<input type="password" placeholder="رمز عبور" required />
<button type="submit" class="btn-submit">ورود</button>
</form>
<form id="registerForm" style="display: none;">
<h2>ثبتنام</h2>
<input type="text" placeholder="نام و نام خانوادگی" required />
<input type="email" placeholder="ایمیل" required />
<input type="password" placeholder="رمز عبور" required />
<button type="submit" class="btn-submit">ثبتنام</button>
</form>
</div>
const loginForm = document.getElementById("loginForm");
const registerForm = document.getElementById("registerForm");
const toggleFormBtn = document.querySelector(".toggle-form");
let isRegister = false;
function toggleForm() {
isRegister = !isRegister;
if (isRegister) {
loginForm.style.display = "none";
registerForm.style.display = "block";
toggleFormBtn.textContent = "تغییر به ورود";
} else {
loginForm.style.display = "block";
registerForm.style.display = "none";
toggleFormBtn.textContent = "تغییر به ثبتنام";
}
}
function toggleMode() {
document.body.classList.toggle("dark");
}
// اختیاری: جلوگیری از ارسال فرم (برای تست)
loginForm.addEventListener("submit", function(e) {
e.preventDefault();
alert("ورود انجام شد");
});
registerForm.addEventListener("submit", function(e) {
e.preventDefault();
alert("ثبتنام انجام شد");
});
</body>
</html>
حالا وقت امتحان کد است.
اما خب از کجا امتحانش کنیم!؟
به دو روش میشود که ما از روش دوم استفاده میکنیم.
روش اول : اجرا در سیستم خودمان
روش دوم : استفاده از سایت های پردازش HTML
مانند وبسایت W3Schools که در پایین تماشا میکنید.
روی قسمت سمت چپ کلیک و کد را آنجا پیست کرده.
روی دکمه Run کلیک کرده تا کد برای شما نمایش داده شود.
فرم تحویلی توسط هوش مصنوعی :
شاید از نظر شما این فرم خیلی ساده باشد اما خب میتوانیم پیشرفته تر کنیم!
اما چطوری!؟
خیلی راحت نکات را بهتر به ChatGPT توضیح میدهیم.
متن را دوباره برای ChatGPT ارسال میکنیم :
عالیه! فقط فونت وزیر داخلش استفاده کن و کمی اندازش رو بیشتر کن. دکمه تغییر تم، ایموجی بغلش رو بردار و خود دکمه رو داخل از فرم بزار. یک پشت زمینه شیکی هم به خود بخشی که دکمه و فرم و... قراردارد بده.
بعد از ارسال منتظر باشید تا کد را به شما بدهد
فرم تحویلی و بهینه شده توسط هوش مصنوعی
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>فرم ورود / ثبتنام</title>
<link href="https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css" rel="stylesheet" />
<style>
* {
box-sizing: border-box;
font-family: 'Vazir', sans-serif;
transition: all 0.3s ease;
}
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, orange, yellow);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body.dark {
background: linear-gradient(135deg, #000, #1a1a40);
}
.container {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 240, 200, 0.9));
padding: 40px 30px;
border-radius: 20px;
width: 350px;
box-shadow: 0 0 20px rgba(0,0,0,0.25);
position: relative;
}
body.dark .container {
background: linear-gradient(145deg, rgba(20, 20, 40, 0.9), rgba(0, 0, 0, 0.9));
color: white;
}
h2 {
text-align: center;
margin-bottom: 25px;
}
.toggle-mode {
background-color: black;
color: orange;
padding: 6px 14px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
margin-bottom: 15px;
display: block;
width: 100%;
}
.toggle-form {
width: 100%;
background-color: orange;
color: white;
padding: 10px;
border: none;
border-radius: 10px;
margin-bottom: 20px;
cursor: pointer;
font-weight: bold;
}
body.dark .toggle-form {
background-color: orange;
color: black;
}
input {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 10px;
font-size: 15px;
}
.btn-submit {
width: 100%;
padding: 14px;
background-color: orange;
color: white;
border: none;
border-radius: 20px;
font-size: 16px;
cursor: pointer;
font-weight: bold;
margin-top: 10px;
}
body.dark .btn-submit {
background-color: #ffcc00;
color: black;
}
</style>
</head>
<body>
<div class="container">
<button class="toggle-mode" ="toggleMode()">تغییر تم</button>
<button class="toggle-form" ="toggleForm()">تغییر به ثبتنام</button>
<form id="loginForm">
<h2>ورود</h2>
<input type="email" placeholder="ایمیل" required />
<input type="password" placeholder="رمز عبور" required />
<button type="submit" class="btn-submit">ورود</button>
</form>
<form id="registerForm" style="display: none;">
<h2>ثبتنام</h2>
<input type="text" placeholder="نام و نام خانوادگی" required />
<input type="email" placeholder="ایمیل" required />
<input type="password" placeholder="رمز عبور" required />
<button type="submit" class="btn-submit">ثبتنام</button>
</form>
</div>
const loginForm = document.getElementById("loginForm");
const registerForm = document.getElementById("registerForm");
const toggleFormBtn = document.querySelector(".toggle-form");
let isRegister = false;
function toggleForm() {
isRegister = !isRegister;
if (isRegister) {
loginForm.style.display = "none";
registerForm.style.display = "block";
toggleFormBtn.textContent = "تغییر به ورود";
} else {
loginForm.style.display = "block";
registerForm.style.display = "none";
toggleFormBtn.textContent = "تغییر به ثبتنام";
}
}
function toggleMode() {
document.body.classList.toggle("dark");
}
loginForm.addEventListener("submit", function(e) {
e.preventDefault();
alert("ورود انجام شد");
});
registerForm.addEventListener("submit", function(e) {
e.preventDefault();
alert("ثبتنام انجام شد");
});
</body>
</html>
حالا باید این رو دوباره اجرا کنیم!
آنچه که به ما تحویل داد :
میتوانیم نکات دیگری را هم بگوییم مانند این که انیمیشن دار شود و هزاران چیز دیگر.
(قسمت دوم بزودی... .)
