آموزش کامل فرم های در اچ تی ام ال یا html - قسمت دوازدهم آموزش برنامه نویسی وب🌐

در این قسمت از سری آموزشی برنامه نویسی وب در وبلاگ آزادی تمامی مباحث مربوط به فرم ها در وب مورد پوشش قرار خواهند گرفت.

فرم چیست؟

یک فرم در اچ تی ام ال برای جمع آوری اطلاعات از کاربران یک وبسایت استفاده میشود مثل فرم ثبت نام

ساختار فرم

فرم ها در اچ تی ام ال با استفاده از تگ form ایجاد میشود. و درون این تگ، تگ های فرم نوشته میشود.

فرم ثبت نام دارای فیلد های نام و نام خانوادگی


<form action="/file.php">
  <label for="fname">نام :</label><br>
  <input type="text" id="fname" name="fname" value="کوروش"><br>
  <label for="lname">نام خانوادگی:</label><br>
  <input type="text" id="lname" name="lname" value="یغمایی"><br><br>
  <input type="submit" value="ثبت نام">
</form>

با استفاده از تگ input در تگ فرم میتوانیم یک ورودی از کاربر بگیریم. تگ input نوع های بیشتری دارد مثل color, password, email که هر کدام برای دریافت نوعی از اطلاعات است.

صفات فرم

صفت action فرم

صفت action در فرم HTML مشخص می‌کند که داده‌های فرم پس از ارسال به کدام آدرس (URL) ارسال شوند. این صفت معمولاً به یک اسکریپت سرور یا صفحه‌ای اشاره دارد که داده‌های فرم را پردازش می‌کند.


<form action="submit_form.php" method="post">
    <label for="name">نام:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="ارسال">
</form>

در این مثال، داده‌های فرم به فایل submit_form.php ارسال می‌شوند.

صفت method فرم

صفت method در فرم HTML مشخص می‌کند که داده‌های فرم چگونه به سرور ارسال شوند. دو روش اصلی وجود دارد: GET و POST.

GET: داده‌ها به صورت پارامترهای URL ارسال می‌شوند و برای درخواست‌های غیرحساس مناسب است. این روش می‌تواند برای سئو مفید باشد زیرا URL شامل اطلاعات جستجو است و می‌تواند ایندکس شود.
POST: داده‌ها در بدنه درخواست ارسال می‌شوند و برای ارسال اطلاعات حساس یا بزرگتر مناسب‌تر است. این روش معمولاً برای فرم‌هایی که تغییرات در پایگاه داده ایجاد می‌کنند، استفاده می‌شود.

مثال:


<form action="search.php" method="get">
    <label for="query">جستجو:</label>
    <input type="text" id="query" name="query">
    <input type="submit" value="جستجو">
</form>

صفت autocomplete فرم

صفت autocomplete در فرم HTML مشخص می‌کند که آیا مرورگر باید به طور خودکار مقادیر قبلاً وارد شده را برای فیلدهای فرم پیشنهاد دهد یا خیر. این صفت می‌تواند به بهبود تجربه کاربری کمک کند و زمان پر کردن فرم‌ها را کاهش دهد.

مقدارهای ممکن برای این صفت عبارتند از:

on: مرورگر به طور خودکار مقادیر را پیشنهاد می‌دهد.
off: مرورگر پیشنهادات را غیرفعال می‌کند.

مثال:


<form action="submit.php" method="post">
    <label for="email">ایمیل:</label>
    <input type="email" id="email" name="email" autocomplete="on">
    <input type="submit" value="ارسال">
</form>

در این مثال، صفت autocomplete برای فیلد ایمیل فعال شده است، بنابراین مرورگر می‌تواند مقادیر قبلاً وارد شده را پیشنهاد دهد.

صفت novalidate فرم

صفت novalidate در فرم HTML به مرورگر می‌گوید که هنگام ارسال فرم، اعتبارسنجی پیش‌فرض فیلدها را نادیده بگیرد. این صفت معمولاً زمانی استفاده می‌شود که شما می‌خواهید خودتان اعتبارسنجی را با استفاده از جاوااسکریپت یا روش‌های دیگر انجام دهید.

استفاده از این صفت می‌تواند به شما این امکان را بدهد که کنترل بیشتری بر روی نحوه پردازش داده‌های فرم داشته باشید.

مثال:


<form action="submit.php" method="post" novalidate>
    <label for="username">نام کاربری:</label>
    <input type="text" id="username" name="username" required>
    <input type="submit" value="ارسال">
