HTML Forms

فرم HTML چیست؟

فرم HTML قسمتی از صفحه وب است که شامل المان‌های تعاملی است و کاربران می‌توانند اطلاعات وارد کنند و آن‌ها را برای پردازش به سرور ارسال کنند.

ساختار پایه فرم

       <form action=“آدرس-ارسال” method=“post”>

       <label for=“name”>نام:</label>

       <input type=“text” id=“name” name=“name” />

      <label for=“email”>ایمیل:</label>

      <input type=“email” id=“email” name=“email” />

      <input type=“submit” value=“ارسال” />

</form>

• <form>: فرم را تعریف می‌کند.

• action: آدرسی که داده‌های فرم پس از ارسال به آن فرستاده می‌شوند.

• method: روش ارسال داده‌ها (GET یا POST).

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

• متن ساده: <input type="text" />

• رمز عبور: <input type="password" />

• ایمیل: <input type="email" />

• دکمه‌های رادیویی (انتخاب یک گزینه): <input type="radio" />

• چک‌باکس (انتخاب چند گزینه): <input type="checkbox" />

• متن چند خطی: <textarea></textarea>

• لیست کشویی: <select><option>...</option></select>

• دکمه ارسال: <input type="submit" /> یا <button type="submit">

نمونه فرم تماس

   <form action=“/send-message” method=“post”>

   <label for=“fullname”>نام کامل:</label>

   <input type=“text” id=“fullname” name=“fullname” required />

   <label for=“email”>ایمیل:</label>

   <input type=“email” id=“email” name=“email” required />

   <label for=“message”>پیام:</label>

   <textarea id=“message” name=“message” rows=“5” required></textarea>

   <button type=“submit”>ارسال</button>

</form>

اعتبارسنجی فرم با HTML5

• افزودن required برای الزامی کردن پر کردن فیلد.

• استفاده از انواع ورودی مانند email، url، number برای بررسی خودکار فرمت.

• استفاده از minlength، maxlength و pattern برای کنترل بیشتر.