ورودی چند خطی Html. فیلدهای متنی

نتیجه:

نامه نگاری

همه عناصر فرم را می توان با استفاده از عنصر به برچسب های آنها پیوند داد و پارامتر آن for است که مقدار آن نام عنصری است که عنوان را با آن مرتبط می کنیم. مثلا:

نتیجه:

وضعیت شغلی

مطابق با گزینه، یک فرم برای ورود اطلاعات ایجاد کنید. صفحه باید حاوی عناصر بصری زیر باشد:

1. سرفصل;

2. متنی که هدف فرم را توضیح می دهد.

3. فرم ورود اطلاعات، مطابق با گزینه. انواع عناصر را برای ورود داده ها خودتان انتخاب کنید (حداقل 3 مورد مختلف).

4. حفاری - " ارسال», « پاک کردن»;

5. اطلاعات در مورد سازنده صفحه - نام و نام خانوادگی, گروه, پست الکترونیک.

شکل 1 - نمای تقریبی صفحه

دکمه را به هر فیلد فرم اضافه کنید. توضیح"، وقتی روی آن کلیک می کنید که پنجره ای با اطلاعات توضیحی و یا یک تصویر باز می شود، دکمه" بستن».

وقتی روی " ارسال"، داده های فرم برای پر شدن صحیح بررسی می شود - همه فیلدها پر می شوند، فیلدهای عددیحاوی مقادیر مجاز، فضاهای پیشرو و انتهایی حذف می شوند. در صورتی که داده های یک یا چند فیلد مطابقت نداشته باشند، باید پنجره ای نمایش داده شود که در آن نام و متن کوتاهی که الزامات داده های وارد شده در فیلد را توضیح می دهد، نشان داده شود. اگر داده ها به درستی وارد شوند، داده ها پس از تایید در کادر محاوره ای ارسال می شوند. دو فیلد مخفی را روی فرم قرار دهید با تاریخ فعلیو زمان که به سرور نیز منتقل می شوند. نمای تقریبی فرم:

شکل 2 - نمای تقریبی فرم ورود اطلاعات

جدول 1 - انواع فرم های ورود داده ها

کنترل سوالات

1. برچسبی که باید ایجاد شود را شرح دهید جعبه متن... نحو آن را بدهید.

2. یک برچسب برای ایجاد کادر متنی برای وارد کردن رمز عبور توضیح دهید. نحو آن را بدهید.

3. برچسب ایجاد چک باکس را شرح دهید. نحو آن را بدهید.

4. برچسب ایجاد دکمه ها را شرح دهید. نحو آن را بدهید.

5. برچسب ایجاد فیلد انتخاب فایل را شرح دهید. نحو آن را بدهید.

6. یک برچسب برای ایجاد یک کادر متنی چند خطی توضیح دهید. نحو آن را بدهید.

7. برچسب ایجاد لیست کشویی را شرح دهید. نحو آن را بدهید.

معلم Stishenok E.O.

فربروف A.G.

فیلد ورودی متن چند خطی به شما امکان می دهد نه یک خط، بلکه چندین خط را همزمان ارسال کنید. به طور پیش فرض، تگ یک فیلد خالی ایجاد می کند که 20 کاراکتر عرض دارد و از دو خط تشکیل شده است.

متن

فیلد ورودی متن چندخطی با برچسب جفت شده شروع می شود ... تگ نام نام را مشخص می کند فیلد چند خطی... شما همچنین می توانید عرض فیلد را مشخص کنید ( cols) و تعداد خطوط ( ردیف ها). در صورت لزوم، می توانید ویژگی readonly را مشخص کنید که ویرایش، حذف و تغییر متن را ممنوع می کند. متن فقط خواندنی خواهد بود. اگر می خواهید متن در ابتدا در یک فیلد ورودی چند خطی نمایش داده شود، باید بین تگ ها قرار گیرد. .

آن را پیامک کنید <br>ابتدا در یک فیلد ورودی چند خطی نمایش داده می شود و کدام <br>نمی توان تغییر داد، زیرا ویژگی فقط خواندنی مشخص شده است

