آموزش رایگان HTML – جلسه 6

در هر سایت و وبلاگی عناصری تعاملی وجود دارد که باعث میشود کاربر عکس العمل نشان دهد.(عناصر تعاملی یعنی چی؟) مثلا دکمه ای که کاربر روی آن کلیک کند, نظرسنجی که به سوالات آن پاسخ دهد و …پر استفاده ترین این عناصر فیلدها و فرم هایی هستند که کاربران آن ها را تکمیل می کنند و با یک کلیک اطلاعات وارد شده را به سرور و پایگاه داده ی ارسال می کنند. ایجاد این نوع عناصر تعاملی با استفاده از تگ فرم و عناصر زیر مجموعه ی آن در HTML انجام میشود پس تصمیم داریم در این جلسه به فرم ها در HTML بپردازیم. با ما همراه باشید.

اگر هنوز جلسه ی پنجم از آموزش HTML  را مطالعه نکرده اید پیشنهاد می کنیم از طریق لینک قرار داده شده ابتدا به مطالعه ی آن بپردازید و سپس این جلسه را دنبال کنید.

ساختار فرم ها در HTML

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

action: از این ویژگی برای تعیین URL در جایی که داده های فرم باید ارسال شود, استفاده می شد (به عنوان مثال:http://example.com/form_file.php).

البته این ویژگی قبل از HTML5 استفاده میشد اما در حال حاضر اختیاری است.

تکمیل خودکار(autocomplete): اگر می خواهید مرورگر بازدید کنندگان پاسخ فرم را براساس input های ذخیره شده پیشنهاد دهد ، از این ویژگی استفاده کنید. مقدار پیش فرض تکمیل خودکار”روشن(on)” است. اگر می خواهید تکمیل خودکار را در حالت خاموش نگه دارد, باید در هر فیلدی که اجازه تکمیل خودکار دارد را نیز خاموش کنید.

method: این ویژگی روش ارسال داده های فرم به سرور را مشخص می کند.اگر از مقدار Get درون ویژگی method استفاده شود، در هنگام ارسال اطلاعات به سرور، اطلاعات وارد شده توسط کاربر در نوار آدرس مرورگر با یک علامت “؟” قابل مشاهده می باشد. برخلاف Get در صورت استفاده از مقدار Post دیگه اطلاعات ارسالی در نوار آدرس مرورگر نمایش داده نخواهد شد و از نظر امنیتی نیز این روش برای ارسال اطلاعات پیشنهاد میشود.

target: مشخص می کند که پاسخ دریافتی پس از ارسال فرم را در کجا نمایش دهد.

•  self_ پاسخ را در همان قاب مرورگر بارگذاری می کند.
•  blank_ یک پنجره یا برگه جدید در مرورگر باز می کند.
•  parent_ لينک در قاب اصلی يا مادر باز خواهد شد .هنگامی استفاده می شود که یک فرم در زمینه مرور بعدی قرار می گیرد تا پاسخ را در متن والد بارگذاری کند و همان رفتار مشابه self_ را دارد.
•  top_ مشابه parent_ است اما زمینه مرور سطح بالا را به جای زمینه اصلی والد انتخاب می کند.

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

از عنصر <fieldset> برای گروه بندی فیلد های مرتبط فرم استفاده می شود. همچنین ممکن است از این فرم برای داشتن یک فرم کامل استفاده شود تا نشانه ای بصری ایجاد کند که فرم را از محتوای اطراف متمایز کند. اولین عنصر در یک مجموعه زمینه معمولاً یک <legend> است.
عنصر Fieldset اختیاری است اما معمولاً برای گروه بندی عناصر مرتبط در فرم های طولانی و پیچیده یا برای جدا کردن قسمتهای فرم از عناصر نزدیک هنگام ارائه فرم به همراه محتوای غیر فرم استفاده می شود.

انواع مقادیر مجاز برای input

عنصر input بسیار انعطاف پذیر است به طوری که ظاهر و رفتار آن می تواند براساس ویژگی type اعمال شده بر روی عنصر تغییر چشمگیری کند. متداول ترین مقادیر type شامل موارد زیر هستند:

ویژگی های یک فرم

name : نام اختصاص داده شده به هرعنصر فرم است مانند:

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

value: مقدار یک عنصر ورودی است که بسته به type ورودی که اعمال می شود عملکرد متفاوتی را انجام می دهد.مثلا هنگامی که برای submit ، reset یا button اعمال می شود ، مقدار به عنوان متن روی دکمه استفاده می شود.

readonly: هنگامی که readonly به عنوان ویژگی عنصر ورودی اعمال می شود ، مقدار فیلد قابل تغییر نیست. از جاوااسکریپت می توان برای حذف ویژگی readonly پس از اقدام دیگری مانند کلیک روی یک دکمه یا انتخاب کادر تأیید استفاده کرد.

disabled : از این ویژگی برای غیرفعال کردن یک فرم کامل ، fieldset یا یک فیلد استفاده کنید.

size: از مشخصه size با انواع ورودی متن برای تعیین عرض قابل مشاهده فیلد بدون محدود کردن تعداد کاراکترهایی که ممکن است در این قسمت وارد شوند استفاده کنید.

maxlength: اگر نمی خواهید بیش از تعداد مشخصی از کاراکترها را در یک قسمت مشخص بپذیرید ، از maxlength استفاده کنید تا آن قسمت ها را به تعداد مشخصی از کاراکترها محدود کنید.

checked: اگر می خواهید هنگام بارگیری فرم ، کادر تأیید یا دکمه رادیویی انتخاب شود ، این ویژگی را روی آن عنصر ورودی اعمال کنید. این ویژگی ها پشتیبانی گسترده ای دارند و معمولاً با فرمهایی که هر روز با آنها روبرو می شوید استفاده می شوند.

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

autofocus: از این ویژگی برای شناسایی قسمتی از فرم استفاده کنید که هنگام بارگیری لازم است در کانون توجه باشد.

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

pattern: ممکن است مواقعی پیش بیاید که مشخص کنید مقدار ورودی باید معیارهای خاصی را داشته باشد

placeholder: بیشتر فرمها متن متغیرهایی را در بر می گیرند که به محض کلیک کردن روی قسمت یا شروع به تایپ کردن ناپدید می شوند. از این ویژگی برای افزودن و تعریف متن نگهدارنده مکان برای هر ورودی که متن را می پذیرد استفاده کنید.

required: در صورت نیاز به فیلدهای خاص در یک فرم ، از این ویژگی استفاده کنید تا در صورت خالی بودن اخطار دهد با این کار پر کردن آن را ضروری می کنید.

دکمه ها, ناحیه ی متنی و Drop-Downs

Input ها تنها عناصری نیستند که می توان برای ایجاد فیلدهای فرم استفاده کرد. عناصر دیگری نیز وجود دارند که میتوان با استفاده از آنها لیست ها یا گزینه های drop-down ، ناحیه ی متنی و دکمه ها را  ایجاد کرد.

لیست های کشویی از پیش تعیین شده یا (Pre-Populated Drop-Down Lists)

برای ایجاد یک لیست کشویی با گزینه های از پیش تعیین شده که کاربر باید یکی از آنها را انتخاب کند، از عنصر select و چند option (برای ایجاد گزینه های مختلف منوی کشویی) استفاده کنید. به عنوان مثال ، برای ایجاد یک منوی کشویی با گزینه های رنگی برای یک فروشگاه تجارت الکترونیکی می توانید از کد زیر استفاده کنید:

<select name=”color ” >
<option value=”tan”>Windswept Sand Dune</option>
<option value=”green“>Lush Forest</option>
<option value=”blue“>Turbulent Waters</option>
<option value=”black“>Deep Night</option>
< /select >

توجه داشته باشید که value آن چیزی است که با فرم ارسال می شود, در حالی که متن بین تگ های بازو بسته همان چیزی است که به بازدید کننده ارائه می شود. به عنوان مثال ؛ اگر بازدید کننده ” Lush Forest” را انتخاب کند، مقدار واقعی ارائه شده با فرم ، سبز خواهد بود.

ناحیه های متنی یا (Free Form Text Areas)

تمام Input های متنی که تا به حال دیده ایم مانند <input type =”text”> فقط یک خط متن را می پذیرند. با این حال ، اگر می خواهید یک ناحیه متن بزرگ برای متن های طولانی تر ایجاد کنید باید از عنصر textarea استفاده کنید.
عنصر textarea برای ایجاد یک ناحیه Input متن بزرگ است, متن هایی که در یک خط جا نمی شوند.

برای textarea سه قسمت وجود دارد:

1.  textarea با تگ های باز و بسته ایجاد می شود. هر متنی که درون تگ ها قرار گرفته باشد، هنگام بارگیری فرم در ناحیه متن بارگیری می شود و همراه با فرم ارسال می شود مگر اینکه بازدید کننده ای که فرم را ارسال می کند ، متن را از آن ناحیه حذف کند.
2.  اگر می خواهید اندازه ناحیه متن را تعریف کنید ، از ویژگی rows برای تعیین تعداد ردیف های متن استفاده کنید که باید بدون تغییر اندازه متن نمایش داده شوند.
3.  برای تنظیم عرض از پیش تعیین شده از ویژگی cols استفاده کنید. مقدار اعمال شده تعداد کاراکترهایی است که قبل از رفتن به سطر دوم روی یک ردیف ظاهر می شوند.

عناصر ناحیه متن قابل تغییراندازه هستند. با این حال ، ویژگی های سطرها و ستون های textarea و حداقل فضای مورد نظر برای تغییر اندازه وقتی تعیین میشوند که برای اولین بار توسط مرورگر ارائه می شوند.

<textarea rows=”3″ cols=”60″ placeholder=”Enter Text Here”> </textarea> <br>

<textarea rows=”3″ cols=”60″> Enter Text Here </textarea>

این کد دو ناحیه متنی با اندازه یکسان تولید می کند که دارای سه ردیف بلند هستند و می توانند 60 کاراکتر را در هر ردیف بپذیرند. این کد برای هر اندازه بزرگتر از اندازه پیش فرض قابل تغییر اندازه خواهد بود. توجه داشته باشید که چگونه متن مکان یاب با عنصر مکان یاب به متن اول اضافه شده است اما به سادگی بین تگ های باز و بسته در مثال دوم قرار گرفته است.

در حالی که اندازه textarea را می توان با استفاده از “سطرها” و “ستون ها” تعیین کرد ، استفاده از CSS برای استایل و اندازه مورد نظر روش بهتری است. در کنار همه این موارد بسیاری از ویژگی هایی که می توانند برای عناصر input اعمال شوند، قابل اعمال برای عناصر textarea نیز هستند. علاوه بر این ، به مواردی که در مثال بالا گنجانده شده است ، ویژگی های دیگری نیز میتوان اضافه کرد از جمله :
autofocus, disabled, form, maxlength, name, readonly,required, wrap.

دکمه ها

دو روش برای ایجاد دکمه ها وجود دارد:

<input type=”button/submit/reset/image”>
<button type=”button/submit/reset/”>ارسال</button>

استفاده از input و button که در قبل توضیح داده شده بود.

عناصر فرم اضافه شده در HTML5

در HTML5 سه عنصر فرم جدید اضافه شده است؛

datalist: از این عنصر برای تهیه لیستی از مقادیر پیشنهادی تکمیل خودکار یک عنصر input استفاده میشود. برای استفاده از datalist ، ابتدا یک input با ویژگی list ایجاد کنید. سپس یک عنصر datalist با ویژگی id ایجاد کنید.مقدار اعمال شده بر ویژگی لیست ورودی باید با شناسه datalist مطابقت داشته باشد. مقادیر با اضافه کردن عناصرآپشن بین تگ های باز و بسته Datalist ، به آن اضافه می شوند. مثال زیر نمونه ای از نحوه عملکرد همه اینها است؛

<p>What is your favorite web technology?</p>
<“input type=”text” list=”web_technologies” name=”web_technology>
<“datalist id=”web_technologies>
<“option value=”HTML>
<“option value=”CSS>
<“option value=”JavaScript>
<“option value=”jQuery>
<“option value=”PHP>
<“option value=”Bootstrap>
<datalist/>

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

😊✌ از بقیه‌ی جلسات  آموزش رایگان HTML جا نمونید✌😊

منبع؛ www.html.com