</form>

در این مثال، با وجود اینکه فیلد نام کاربری به عنوان required مشخص شده است، اما به دلیل وجود صفت novalidate، مرورگر اعتبارسنجی پیش‌فرض را نادیده می‌گیرد و فرم می‌تواند بدون بررسی اعتبار ارسال شود.

صفت enctype فرم

صفت enctype در فرم HTML مشخص می‌کند که داده‌های فرم چگونه باید هنگام ارسال به سرور کدگذاری شوند. این صفت به ویژه در فرم‌هایی که شامل فایل‌های بارگذاری شده هستند، اهمیت دارد. مقادیر مختلفی برای این صفت وجود دارد:

application/x-www-form-urlencoded: این مقدار پیش‌فرض است و داده‌ها به صورت URL-encoded ارسال می‌شوند.
multipart/form-data: این مقدار برای ارسال فایل‌ها استفاده می‌شود و به مرورگر اجازه می‌دهد تا داده‌ها را به بخش‌های مختلف تقسیم کند.
text/plain: داده‌ها به صورت متن ساده ارسال می‌شوند، اما این روش معمولاً توصیه نمی‌شود.

مثال:


<form action="upload.php" method="post" enctype="multipart/form-data">
    <label for="file">بارگذاری فایل:</label>
    <input type="file" id="file" name="file">
    <input type="submit" value="ارسال">
</form>

در این مثال، صفت enctype به multipart/form-data تنظیم شده است تا امکان بارگذاری فایل به سرور فراهم شود.

صفت name فرم

صفت name در فرم HTML به خود فرم یک نام منحصر به فرد می‌دهد. این نام به شما این امکان را می‌دهد که فرم را در جاوااسکریپت یا CSS شناسایی کنید و با آن کار کنید. همچنین، در برخی از موارد، نام فرم می‌تواند به عنوان کلید برای ارسال داده‌ها به سرور استفاده شود.

استفاده از صفت name برای فرم به ویژه زمانی مفید است که شما چندین فرم در یک صفحه دارید و می‌خواهید به راحتی آنها را شناسایی کنید.

مثال:


<form name="loginForm" action="login.php" method="post">
    <label for="username">نام کاربری:</label>
    <input type="text" id="username" name="username">
    
    <label for="password">گذرواژه:</label>
    <input type="password" id="password" name="password">
    
    <input type="submit" value="ورود">
</form>

در این مثال، فرم دارای صفت name با مقدار loginForm است. این نام می‌تواند در جاوااسکریپت برای دسترسی به فرم و انجام عملیات مختلف استفاده شود.

تگ های فرم

تگ‌های فرم در HTML برای ایجاد فرم‌های تعاملی استفاده می‌شوند که به کاربران اجازه می‌دهند داده‌ها را وارد کرده و به سرور ارسال کنند. در زیر برخی از مهم‌ترین تگ‌های فرم آورده شده است:

تگ input در فرم

تگ <input> می‌تواند انواع مختلفی از ورودی‌ها را با استفاده از صفت type ایجاد کند. در زیر به برخی از انواع رایج اینپوت‌ها و مثال‌های مربوط به هر کدام اشاره شده است:

1. نوع Text

فیلد ورودی متنی برای وارد کردن متن ساده.


<input type="text" name="username" placeholder="نام کاربری">

2. نوع Password

فیلدی برای وارد کردن گذرواژه که متن را مخفی می‌کند.


<input type="password" name="password" placeholder="گذرواژه">

3. نوع Email

فیلدی برای وارد کردن آدرس ایمیل که اعتبارسنجی اولیه را انجام می‌دهد.


<input type="email" name="email" placeholder="ایمیل">

4. نوع Number

فیلدی برای وارد کردن عدد که می‌تواند محدودیت‌هایی مانند حداقل و حداکثر را داشته باشد.


<input type="number" name="age" min="1" max="100" placeholder="سن">

5. نوع Checkbox

فیلدی برای انتخاب گزینه‌ها که می‌تواند چندین گزینه را به صورت همزمان انتخاب کند.


<input type="checkbox" name="subscribe" value="yes"> اشتراک در خبرنامه

6. نوع Radio

فیلدی برای انتخاب یک گزینه از بین چند گزینه. تنها یک گزینه از یک گروه می‌تواند انتخاب شود.


<input type="radio" name="gender" value="male"> مرد
<input type="radio" name="gender" value="female"> زن

7. نوع File

فیلدی برای بارگذاری فایل‌ها.


<input type="file" name="profile_picture">

