فرم‌ها و عناصر ورودی

<input list="browsers" name="browser">
<datalist id="browsers">
 <option value="Chrome">
 <option value="Firefox">
 <option value="Safari">
 <option value="Edge">
</datalist>    

9.3.5 <button>: دکمه فرم

• برای ارسال یا ریست فرم.
• ویژگی‌های کلیدی: type="submit" - type="reset" - type="button".

<button type="submit">ارسال</button>
<button type="reset">ریست</button>
<button type="button" onclick="alert('Hello')">نوشته</button>

9.3.6 <output>: نمایش نتیجه محاسبه

<label for="amount">مبلغ:</label>
<input type="number" id="amount" oninput="updateOutput()">
<output name="result" for="amount">0</output>
    
<script>
function updateOutput() {
const amount = document.getElementById("amount").value;
 document.querySelector("output").textContent = amount * 1.1;
 }
</script>

9.3.7 <meter> و <progress>: نمایش وضعیت

<meter min="0" max="100" value="75">75%</meter>
<progress value="50" max="100">50%</progress>

• <meter> برای مقادیر ثابت یا نسبی است.
• <progress> برای فرآیندهای در حال انجام.

9.4 اعتبارسنجی فرم در HTML5: امنیت و کیفیت داده

9.4.1 ویژگی‌های اعتبارسنجی داخلی

<input 
 type="text" 
 name="username" 
 pattern="[a-zA-Z]{3,}" 
 minlength="3" 
 maxlength="20" 
 required
 title="نام کاربری باید حداقل ۳ حرف باشد."
>

9.4.2 Constraint Validation API: اعتبارسنجی پیشرفته با JavaScript

<script>
const form = document.querySelector("form");
const input = document.querySelector("input");
    
form.addEventListener("submit", function (e) {
 if (!input.validity.valid) {
  e.preventDefault();
  alert("لطفاً فیلد را به درستی پر کنید.");
  }
});
 </script>

• validity.valid آیا فیلد معتبر است؟
• validity.valueMissing آیا فیلد خالی است؟
• validity.patternMismatch آیا الگوی مطابق است؟
• setCustomValidity() تعیین پیام خطای شخصی

<script>input.setCustomValidity("این فیلد الزامی است.");</script>

9.5 بهبود دسترسی‌پذیری فرم‌ها: از ساختار به اعتماد

9.5.1 <label>: ارجاع به فیلد

• هر فیلد باید دارای <label> باشد.
• استفاده از for="id" برای ارتباط با id فیلد.

<label for="email">ایمیل:</label>
<input type="email" id="email" name="email">

9.5.2 ویژگی‌های ARIA برای فرم‌ها

<input 
 type="email" 
 aria-label="ایمیل کاربر" 
 aria-invalid="true" 
 aria-describedby="error-email"
 >
<p id="error-email">ایمیل وارد شده معتبر نیست.</p>

بعدی

قبلی