جعبه متن مخفی

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

فیلد مخفی با یک تگ شروع می شود که صفات هستند نام, نوعو ارزش... ویژگی name نام فیلد را مشخص می کند، نوعنوع فیلد و ویژگی را مشخص می کند ارزشمقدار فیلد را مشخص می کند.

دکمه ارسال

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

هنگام ایجاد دکمه برای ارسال فرم، باید 2 ویژگی را مشخص کنید: نوع = "ارسال"و ارزش = "متن دکمه"... اگر دکمه یک نیست، بلکه چندین باشد، ویژگی name مورد نیاز است و همه آنها برای عملیات های مختلف ایجاد شده اند، به عنوان مثال دکمه های "ذخیره"، "حذف"، "ویرایش" و غیره. پس از کلیک بر روی دکمه، اسکریپت از رشته عبور داده می شود نام = متن دکمه.

دکمه دانلود فایل (مرور)

برای اجرای آپلود فایل ها به سرور خدمت می کند. شیء مرور با جفت برچسب شروع می شود

قاب (مجموعه فیلد)

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

... هدف اصلی شی، تنظیم سبک های مختلف ظاهری است.

پردازش فرم

تمام داده هایی که می خواهید از فرم HTML دریافت کنید اسکریپت PHPبا آرایه های ابرجهانی مدیریت می شود $ _POSTیا $ _GETبسته به ویژگی مشخص شده در ویژگی روشروش انتقال داده ها

وظیفه:باید داده ها را از جعبه متن و فیلد ورودی چند خطی دریافت کرده و به اسکریپت ارسال کنید.
راه حل:ایجاد آن ضروری است فرم HTMLو PHP یک اسکریپت برای پردازش فرم است.

بحث:

بیایید دو فایل بسازیم: form.htmlو action.php... در پرونده form.htmlحاوی فرم html با جعبه متن خواهد بود متن رمزیو ناحیه متن پیام:

در این فرم html، ما به 3 ویژگی علاقه مند هستیم: عملکه مسیر کنترل کننده فرم، نام جعبه متن را مشخص می کند ( متن رمزی) و نام فیلد چند خطی آب ( پیام). همچنین در فرم دکمه ای وجود دارد که با کلیک بر روی آن، انتقال داده اتفاق می افتد.

پس از آماده شدن فرم html باید یک فرم کنترل کننده ایجاد کنیم action.php:

$ text = $ _POST ["mytext"];
$ msg = $ _POST ["mytext"];
echo $ text;
اکو ""؛
echo $ msg;
?>

بعد از اینکه هر مقداری را در فیلدهای متن وارد کردیم و روی " ارسال داده"فرم html مقادیر را به اسکریپت ارسال می کند action.php.
پس از آن در متغیرها متن $و $ پیامکبه ترتیب حاوی مقادیر فیلد متنی و فیلد ورودی چند خطی خواهد بود که مقادیر آنها از superglobal ها گرفته شده است. $ _POST.

اگر می خواهید قالب بندی html در یک فیلد متنی چند خطی رعایت شود، از تابع nl2br () استفاده کنید:

$ text = nl2br ($ _ POST ["mytext"]);
?>

وظیفه:فرض کنید باید یک لیست کشویی با سال های 2000 تا 2050 ایجاد کنید.
راه حل:لازم است یک فرم HTML با عنصر SELECT و PHP ایجاد کنید - یک اسکریپت برای پردازش فرم.

بحث:

ابتدا دو فایل ایجاد می کنیم: form.htmlو action.php... در پرونده form.htmlحاوی یک فرم html با یک لیست کشویی است. علاوه بر این، مقادیر موجود در لیست را می توان به دو روش مشخص کرد:

I. ورود اطلاعات به صورت دستی:

2000
2001
2002
……………………………………………
2050

II. وارد کردن داده ها از طریق یک حلقه:

دلار سال = 2000;
برای ($ i = 0؛ $ i<= 50; $i++) // Цикл от 0 до 50
{
$ new_years = $ سال + $ i; // یک مقدار جدید تشکیل دهید
پژواک" ". $ new_years.""؛ // یک خط جدید تشکیل دهید
}
?>