8. نوع Date

فیلدی برای انتخاب تاریخ که به کاربر اجازه می‌دهد تاریخ را از یک تقویم انتخاب کند.


<input type="date" name="birthdate">

9. نوع Color

فیلدی برای انتخاب رنگ که به کاربر اجازه می‌دهد رنگ مورد نظر را انتخاب کند.


<input type="color" name="favorite_color">

10. نوع Range

فیلدی برای انتخاب یک مقدار از یک محدوده با استفاده از نوار لغزنده.


<input type="range" name="volume" min="0" max="100">

این انواع مختلف <input> به شما این امکان را می‌دهند که فرم‌های تعاملی و متنوعی ایجاد کنید که به نیازهای مختلف کاربران پاسخ دهند.

تگ label در فرم

تگ <label> برای ایجاد برچسب برای فیلدهای ورودی استفاده می‌شود. این تگ به کاربران کمک می‌کند تا بفهمند هر فیلد برای چه اطلاعاتی است. با استفاده از صفت for، می‌توان برچسب را به یک فیلد ورودی خاص متصل کرد.

مثال:


<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username">

تگ select در فرم

تگ <select> برای ایجاد منوهای کشویی استفاده می‌شود که به کاربران اجازه می‌دهد از بین گزینه‌های مختلف یکی را انتخاب کنند. هر گزینه درون تگ <option> قرار می‌گیرد.

مثال:


<label for="country">کشور:</label>
<select id="country" name="country">
    <option value="iran">ایران</option>
    <option value="usa">آمریکا</option>
    <option value="uk">انگلستان</option>
</select>

تگ optgroup در فرم

تگ <optgroup> برای گروه‌بندی گزینه‌های مختلف در یک منوی کشویی (<select>) استفاده می‌شود. این تگ به کاربران کمک می‌کند تا گزینه‌ها را به صورت منظم‌تر و قابل فهم‌تر مشاهده کنند.

مثال:


<label for="fruits">میوه‌ها:</label>
<select id="fruits" name="fruits">
    <optgroup label="میوه‌های تابستانی">
        <option value="watermelon">هندوانه</option>
        <option value="peach">هلو</option>
    </optgroup>
    <optgroup label="میوه‌های زمستانی">
        <option value="orange">پرتقال</option>
        <option value="apple">سیب</option>
    </optgroup>
</select>

تگ option در فرم

تگ <option> برای تعریف گزینه‌های مختلف در یک منوی کشویی (<select>) یا در یک گروه گزینه (<optgroup>) استفاده می‌شود. هر گزینه می‌تواند دارای یک مقدار و متنی باشد که به کاربر نمایش داده می‌شود.

مثال:


<label for="colors">رنگ‌ها:</label>
<select id="colors" name="colors">
    <option value="red">قرمز</option>
    <option value="green">سبز</option>
    <option value="blue">آبی</option>
</select>

تگ textarea در فرم

تگ <textarea> برای ایجاد فیلدهای متنی چند خطی استفاده می‌شود که به کاربران اجازه می‌دهد متن طولانی‌تری را وارد کنند. این تگ می‌تواند دارای صفت‌هایی مانند rows و cols باشد که تعداد ردیف‌ها و ستون‌های فیلد را مشخص می‌کند.

مثال:


<label for="message">پیام:</label>
<textarea id="message" name="message" rows="4" cols="50">متن خود را اینجا وارد کنید...</textarea>

تگ button در فرم

تگ <button> برای ایجاد دکمه‌های قابل کلیک در فرم استفاده می‌شود. این دکمه‌ها می‌توانند برای ارسال فرم یا انجام عملیات دیگر استفاده شوند. دکمه‌ها می‌توانند دارای متن یا تصویر باشند و می‌توانند با استفاده از صفت type مشخص کنند که چه نوع دکمه‌ای هستند (مانند submit، reset یا button).

مثال:


<button type="submit">ارسال</button>
<button type="reset">تنظیم مجدد</button>

تگ fieldset در فرم

تگ <fieldset> برای گروه‌بندی عناصر فرم استفاده می‌شود. این تگ به شما این امکان را می‌دهد که عناصر مرتبط را در یک بخش مشخص قرار دهید و به کاربران کمک می‌کند تا فرم را بهتر درک کنند.

مثال:


<fieldset>
    <legend>اطلاعات شخصی</legend>
    <label for="name">نام:</label>
    <input type="text" id="name" name="name">
    <label for="email">ایمیل:</label>
    <input type="email" id="email" name="email">
