خواندن ۴ دقیقه·۲ سال پیش

استفاده از محتوای دلخواه در اعتبار سنجی فرمها در HTML

چگونه محتوای دلخواهمان را برای فیلدهای دارای صفت required وارد کنیم؟

از رویداد استفاده میکنیم. رویداد زمانی رخ می دهد که یک عنصر <input> قابل ارسال، نامعتبر باشد.

ایجاد فرم های وب همیشه یک کار پیچیده بوده است. در حالی که علامت‌گذاری marking up خود فرم آسان است، بررسی اینکه آیا هر فیلد دارای ارزش معتبر و منسجمی است دشوارتر است، و اطلاع‌رسانی به کاربر در مورد مشکل ممکن است باعث سردرد شود. HTML5 مکانیسم‌های جدیدی را برای فرم‌ها معرفی کرد: نوع سیمانتیک semantic types جدیدی را برای عنصر <input> و اعتبارسنجی محدودیت constraint validation اضافه کرد تا کار بررسی محتوای فرم در سمت مشتری را آسان کند. محدودیت های معمولی و اولیه را می توان بدون نیاز به جاوا اسکریپت با تنظیم اتریبیوتهای (attributes) جدید بررسی کرد. محدودیت های پیچیده تر را می توان با استفاده از Constraint Validation API آزمایش کرد.

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

<input type=&quottext&quot =&quotalert('شما باید فرم را کامل پر کنید');&quot required>

نمونه کد کامل html:

<!DOCTYPE html>
<html>
<body>

<form action=&quot/action_page.php&quot method=&quotget&quot>
  Name: <input type=&quottext&quot =&quotalert('You must fill out the form!');&quot name=&quotfname&quot required>
  <input type=&quotsubmit&quot value=&quotSubmit&quot>
</form>

<p>If you click submit, without filling out the text field, an alert message will occur.</p>

<p><strong>Note:</strong> The  event is not supported in Safari.</p>

</body>
</html>

میتوانید کد بالا را در یک سربرگ جدید از نرم افزار notepad++ با فرمت html ذخیره کنید و سپس با مرورگر باز کنید. به عنوان تمرین میتوانید پیام نمایش داده شده ویرایش کنید و یک متن فارسی به جای آن بنویسید.

مطالعه بیشتر درباره Constraint validation و setCustomValidity

کمی درباره required بیاموزیم:

ویژگی requiredیک attribute یا صفت از نوع boolean است.
در صورت وجود، مشخص می کند که قبل از ارسال فرم، المان باید پُر (مثلا داخل کادر چیزی نوشته شود) شود.
روی المانهای زیر عمل میکند: input ، select ، textarea

در زیر یک مثال درباره فیلد input که دارای صفت required است ببینید.

یک فرم HTML دارای المان input:

<form action=&quot/action_page.php&quot>
    Username: <input type=&quottext&quot name=&quotusrname&quot required>
 <input type=&quotsubmit&quot>
 </form>

یک فرم HTML با لیست کشویی دارای اتریبیوت required:

<select required>
 <option value=&quot&quot>None</option>
 <option value=&quotvolvo&quot>Volvo</option>
 <option value=&quotsaab&quot>Saab</option>
 <option value=&quotmercedes&quot>Mercedes</option>
 <option value=&quotaudi&quot>Audi</option>
 </select>

یک فرم HTML با کادر متنی دارای اتریبیوت (صفت) required:

<form action=&quot/action_page.php&quot>
 <textarea name=&quotcomment&quot required></textarea>
 <input type=&quotsubmit&quot>
 </form>

در این لینک از W3Schools.com سه المان معرفی شده دربالا برای اتریبیوت required معرفی شدند.

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

text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, &lt;input&gt;,&lt;select&gt;,&lt;textarea&gt;

text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input>,<select>,<textarea>

اما چرا این دو منبع با هم متفاوت هستند؟

در حقیقت تفاوتی وجود ندارد، بلکه المان input دارای انواع زیر است:

text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file

پس آموختیم که سه المان کنترل فرم یعنی input, select, textarea میتوانند دارای اتریبیوت (صفت) required باشند.

:required یک کلاس از نوع است. زمانیکه این اتریبیوت برای المانها در فرم به کار نرود به صورت پیشفرض کلاس زیر به انها نسبت داده میشود: :optional

pseudo-classها کلمات کلیدی هستند که به انتخابگرها برای تعیین یک حالت خاص از عنصر انتخاب شده, اضافه می شوند.

یعنی چی اگر required برای یک المان فرم استفاده نکنیم روی optional تنظیم میشه؟ چه فایده ای داره؟

تصور کنید یک فرم HTML دارید که دارای فایل استایل با فرمت css است. در این فرم میخواهید دور کادر المانهایی که دارای required نیستند را رنگی کنید. مثل شکل زیر:

کد HTML برای ساخت فرم بالا:

<form>
  <div class=&quotfield&quot>
    <label for=&quoturl_input&quot>Enter a URL:</label>
    <input type=&quoturl&quot id=&quoturl_input&quot />
  </div>

  <div class=&quotfield&quot>
    <label for=&quotemail_input&quot>Enter an email address:</label>
    <input type=&quotemail&quot id=&quotemail_input&quot required />
  </div>
</form>

کد style.css برای ساخت فرم بالا:

<form>
  <div class=&quotfield&quot>
    <label for=&quoturl_input&quot>Enter a URL:</label>
    <input type=&quoturl&quot id=&quoturl_input&quot />
  </div>

  <div class=&quotfield&quot>
    <label for=&quotemail_input&quot>Enter an email address:</label>
    <input type=&quotemail&quot id=&quotemail_input&quot required />
  </div>
</form>

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

فایل css برای نتیجه بالا در زیر آمده است:

label {
    display: block;
    margin-top: 1em;
}

.req {
    color: red;
}

*:optional {
    background-color: palegreen;
}

آموزش برنامه نویسیhtmlآموزش html

سیداحمد

امیدوارم به بهتر شدن کمک کنم. در تلگرام و اینستاگرام پیام بفرست، SeyedAhmaddv - ارشد نرم افزار، توسعه دهنده ری اکت و نکست

شاید از این پست‌ها خوشتان بیاید