همانطور که می بینید، مثال دوم با یک حلقه فشرده تر است. من فکر می کنم لازم نیست اسکریپت کنترل کننده این فرم را بیاورید، زیرا مانند یک فیلد متنی پردازش می شود، یعنی. مقادیر لیست را می توان از آرایه سوپرگلوبال بازیابی کرد $ _POST.

شرح:

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

فرم html داده شده حاوی عنصر است مرور کردن، که یک کادر محاوره ای برای انتخاب فایل برای آپلود در سرور باز می کند. با فشردن دکمه "انتقال فایل"، فایل به اسکریپت handler ارسال می شود.

سپس باید یک کنترل کننده اسکریپت بنویسید action.php... قبل از نوشتن handler، باید تصمیم بگیرید که فایل را در کدام دایرکتوری کپی کنیم:

if (isset ($ _ FILES ["myfile"])) // اگر فایل وجود دارد
{
$ catalog = "../image/"; // کاتالوگ ما
if (is_dir ($ کاتالوگ)) // اگر چنین کاتالوگی وجود دارد
{
$ myfile = $ _FILES ["myfile"] ["tmp_name"]; // فایل موقت
$ myfile_name = $ _FILES ["myfile"] ["name"]; // نام فایل
if (! copy ($ myfile, $ catalog)) echo "خطا در کپی فایل". $ myfile_name // اگر کپی فایل انجام نشد
}
else mkdir ("../ تصویر /"); // اگر چنین دایرکتوری وجود نداشته باشد، آن را ایجاد می کنیم
}
?>

اظهار نظر

اگر به کاربران اطمینان دارید که هر فایلی را در سرور خود آپلود می کنند، باید بسیار مراقب باشید. مهاجمان می توانند کد "بد" را به یک تصویر یا فایل تزریق کرده و آن را به سرور ارسال کنند. در چنین مواقعی باید دانلود فایل ها را به شدت کنترل کنید.

این مثال نحوه ایجاد یک دایرکتوری و کپی فایل را در آن دایرکتوری روی سرور نشان می دهد.

من همچنین می خواهم یک مثال را با عنصر نشان دهم چک باکس... این عنصر با سایر عناصر تفاوت اندکی دارد که اگر یکی از عناصر نباشد چک باکس A انتخاب نشده است، سپس ابرجهانی انتخاب شده است $ _POSTبر خواهد گشت مقدار خالی:

اگر (! خالی ($ _ POST ["mycolor"])) echo $ _POST ["mycolor"]; // اگر حداقل 1 مورد انتخاب شده باشد
else echo "لطفا یک مقدار را انتخاب کنید"؛
?>

آخرین به روز رسانی: 08.04.2016

یک کادر متنی تک خطی با استفاده از یک عنصر ورودی زمانی ایجاد می شود که ویژگی نوع آن روی متن تنظیم شود:

برای سفارشی کردن کادر متن می توان از تعدادی ویژگی اضافی استفاده کرد:

dirname: جهت متن را تعیین می کند

حداکثر طول: حداکثر مقدار مجازکاراکترها در کادر متن

الگو: الگویی را که متن ورودی باید مطابقت داشته باشد را مشخص می کند

placeholder: متنی را که در کادر متن نمایش داده می شود به طور پیش فرض تنظیم می کند

فقط خواندنی: قسمت متن را فقط خواندنی می کند

الزامی: نشان می دهد که فیلد متنی باید دارای یک مقدار باشد

اندازه: عرض جعبه متن را در کاراکترهای قابل مشاهده تنظیم می کند

value: مقدار پیش فرض را در کادر متن تنظیم می کند

بیایید برخی از ویژگی ها را اعمال کنیم:

این مثال ویژگی های maxlength و size را در کادر متن دوم تنظیم می کند. در این مورد، اندازه - یعنی تعداد کاراکترهایی که در فضای قابل مشاهده فیلد قرار می گیرند، بیشتر از تعداد کاراکترهای مجاز است. با این حال، به هر حال نمی‌توانیم کاراکترهایی بیش از حداکثر طول وارد کنیم.