</fieldset>

تگ legend در فرم

تگ <legend> برای ایجاد عنوان برای یک fieldset استفاده می‌شود. این تگ به کاربران کمک می‌کند تا بفهمند که گروه‌بندی شده چه اطلاعاتی را شامل می‌شود.

مثال:


<fieldset>
    <legend>اطلاعات تماس</legend>
    <label for="phone">شماره تلفن:</label>
    <input type="tel" id="phone" name="phone">
</fieldset>

تگ datalist در فرم

تگ <datalist> برای ارائه لیستی از گزینه‌های پیشنهادی برای یک فیلد ورودی استفاده می‌شود. این تگ به کاربران اجازه می‌دهد تا از بین گزینه‌های موجود انتخاب کنند یا متن خود را وارد کنند.

مثال:


<label for="browsers">مرورگرها:</label>
<input list="browsers" name="browser" id="browsers">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

تگ output در فرم

تگ <output> برای نمایش نتایج محاسبات یا خروجی‌های دیگر در فرم استفاده می‌شود. این تگ به شما این امکان را می‌دهد که نتایج را به صورت دینامیک به کاربران نمایش دهید.

مثال:


<form>
    <label for="a">عدد اول:</label>
    <input type="number" id="a" value="0">
    <label for="b">عدد دوم:</label>
    <input type="number" id="b" value="0">
    <output name="result" for="a b">0</output>
</form>

انواع input ها

تگ <input> در HTML می‌تواند انواع مختلفی از ورودی‌ها را ایجاد کند. در اینجا به بررسی انواع مختلف input و کاربردهای آن‌ها می‌پردازیم:

نوع button در input

این نوع برای ایجاد دکمه‌های قابل کلیک استفاده می‌شود.


<input type="button" value="کلیک کنید">

نوع checkbox در input

این نوع برای انتخاب گزینه‌ها به صورت چندگانه استفاده می‌شود.


<input type="checkbox" name="subscribe" value="yes"> اشتراک در خبرنامه

نوع color در input

این نوع برای انتخاب رنگ استفاده می‌شود.


<input type="color" name="favorite_color">

نوع date در input

این نوع برای انتخاب تاریخ استفاده می‌شود.


<input type="date" name="birthdate">

نوع datetime-local در input

این نوع برای انتخاب تاریخ و زمان محلی استفاده می‌شود.


<input type="datetime-local" name="event">

نوع email در input

این نوع برای وارد کردن آدرس ایمیل و اعتبارسنجی آن استفاده می‌شود.


<input type="email" name="email" placeholder="ایمیل">

نوع file در input

این نوع برای بارگذاری فایل‌ها استفاده می‌شود.


<input type="file" name="profile_picture">

نوع hidden در input

این نوع برای ذخیره اطلاعاتی است که کاربر نمی‌تواند آن را ببیند.


<input type="hidden" name="user_id" value="12345">

نوع image در input

این نوع برای ایجاد دکمه‌ای با تصویر استفاده می‌شود.


<input type="image" src="submit.png" alt="ارسال">

نوع month در input

این نوع برای انتخاب ماه و سال استفاده می‌شود.


<input type="month" name="month">

نوع number در input

این نوع برای وارد کردن عدد و محدودیت‌های آن استفاده می‌شود.


<input type="number" name="age" min="1" max="100">

نوع password در input

این نوع برای وارد کردن گذرواژه و مخفی کردن آن استفاده می‌شود.


<input type="password" name="password" placeholder="گذرواژه">

نوع radio در input

این نوع برای انتخاب یک گزینه از بین چند گزینه استفاده می‌شود.


<input type="radio" name="gender" value="male"> مرد
<input type="radio" name="gender" value="female"> زن

نوع range در input

این نوع برای انتخاب یک مقدار از یک محدوده با استفاده از نوار لغزنده استفاده می‌شود.


<input type="range" name="volume" min="0" max="100">

نوع reset در input

این نوع برای ایجاد دکمه‌ای برای تنظیم مجدد فرم استفاده می‌شود.


<input type="reset" value="تنظیم مجدد">

نوع search در input

این نوع برای ایجاد فیلدی برای جستجو استفاده می‌شود.


<input type="search" name="query" placeholder="جستجو... ">

نوع submit در input

این نوع برای ایجاد دکمه‌ای برای ارسال فرم استفاده می‌شود.


<input type="submit" value="ارسال">

نوع tel در input

