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

برای تعاملی کردن یک فرم، باید عناصر فرم را اضافه کنید. کنترل هایی برای وارد کردن و انتخاب داده ها، عناصری که کنترل ها را توصیف می کنند، عناصری که فیلدها را گروه بندی می کنند و دکمه هایی برای ارسال فرم وجود دارد.

عناصر فرم چیست؟

دو عنصر <input> ، <input type="text"> و <input type="file"> را مشاهده می کنید. چرا آنها متفاوت به نظر می رسند؟

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

برچسب برای عناصر فرم

فرض کنید می خواهید یک ورودی اضافه کنید تا کاربر بتواند رنگ مورد علاقه خود را وارد کند. برای این کار باید یک عنصر <input> را به فرم خود اضافه کنید. اما، چگونه کاربر می داند که باید رنگ مورد علاقه خود را پر کند؟

برای توصیف کنترل‌های فرم، از یک <label> برای هر کنترل فرم استفاده کنید.

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

ویژگی for در عنصر برچسب با ویژگی id در ورودی مطابقت دارد.

گرفتن ورودی کاربر

همانطور که از نام آن پیداست، عنصر <input> برای جمع آوری ورودی از کاربران استفاده می شود.

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

همانطور که قبلا ذکر شد، ویژگی id <input> را به <label> متصل می کند. در مورد ویژگی name و type در این مثال چطور؟

ویژگی نام

از ویژگی name برای شناسایی داده هایی که کاربر با کنترل وارد می کند استفاده کنید. در صورت ارسال فرم، این نام در درخواست گنجانده شده است. بگویید که نام یک mountain کنترل فرم را گذاشته اید و کاربر Gutenberg را وارد کرده است، این درخواست شامل این اطلاعات به عنوان mountain=Gutenberg است.

سعی کنید نام کنترل فرم را به hill تغییر دهید . اگر این کار را به درستی انجام دهید و فرم را ارسال کنید، hill در URL قابل مشاهده است.

نوع ورودی

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

با استفاده از type="checkbox" مرورگر اکنون به جای یک فیلد متنی، یک چک باکس را نمایش می دهد. چک باکس همچنین دارای ویژگی های اضافی است. می‌توانید ویژگی checked را تنظیم کنید تا آن را علامت زده نشان دهد.

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

چند خط متن را مجاز کنید

مثلاً به فیلدی نیاز دارید که در آن کاربر بتواند نظر بنویسد. برای این، آیا عالی نیست اگر آنها بتوانند چندین خط متن را وارد کنند؟ این هدف عنصر <textarea> است.

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

از لیست گزینه ها انتخاب کنید

چگونه به کاربران لیستی از گزینه ها را برای انتخاب می دهید؟ برای رسیدن به این هدف می توانید از عنصر <select> استفاده کنید.

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

ابتدا یک عنصر <select> را اضافه می کنید. مانند سایر کنترل‌های فرم، آن را با ویژگی id به <label> متصل می‌کنید و با استفاده از ویژگی name به آن یک نام منحصربفرد می‌دهید.

در بین تگ شروع و پایان عنصر <select> ، می‌توانید چندین عنصر <option> را اضافه کنید که هر کدام یک انتخاب را نشان می‌دهند.

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

اگر فرم را با استفاده از این <select> بدون تغییر انتخاب ارسال کنید، درخواست شامل color=orange می شود. اما مرورگر چگونه می داند که کدام گزینه باید استفاده شود؟

مرورگر از اولین گزینه در لیست استفاده می کند، مگر اینکه:

• یک عنصر <option> دارای ویژگی selected است.
• کاربر گزینه دیگری را انتخاب می کند.

یک گزینه را از قبل انتخاب کنید

با ویژگی selected می توانید یک گزینه را از قبل انتخاب کنید. بدون توجه به ترتیبی که عناصر <option> تعریف می شوند، این به صورت پیش فرض می شود.

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

گاهی اوقات لازم است کنترل های فرم را گروه بندی کنید. برای این کار می توانید از عنصر <fieldset> استفاده کنید.

<fieldset>
    <legend>What is your favorite web technology</legend>

    <label for="html">HTML</label>
    <input type="radio" name="webfeature" value="html" id="html">

    <label for="css">CSS</label>
    <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

آیا متوجه عنصر <legend> در داخل عنصر <fieldset> شده‌اید؟ به نظر شما چه کاربردی دارد؟

اگر پاسخ شما "برای توصیف گروه کنترل های فرم" است، حق با شماست!

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

ارسال فرم

پس از یادگیری نحوه افزودن کنترل های فرم و گروه بندی آنها، ممکن است تعجب کنید که چگونه یک کاربر می تواند فرم ارسال کند؟

اولین گزینه استفاده از عنصر <button> است.

<button>Submit</button>

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

همچنین می توانید از عنصر <input> با type="submit" به جای عنصر <button> استفاده کنید. ورودی درست مانند یک <button> به نظر می رسد و رفتار می کند. به جای استفاده از عنصر <label> برای توصیف <input> ، به جای آن از ویژگی value استفاده کنید.

<input type="submit" value="Submit">

علاوه بر این، زمانی که یک فیلد فرم دارای فوکوس است، می توان با استفاده از کلید Enter یک فرم ارسال کرد.

درک خود را بررسی کنید

دانش خود را از عناصر فرم آزمایش کنید

منابع

• عنصر برچسب
• عنصر ورودی
• عنصر textarea
• عنصر انتخاب
• عنصر مجموعه فیلد
• عنصر دکمه