در این مورد، تمایز بین ویژگی های مقدار و مکان نگهدار نیز مهم است، اگرچه هر دو مجموعه هستند متن قابل مشاهدهدر زمینه با این حال، مکان‌دار نوعی راهنمایی یا درخواست برای ورودی تنظیم می‌کند، بنابراین معمولاً بررسی می‌شود به رنگ خاکستری... در حالی که مقدار نشان دهنده متن پیش فرض وارد شده در فیلد است:

ویژگی‌های فقط خواندنی و غیرفعال، فیلد متن را غیرقابل دسترسی می‌کنند، اما با موارد مختلفی همراه هستند جلوه بصری... در صورت غیرفعال بودن، قسمت متن سایه دار می شود:

در میان ویژگی های جعبه متن، باید به ویژگی لیست نیز توجه کرد. این شامل یک ارجاع به یک عنصر فهرست داده است که مجموعه ای از مقادیر را تعریف می کند که هنگام تایپ در یک کادر متنی به عنوان یک اشاره ظاهر می شوند. مثلا:

ویژگی لیست کادر متن به شناسه عنصر فهرست داده اشاره می کند. خود عنصر datalist از عناصر گزینه تو در تو برای تعریف عناصر لیست استفاده می کند. و همانطور که در کادر متن تایپ می کنید، این لیست به عنوان یک راهنمای ابزار نمایش داده می شود.

فیلد جستجو

برای ایجاد فیلدهای جستجو، از عنصر ورودی با ویژگی type = "search" استفاده کنید. به طور رسمی، یک فیلد متنی ساده است:

قسمت ورودی رمز عبور

برای وارد کردن رمز عبور، از عنصر ورودی با ویژگی type = "password" استفاده کنید. خود انگاین است که کاراکترهای وارد شده با نقطه پوشانده می شوند:

این عنصر فرم برای ایجاد ناحیه ای طراحی شده است که در آن می توانید چندین خط متن را وارد کنید. در چنین فیلد متنی، شکستن خطوط مجاز است، آنها هنگام ارسال داده ها به سرور ذخیره می شوند.

فیلد متن چند خطی برای افزودن نظرات به مقالات، نوشتن پست‌های انجمن، درج و ویرایش پست‌های وبلاگ، و در بسیاری موارد دیگر که یک خط متن به وضوح کافی نیست، ضروری است.

سینتکس ایجاد فیلد به صورت زیر است.

بین تگ ها ومی توانید هر متنی را که نمایش داده می شود در داخل فیلد قرار دهید. اگر متنی وجود نداشته باشد، ابتدا فیلد خالی خواهد بود.

ویژگی های معتبر در جدول ذکر شده است. 1.

نتیجه مثال در شکل نشان داده شده است. 1.

برنج. 1. نوع فیلد متنی به طور پیش فرض

برای همان محدودیت هایی اعمال می شود که برای <input>، برای مثال:</p><ul><li><textarea>نمی توان داخل یک پیوند تو در تو قرار داد <a> ;</li><li><textarea>نمی توان داخل یک دکمه تو در تو قرار داد <button> ;</li> </ul><p>V <textarea>درج آن جایز است <a href="https://bumotors.ru/fa/sochetanie-klavish-chtoby-vydelit-vse-polnyi-spisok-goryachih-klavish-windows.html">متن دلخواه</a>و در داخل جعبه متن ویرایش نشان داده می شود. در این مورد، برخلاف HTML معمولی (مثال 2) همه فضاها در نظر گرفته می شوند.</p><p>مثال 2. فیلد متنی با متن</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>فیلد متنی</title> </head> <body> <form action="handler.php"> <p><strong>بررسی خود را ویرایش کنید:</strong></p> <p><textarea name="edit" rows="3" cols="30">KG / AM نوشیدنی Yadu.