این نوع برای وارد کردن شماره تلفن استفاده می‌شود و می‌تواند شامل اعتبارسنجی اولیه برای فرمت شماره تلفن باشد.


<input type="tel" name="phone" placeholder="شماره تلفن">

نوع text در input

این نوع برای ایجاد فیلد ورودی متنی استفاده می‌شود که به کاربران اجازه می‌دهد متن ساده‌ای را وارد کنند.


<input type="text" name="username" placeholder="نام کاربری">

نوع time در input

این نوع برای انتخاب زمان (ساعت و دقیقه) استفاده می‌شود.


<input type="time" name="appointment">

نوع url در input

این نوع برای وارد کردن آدرس وب‌سایت استفاده می‌شود و اعتبارسنجی اولیه برای فرمت URL را انجام می‌دهد.


<input type="url" name="website" placeholder="آدرس وب‌سایت">

نوع week در input

این نوع برای انتخاب یک هفته خاص (شامل سال و شماره هفته) استفاده می‌شود.


<input type="week" name="week">

صفات input ها

تگ <input> در HTML می‌تواند شامل صفات مختلفی باشد که به شما این امکان را می‌دهد تا رفتار و ویژگی‌های فیلدهای ورودی را کنترل کنید. در اینجا به بررسی برخی از صفات مهم input می‌پردازیم:

صفت value

صفت value برای تعیین مقدار پیش‌فرض فیلد ورودی استفاده می‌شود. این مقدار می‌تواند به صورت متنی یا عددی باشد.


<input type="text" name="username" value="نام کاربری">

صفت readonly

صفت readonly به فیلد ورودی اجازه می‌دهد که فقط خواندنی باشد و کاربر نتواند مقدار آن را تغییر دهد، اما می‌تواند آن را کپی کند.


<input type="text" name="email" value="example@example.com" readonly>

صفت disabled

صفت disabled فیلد ورودی را غیرفعال می‌کند، به طوری که کاربر نمی‌تواند به آن دسترسی داشته باشد یا مقداری وارد کند.


<input type="text" name="phone" value="123-456-7890" disabled>

صفت size

صفت size برای تعیین عرض فیلد ورودی به تعداد کاراکترها استفاده می‌شود. این صفت فقط بر روی فیلدهای متنی و عددی تأثیر دارد.


<input type="text" name="username" size="30">

صفت maxlength

صفت maxlength برای تعیین حداکثر تعداد کاراکترهایی که کاربر می‌تواند در فیلد ورودی وارد کند، استفاده می‌شود.


<input type="text" name="password" maxlength="20">

صفت min-max

صفات min و max برای تعیین حداقل و حداکثر مقادیر مجاز در فیلدهای ورودی عددی و تاریخ استفاده می‌شوند.


<input type="number" name="age" min="1" max="100">

صفت multiple

صفت multiple به کاربر اجازه می‌دهد تا چندین فایل را به طور همزمان بارگذاری کند یا چندین گزینه را از یک منوی کشویی انتخاب کند.


<input type="file" name="files" multiple>

صفت pattern

صفت pattern برای تعیین یک الگوی خاص برای ورودی استفاده می‌شود. این الگو با استفاده از عبارات منظم (regex) تعریف می‌شود.


<input type="text" name="username" pattern="[A-Za-z]{3,}" title="حداقل 3 حرف">

صفت placeholder

صفت placeholder برای نمایش یک متن راهنما در فیلد ورودی استفاده می‌شود که به کاربر نشان می‌دهد چه نوع اطلاعاتی باید وارد کند.


<input type="text" name="email" placeholder="ایمیل خود را وارد کنید">

صفت required

صفت required به فیلد ورودی این امکان را می‌دهد که الزامی باشد و کاربر باید مقداری را وارد کند تا فرم ارسال شود.


<input type="text" name="username" required>

صفت step

صفت step برای تعیین گام‌های مجاز در فیلدهای عددی استفاده می‌شود. این صفت مشخص می‌کند که کاربر می‌تواند چه مقادیری را وارد کند.


<input type="number" name="quantity" min="1" step="2">

صفت autofocus

صفت autofocus به فیلد ورودی این امکان را می‌دهد که به طور خودکار در زمان بارگذاری صفحه فوکوس شود.


<input type="text" name="search" autofocus>

صفت height-width

صفات height و width برای تعیین ابعاد فیلدهای ورودی استفاده می‌شوند. این صفات معمولاً برای فیلدهای متنی و <textarea> کاربرد دارند.


<textarea name="message" rows="4" cols="50"></textarea>

صفت list

