کار با فیلدهای فرم

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

یک منطقه قابل کلیک در صفحه وب که یک عمل را آغاز می کند   =   button

یک رابط واحد برای یک مقدار داده فراهم می کند   =   input

لیستی از چندین شیء در یک لیست کشویی   =   select

به مرورگر سیگنال می‌دهد تا داده‌های فرم را به URL اقدام ارسال کند   =   submit

یک کادر چند خطی بزرگتر برای وارد کردن مقادیر بیشتر متن   =   textarea

اچ تی ام ال 5 چند عنصر فیلد فرم دیگر را به لیست اضافه می کند

»»  datalist: فهرستی از گزینه های از پیش تعریف شده را ارائه می دهد

»»  keygen: یک جفت کلید عمومی/خصوصی برای احراز هویت ایجاد می کند

»»خروجی : ناحیه ای را برای نمایش نتایج یک فرآیند ایجاد می کند بخش های زیر نحوه استفاده از هر یک از این عناصر را در فرم های وب به شما آموزش می دهند.

استفاده از فیلدهای ورودی

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

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

<input type=”type” attributes>

استاندارد HTML تعداد انگشت شماری از انواع مختلف فیلد ورودی را تعریف می کند. اگر تا به حال با یک ایستگاه کاری ویندوز یا macOS تعامل داشته است (و چه کسی این روزها این کار را نکرده است؟)، شما با تمام این انواع ورودی آشنا هستید. بخش های زیر نحوه استفاده از هر یک را توضیح می دهد.

جعبه های متن

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

شما یک فیلد ورودی جعبه متن را با تنظیم مقدار ویژگی type به متن ایجاد می کنید:

<input type=”text” name=”age” size=3>

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

مهم است که آن ویژگی را لحاظ کنید.

ویژگی اندازه به شما امکان می دهد تعیین کنید که فیلد فرم چقدر در صفحه وب ظاهر شود. مقدار پیش فرض 20 است که برای وارد کردن یک سن کمی زیاد است، بنابراین من آن را به 3 تغییر دادم.

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

ویژگی disabled از وارد کردن داده ها در قسمت متن جلوگیری می کند.

نمایش یک فیلد متنی که نمی‌توانید داده‌ها را در آن وارد کنید ممکن است عجیب به نظر برسد، اما زمانی که یاد می‌گیرید چگونه فیلدهای ورودی را به صورت پویا با استفاده از جاوا اسکریپت تغییر دهید، هدفی دارد. بعداً در کتاب 3.  با استفاده از عنصر برچسب می توانید یک برچسب را با یک کادر متنی مرتبط کنید.

عنصر ورودی باید در برچسب باز و بسته شدن محصور شود:

<label>

Last Name

<input type=”text” name=”lastname”>

</label>

با این فرمت، می‌توانید از CSS برای استایل و موقعیت‌بندی برچسب و متن استفاده کنید فیلد جعبه در همان زمان.

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

<fieldset>

<legend>Enter your name</legend>

<label>

Last Name

<input type=”text” name=”lastname”>

</label>

<label>

First Name

<input type=”text” name=”firstname”>

</label>

</fieldset>

عنصر legend به شما امکان می دهد متنی را که در مرز مجموعه فیلد ظاهر می شود تعریف کنید. نکته خوب در مورد مجموعه فیلدها این است که می توانید یک ویژگی id و سپس به آن اختصاص دهید استایل های خاصی را برای کل گروه در CSS3 اعمال کنید.