نتیجه این مثالنشان داده شده در شکل 2. لطفا توجه داشته باشید که تمام فاصله ها و خطوط شکست در داخل در نظر گرفته شده است. .</p><p><img src='https://i2.wp.com/webref.ru/assets/images/html5-forms/textarea.png' width="100%" loading=lazy loading=lazy></p><p>برنج. 2. فیلد با متن</p><p>به طور معمول اندازه ها <textarea>با استفاده از سبک‌ها تنظیم می‌شوند، اما اگر هر دو صفت ردیف‌ها و cols با عرض و ارتفاع از طریق CSS تنظیم شوند، سبک‌ها اولویت دارند و ارزش ویژگی‌ها نادیده گرفته می‌شود.</p> <br><p>فرم ها در HTML سخت ترین هستند، اما از طرف دیگر، شاید از همه بیشتر باشند <a href="https://bumotors.ru/fa/chto-postit-v-blog-chtoby-bylo-interesno-idei-dlya-bloga-o-ch-m-pisat-posty-v.html">موضوع جالب</a>در HTML</p> <p>فرم‌های وب به بازدیدکنندگان سایت اجازه می‌دهند تا اطلاعات خاصی را در فیلدهای خاص وارد کنند و توسعه‌دهنده می‌تواند آن‌ها را در فرمی مناسب برای خود دریافت کند.</p> <p>نمونه ای از یک فرم است <a href="https://bumotors.ru/fa/antipatiya-dealer-guestbook-php-gostevaya-kniga-php-guestbook-ya-kupilsya-kak-my-eto.html">کتاب مهمان</a>، پرسشنامه، <a href="https://bumotors.ru/fa/sozdat-svoi-test-onlain-instrukciya-kak-sozdat-test-v-gruppe-s-pomoshchyu.html">آزمون آنلاین</a>... فرم ها هنگام ثبت نام در سایت، هنگام ثبت سفارش در فروشگاه اینترنتی و غیره پر می شوند.</p> <p>با استفاده از HTML، می‌توانید یک اسکلت از یک فرم ایجاد کنید: جعبه‌های متن، منوها، فهرست‌ها، دکمه‌ها، کادرهای چک و دکمه‌های رادیویی. یعنی آن عناصری که با کمک آنها اطلاعات خاصی وارد فرم می شود.</p> <p>سپس داده های وارد شده در فرم برای پردازش به سرور ارسال می شود. اما HTML در اینجا ناتوان است - یک برنامه یا اسکریپت از قبل روی پردازش فرمی که به آن متصل شده است کار می کند. چنین برنامه هایی معمولاً در نوشته می شوند <a href="https://bumotors.ru/fa/operator-vybora-if-v-yazyke-c-osnovy-php-cikl-for-primery-ispolzovaniya-logicheskih-operatorov.html">php</a>یا جاوا اسکریپت</p> <h4>ویژگی های فرم - برچسب <form></h4> <p>ممکن است چندین فرم در یک صفحه وب وجود داشته باشد ( <i>به اندازه نیاز توسعه دهنده</i>). هر کدام از آنها با یک برچسب شروع می شود <form>و با یک تگ پایانی به پایان می رسد</form> .</p> <p>ویژگی action برای هر فرمی مورد نیاز است - آدرس فایلی را که فرم را ارائه می کند نشان می دهد ( <i>داده های وارد شده به آن را پردازش می کند</i>).</p> <p>ویژگی روش نحوه ارسال محتوای فرم را تعیین می کند. دو روش وجود دارد - GET و POST. اکنون از آنجایی که موضوع ارسال اطلاعات است، کاوش در این پارامترها منطقی نیست <a href="https://bumotors.ru/fa/php-post-i-get-zaprosy-dlya-nachinayushchih-ispolzovanie-metodov-get-i.html">روش های دریافت</a>و POST به زبان های پردازش داده اشاره دارد ( <i>به عنوان مثال PHP</i>). کافی است بدانید که این روش انتقال داده POST است که در اکثر موارد در اکثر موارد استفاده می شود.</p> <p>ویژگی نام را تگ کنید <form>اختیاری است اما اگر چندین فرم در سند وجود داشته باشد، هر یک از آنها باید به نحوی توسط پردازنده شناسایی شوند. بنابراین، حضور <a href="https://bumotors.ru/fa/atributy-name-i-id-raznica-mezhdu-atributami-id-i-name-v-html.html">ویژگی نام</a>در این مورد لازم است - یک نام منحصر به فرد برای فرم مشخص می کند.</p> <p>همچنین می توانید رمزگذاری را برای داده های ورودی تنظیم کنید - ویژگی Accept-charset مسئول این است و همچنین با استفاده از <a href="https://bumotors.ru/fa/ikt-kak-delat-tablicu-v-html-giperssylka-giperssylka-chto-eto.html">ویژگی هدف</a>، پنجره ای را تعریف کنید که در آن نتیجه پردازش فرم ارسالی نمایش داده شود ( <i>در پنجره جدید یا فعلی</i>).</p> <p>اما خود تگ <form>منطقی نیست، زیرا فرم داده هایی را منتقل می کند که ابتدا باید در جایی وارد شوند!</p> <h4>ورود داده. فیلدهای فرم - برچسب <input></h4> <p>برچسب بزنید <input>این متداول ترین تگ مورد استفاده در فرم ها است. برای ایجاد طراحی شده است <a href="https://bumotors.ru/fa/razreshenie-ekrana-dlya-obs-sceny-istochniki-i-dobavlenie-razlichnyh-elementov-chto.html">عناصر مختلف</a>، برای وارد کردن داده ها به فرم استفاده می شود: اینها فیلدهای متنی، دکمه ها، چک باکس ها، دکمه های رادیویی هستند.</p> <p>type ویژگی اصلی تگ است <input>... نوع فیلد ( <i>عنصر</i>) تشکیل می دهد:</p> <table width="100%" border="1"><tr><td width="300px"> <p>مقدار ویژگی type = "..."</p> </td> <td width="245px"> <p>نتیجه</p> </td> <td> <p>شرح</p> </td> </tr><tr><td> <p><input type="text" size="20" value="اسم شما..." ></p> </td> <td align="center"><form> <input type="text" size="20" value="اسم شما..."></form> </td> <td><p>کادر متنی تک خطی برای وارد کردن متن. مشخصه size عرض فیلد را بر حسب کاراکتر مشخص می کند.</p> </td> </tr><tr><td><p><input type="password" maxlength="10" size="20" ></p> </td> <td align="center"><form> <input type="password" maxlength="10" size="20"></form> </td> <td><p>فیلد متنی برای وارد کردن رمز عبور. <br>ویژگی maxlength مجموعه می شود <a href="https://bumotors.ru/fa/preobrazovanie-iz-pdf-v-eksel-maksimalnoe-kolichestvo-stranic.html">بیشترین مقدار</a>کاراکترهایی که می توان وارد کرد</p> </td> </tr><tr><td><p><input type="radio" name="radio" value="1" checked></p> <p><input type="radio" name="radio" value="2" ></p> <p><input type="radio" name="radio" value="3" ></p> </td> <td align="center"> <form> <input type="radio" name="radio" value="1" checked> 1 <input type="radio" name="radio" value="2"> 2 <input type="radio" name="radio" value="3"> 3 </form> </td> <td><p>تعویض. <br>شما می توانید تنها یکی از گزینه های ارائه شده را انتخاب کنید. ویژگی checked یک فیلد از پیش بررسی شده را تعریف می کند.</p> </td> </tr><tr><td><p><input type="checkbox" name="flag" value="1" checked></p> <p><input type="checkbox" name="flag" value="2" ></p> <p><input type="checkbox" name="flag" value="3" ></p> </td> <td align="center"> <form> <input type="checkbox" checked>1 <input type="checkbox">2 <input type="checkbox">3 </form> </td> <td><p>چک باکس. <br>چندین گزینه در دسترس است.</span>صفت <span>checked یک فیلد از پیش بررسی شده را تعریف می کند.</p> </td> </tr><tr><td><p><input type="button" value="دکمه" ></p> </td> <td align="center"><form> <input type="button" value="دکمه"></form> </td> <td><p>دکمه. <br>ویژگی value برچسب را روی دکمه تنظیم می کند.</p> </td> </tr><tr><td><p><input type="reset" value="بازنشانی کنید" ></p> </td> <td align="center"><form> <input type="reset" value="بازنشانی کنید"></form> </td> <td><p>دکمه تنظیم مجدد. <br>فیلدهای فرم را به ظاهر اصلی خود برمی گرداند. بازنشانی داده های وارد شده</p> </td> </tr><tr><td><p><input type="submit" ></p> </td> <td align="center"><form> <input type="submit"></form> </td> <td><p>دکمه ارسال اطلاعات وارد شده</p> </td> </tr><tr><td><p><input type="file" ></p> </td> <td align="center"><form> <input type="file"></form> </td> <td><p>فیلد برای وارد کردن نام فایل آپلود شده.</p> </td> </tr><tr><td><p><input type="image" src="img/buttom.gif" ></p> </td> <td align="center"><form> <input type="image" src="img/buttom.gif"></form> </td> <td><p>دکمه تصویر <br>همچنین برای ارسال اطلاعات به سرور نیز خدمت می کند. ویژگی src آدرس فایل تصویر را مشخص می کند.</p> </td> </tr><tr><td><p><input type="hidden" size="20" ></p> </td> <td align="center"><form> <input type="hidden" size="20"></form> </td> <td><p>فیلد پنهان برای کاربر نامرئی است.</p> </td> </tr></table><h3>کشویی - برچسب ها <select>و <option></h3> <p>برچسب بزنید <select>و همچنین برچسب <input>برای جمع آوری اطلاعات خدمت می کند - لیستی ایجاد می کند که از آن می توانید یک یا چند مورد را انتخاب کنید. هر عنصر دارای یک مقدار مربوطه است که برای پردازش به سرور ارسال می شود.</p> <p>چشم انداز <a href="https://bumotors.ru/fa/kak-sdelat-numerovannyi-spisok-sozdanie-v-word-spiska-markirovannyi.html">لیست در حال ایجاد</a>بستگی به ارزش دارد <a href="https://bumotors.ru/fa/atribut-size-elementa-input-type-text-ustanavlivaet-opisanie-parametrov-tega.html">ویژگی اندازه</a>: برای اندازه = "1" ( <i>پیش فرض</i>) لیست کشویی خواهد بود.</p> <p>مقدار متفاوتی برای ویژگی اندازه با تعداد آیتم های لیست نمایش داده شده مطابقت دارد. به عنوان مثال، با اندازه = "3"، سه مورد قابل مشاهده خواهد بود. برای مشاهده بقیه موارد لیست ( <i>در صورت وجود</i>) باید استفاده کنید <a href="https://bumotors.ru/fa/ubiraem-na-ekrane-monitora-gorizontalnye-polosy-kotorye-poyavilis.html">نوار عمودی</a>اسکرول که به صورت خودکار اضافه می شود.</p> <p>به طور پیش فرض، فقط یک مورد از لیست را می توان انتخاب کرد. افزودن ویژگی چندگانه به یک برچسب <select>به شما امکان می دهد چندین مورد را در لیست با ماوس انتخاب کنید و <a href="https://bumotors.ru/fa/deistvie-primenyaemoe-po-hokkeyu-ctrl-x-goryachie-klavishi-na-klaviature.html">کلیدهای Ctrl</a>و Shift.</p> <p>اگر ویژگی چندگانه وجود داشته باشد، تمام یا بخشی از موارد لیست نمایش داده می شود ( <i>بسته به مرورگر</i>) اگر ویژگی اندازه روی تعداد مشخصی از نقاط قابل مشاهده تنظیم نشده باشد.</p> <p>عنصر مورد نیاز لیست کشویی تگ است <option>... داخل تگ قرار دارد <select>و هر آیتم لیست را ایجاد می کند.</p> <p>با استفاده از ویژگی نام تگ <select>به لیست یک نام داده می شود و با استفاده از ویژگی مقدار تگ <option>به آیتم لیست یک مقدار اختصاص داده می شود. بنابراین، یک جفت "name = value" به سرور ارسال می شود - نام لیست و مقدار عنصر / s انتخاب شده.</p> <p>ویژگی انتخاب شده برچسب <option>یک آیتم لیست از پیش انتخاب شده را تعریف می کند و <a href="https://bumotors.ru/fa/kak-sdelat-knopku-neaktivnoi-javascript-neaktivnaya-knopka-submit-atribut.html">ویژگی غیر فعال</a>یک مورد لیست را مسدود می کند - نمی توان آن را انتخاب کرد.</p> <p><img src='https://i0.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><form> <br><p>طرف دنیا یکی از چهار جهت اصلی است:</p> <br> <select name= "storona" > <br> <option value= "شمال" >شمال</option><br> <option value= "جنوب" >جنوب</option><br> <option value= "غرب" >غرب</option><br> <option value= "شرق" >شرق</option> <br> </select><br><p>7 عجایب جهان!</p> <br> <select name= "chudo" size= "4" multiple> <br> <option value= "1" >هرم خئوپس</option><br> <option value= "2" selected> <span>باغ های معلق بابل</span> </option><br> <option value= "3" disabled> <span>مجسمه زئوس در المپیا</span> </option><br> <option value= "4" > <span>معبد آرتمیس در افسوس</span> </option><br> <option value= "5" > <span>مقبره در هالیکارناسوس</span> </option><br> <option value= "6" > <span>کلوسوس رودس</span> </option><br> <option value= "7" > <span>فانوس دریایی اسکندریه</span> </option><br> </select><br><p> <input type= "reset" value= "بازنشانی کنید" > </p> <br> </form> </p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_result.jpg' height="61" width="200" loading=lazy loading=lazy></p> <form> <p>طرف دنیا یکی از چهار جهت اصلی است:</p><p>شمال جنوب غرب شرق</p><p>7 عجایب جهان!</p><p>هرم خئوپس باغ های معلق بابل مجسمه زئوس در المپیا معبد آرتمیس در مقبره افسوس در هالیکارناسوس کلوسوس رودس فانوس دریایی اسکندریه</p><p><input type="reset" value="بازنشانی کنید"></p> </form> <h3>جعبه متن چند خطی - برچسب <textarea></h3> <p>برچسب بزنید <textarea>یک جعبه متن چند خطی ایجاد می کند. انجام شکستن خطوط در آن مجاز است که هنگام انتقال داده ها به کنترل کننده ذخیره می شود.</p> <p>ویژگی نام را تگ کنید <textarea>لازم است - یک نام به قسمت متن اختصاص می دهد.</p> <p>ویژگی disabled فیلد را مسدود می کند - محتوای فیلد را نمی توان تغییر داد و در دسترس نیست. ویژگی readonly نشان می دهد که فیلد فقط خواندنی است - کاربر نمی تواند محتوا را ویرایش کند، اما در دسترس است - می توان آن را انتخاب کرد و مثلاً کپی کرد.</p> <p>با استفاده از ویژگی های cols و rows می توانید عرض جعبه متن را به کاراکتر و ارتفاع کادر را در ردیف ها تنظیم کنید.</p> <p><img src='https://i0.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>اگر محتوای فیلد از اندازه آن بیشتر شود، یک نوار لغزنده ظاهر می شود.</span>

اگر محتوای فیلد از اندازه آن بیشتر شود، یک نوار لغزنده ظاهر می شود.

نمونه ای از استفاده از فرم

حالا بیایید ببینیم فرم چگونه کار می کند.

فرم سفارش فیلم آموزشی:

اسم شما: *

سفارش شما:

فیلم آموزشی HTML
فیلم آموزشی CSS
آموزش تصویری PHP

انتخاب رسانه:

سی دی

دی وی دی

فلش USB

ایمیل شما: *

نشانی شما: *

مقالات مرتبط برتر

اپراتور شعبه "Select Case"

برچسب های جفت نشده چه تفاوتی با تگ های جفت دار دارند؟

خازن ها تفاوت پتانسیل بین صفحات خازن با ظرفیت