نماذج HTML

يجمع <form> بيانات المستخدم: تحدد action وجهة الإرسال وmethod طريقته (get أو post). يُكتب كل حقل بـ <input> ويُستخدم <label> لاسمه، وتربط السمة for الـ label بمعرّف الحقل id.

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Subscribe</button>
</form>

بدون السمة name لا تُرسَل قيمة الحقل. والنقر على label يفعّل الحقل وهذا مريح جدًا على الهاتف.

تُعلم السمة type المتصفح بغرض الحقل: text وemail وpassword وnumber وdate وcheckbox وradio وfile. يضبط النوع الصحيح لوحة المفاتيح على الهاتف ويجري التحقق. وللنص الطويل <textarea> وللقوائم المنسدلة <select>.

<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="checkbox" id="agree" name="agree"> <label for="agree">I agree</label>
<select name="city">
  <option value="baku">Baku</option>
  <option value="ganja">Ganja</option>
</select>
<textarea name="message" rows="4"></textarea>

• تُلزم required بملء الحقل.
• تضع minlength وmaxlength وmin وmax وpattern حدودًا.
• placeholder تلميح وليس بديلًا عن label.
• يرسل <button type="submit"> ويمسح type="reset".

التحقق في المتصفح للراحة فقط؛ وللأمان تحقق من البيانات في الخادم أيضًا دائمًا.

<input type="text" name="user" minlength="3" maxlength="20" required placeholder="Username">
<input type="text" name="zip" pattern="[0-9]{4}" title="4 digits">