نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی. پرتال اطلاعاتی

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

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

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

فیلد متن پنهان

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

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

دکمه ارسال

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

هنگام ایجاد دکمه برای ارسال فرم، باید 2 ویژگی را مشخص کنید: نوع "ارسال"و value=”متن دکمه”. اگر دکمه یک نیست، بلکه چندین باشد و همه آنها برای عملیات های مختلف ایجاد شده باشند، ویژگی 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.
پس از آن در متغیرها $textو $msgبه ترتیب حاوی مقادیر فیلد متنی و فیلد ورودی چند خطی خواهد بود که مقادیر آنها از متغیرهای ابرجهانی گرفته شده است. $_POST.

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

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

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

بحث:

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

I. ورود دستی داده ها:

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

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

شرح:

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




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

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

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

اظهار نظر

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

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

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


آبی
سیاه
سفید

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

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

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

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

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

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

برگه 1. صفات

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

برنج. 1. نمای پیش فرض فیلد متنی

برای

نتیجه این مثالنشان داده شده در شکل 2. لطفا توجه داشته باشید که تمام فاصله ها و خطوط در داخل شکسته می شود و دارای گزینه های زیر است:

نام- نام زمینه،

cols- عرض میدان به کاراکتر،

ردیف ها- تعداد خطوط متن قابل مشاهده روی صفحه،

بسته بندی کردن- بسته بندی کلمات:

خاموش- هیچ انتقالی رخ نمی دهد

مجازی- انتقال نمایش داده می شود، اما سرور یک رشته تقسیم ناپذیر دریافت می کند،

فیزیکی- انتقال هم بر روی صفحه و هم هنگام ورود به سرور.

معلول- زمینه غیر فعال،

فقط خواندنی- فقط خواندن مجاز است.



نتیجه:

لیست های کشویی

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



چقدر حاضرید برای این موضوع وقت بگذارید؟



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

(با فشار دادن انتخاب کنید کلید ctrl)

نتیجه:

برچسب های بیشتری وجود دارد<optgroup>… ، به شما امکان می دهد عناصر لیست را بر اساس برخی معیارها گروه بندی کنید. به عنوان مثال، برای ایجاد یک کاتالوگ از سایت ها در قالب یک لیست، راحت تر است که آن را به گروه های مورد علاقه تقسیم کنید. لطفا توجه داشته باشید در این موردبرچسب های بستن مورد نیاز است. مثال کد:

دایرکتوری وب سایت:

نتیجه:

کتیبه ها

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

نتیجه:

شرایط شغلی

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

1. عنوان

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

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

4. دکمه ها - " ارسال», « پاک کردن»;

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

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

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

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

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

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

گزینه شرح
کارگاه، سایت، نام کامل مقدار کار انجام شده
UDC، نام کامل نویسنده، نام، شماره
شماره قطار، نام، محل حرکت، محل ورود، دسته بندی
سازمان، نام کامل، سال تولد، فضای اشغال شده
کشور، منطقه، جمعیت، قاره، پایتخت
ساخت خودرو، شماره، رنگ، سال ساخت، مسافت پیموده شده
نژاد سگ، نام مستعار، پدر، مادر، تاریخ تولد، نام کامل صاحب
نوع سبزی، نام رقم، تاریخ کاشت، تاریخ برداشت، برداشت
رشته، حجم سخنرانی، حجم آزمایشگاه، نوع کنترل، گروهی
تاریخ، دما، فشار، ابری، جهت باد
نام، شرکت، هزینه، مقدار، تاریخ
نام گروه، کشور، آلبوم، تاریخ انتشار، شماره فروش
نام قله، ارتفاع، کشور، سال فتح، تعداد صعودها
نام کامل، سال تولد، قد، وزن، گروه خونی
نام کامل، زمینه فعالیت، سال تولد، کشور، تعداد انتشارات

سوالات تستی

1. برچسب ایجاد یک فیلد متنی را توضیح دهید. نحو آن را بدهید.

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

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

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

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

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

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

معلم Stishenok E.O.

فربروف A.G.

آخرین به روز رسانی: 1395/04/08

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

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

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

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

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

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

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

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

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

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

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

فیلدهای متنی در HTML5

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

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

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

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

فیلدهای متنی در HTML5

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

فیلد جستجو

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

جستجو در HTML5

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

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

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