صفت list برای اتصال یک فیلد ورودی به یک <datalist> استفاده می‌شود که به کاربر گزینه‌های پیشنهادی را نمایش می‌دهد.


<input type="text" name="browser" list="browsers">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>

صفت autocomplete

صفت autocomplete مشخص می‌کند که آیا مرورگر باید به طور خودکار مقادیر قبلاً وارد شده را برای فیلدهای ورودی پیشنهاد دهد یا خیر.


<input type="text" name="username" autocomplete="on">

صفات input ها در فرم

تگ <input> می‌تواند شامل صفات مختلفی باشد که به شما این امکان را می‌دهد تا رفتار و ویژگی‌های فیلدهای ورودی را کنترل کنید. در اینجا به بررسی برخی از صفات مهم input در فرم می‌پردازیم:

صفت form

صفت form به شما این امکان را می‌دهد که یک فیلد ورودی را به یک فرم خاص متصل کنید. این صفت به ویژه زمانی مفید است که فیلد ورودی خارج از تگ <form> قرار دارد.


<form id="myForm">
    <input type="text" name="username">
</form>
<input type="submit" form="myForm" value="ارسال">

صفت formaction

صفت formaction مشخص می‌کند که داده‌های فرم به کدام URL ارسال شوند. این صفت می‌تواند در تگ <input type="submit"> یا <button> استفاده شود.


<input type="submit" formaction="submit.php" value="ارسال">

صفت formenctype

صفت formenctype مشخص می‌کند که داده‌های فرم چگونه باید کدگذاری شوند. این صفت معمولاً برای بارگذاری فایل‌ها استفاده می‌شود.


<input type="file" name="file" formenctype="multipart/form-data">

صفت formmethod

صفت formmethod مشخص می‌کند که داده‌های فرم با کدام روش (GET یا POST) ارسال شوند.


<input type="submit" formmethod="post" value="ارسال">

صفت formtarget

صفت formtarget مشخص می‌کند که نتیجه ارسال فرم در کدام پنجره یا تب باز شود. می‌تواند مقادیری مانند _blank، _self، _parent یا _top داشته باشد.


<input type="submit" formtarget="_blank" value="ارسال">

صفت formnovalidate

صفت formnovalidate به مرورگر می‌گوید که اعتبارسنجی پیش‌فرض فیلدها را نادیده بگیرد و فرم را بدون بررسی اعتبار ارسال کند.


<input type="submit" formnovalidate value="ارسال بدون اعتبارسنجی">

صفت novalidate

صفت novalidate در تگ <form> به مرورگر می‌گوید که اعتبارسنجی پیش‌فرض فیلدها را نادیده بگیرد و فرم را بدون بررسی اعتبار ارسال کند.


<form novalidate>
    <input type="text" name="username" required>
    <input type="submit" value="ارسال">
</form>

فرم کامل بهمراه CSS


<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فرم کامل</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
direction: rtl;
text-align: right;
        }
        .container {
            max-width: 600px;
            margin: auto;
            background: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h2 {
            text-align: center;
            color: #333;
        }
        label {
            display: block;
            margin: 10px 0 5px;
            color: #555;
direction: rtl;
text-align: right;
        }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="tel"],
        input[type="url"],
        textarea,
        select {
            width: 100%;
            padding: 10px;
            margin: 5px 0 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        input[type="submit"],
        input[type="reset"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }
        input[type="submit"]:hover,
        input[type="reset"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>فرم ثبت نام</h2>
    <form action="submit.php" method="post">
        <label for="username">نام کاربری:</label>
        <input type="text" id="username" name="username" required>

        <label for="email">ایمیل:</label>
        <input type="email" id="email" name="email" required>

        <label for="password">گذرواژه:</label>
        <input type="password" id="password" name="password" required>

        <label for="phone">شماره تلفن:</label>
        <input type="tel" id="phone" name="phone" required>

        <label for="age">سن:</label>
        <input type="number" id="age" name="age" min="1" max="100" required>

        <label for="country">کشور:</label>
        <select id="country" name="country">
            <option value="iran">ایران</option>
            <option value="usa">آمریکا</option>
            <option value="uk">انگلستان</option>
        </select>

        <label for="message">پیام:</label>
        <textarea id="message" name="message" rows="4" placeholder="پیام خود را اینجا وارد کنید... "></textarea>

        <input type="submit" value="ارسال" style="margin-bottom: 1em" >
        <input type="reset" value="تنظیم مجدد">
    </form>
</div>

</body>
</html>

پایان