Input Types in HTML

زي ما عرفنا في مقال Forms HTML، الـ <form> بتحتوي على عناصر إدخال عشان نجمع بيانات اليوزر. العنصر الأكثر استخدامًا جوه الفورم هو الـ <input>.

عنصر الـ <input>

ده أهم وأكتر عنصر بنستخدمه في الفورم. شكل ووظيفة الـ <input> بيتغيروا بشكل كبير جدًا حسب قيمة الـ type attribute اللي بنحدده.

الـ cheat sheet دي هتكون مرجع ليك عشان تختار الـ type المناسب لكل حالة. أغلب الـ inputs دي يفضل تستخدم معاها <label> عشان الـ accessibility.

أنواع الـ type للـ <input>

text

• الوظيفة: بيعمل حقل نصي عادي من سطر واحد (single-line text field) اليوزر يقدر يكتب فيه.
• ده الـ default value لو محددتش type.

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"> <!-- Standard text input -->

First name:

#### `password`

• الوظيفة: زي الـ text، بس القيمة اللي بتتكتب بتكون مخفية (obscured)، عشان كده مناسب للمعلومات الحساسة زي الباسوردات.
• الكلام بيظهر على شكل نقط أو نجوم.

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"> <!-- Input is masked -->

button

• الوظيفة: بيعرض زرار عادي تقدر تدوس عليه (clickable button).
• غالبًا بنستخدمه عشان ننفذ script (كود JavaScript) لما ندوس عليه باستخدام الـ onclick attribute.

<!-- Executes the msg() JavaScript function on click -->
<input type="button" value="Click me" onclick="msg()" />

• ملحوظة: ممكن برضه تعمل زراير باستخدام تاج الـ Buttons HTML. الميزة في <button> إنك تقدر تحط جواه محتوى زي نصوص وصور، مش مجرد قيمة في الـ value.

  <button onclick="alert('Are you sure you want to continue?')">
      <!-- Can contain images and text -->
      <img src="https://yourserver.com/button_img.jpg"
          alt="Submit the form" height="64" width="64">
          Confirm
  </button>

checkbox

• الوظيفة: بيعمل checkbox (مربع اختيار) بيسمح لليوزر يختار قيمة واحدة أو يلغي اختيارها.
• بنستخدمه لما يكون عند اليوزر مجموعة خيارات محدودة وعايزينه يقدر يختار صفر أو أكتر من الخيارات دي.

<!-- User can select zero or more options -->
<input type="checkbox" id="dog" name="likes" value="Dog"> <!-- Added name attribute -->
<label for="dog">I like dogs</label>
<input type="checkbox" id="cat" name="likes" value="Cat"> <!-- Added name attribute -->
<label for="cat">I like cats</label>

• عشان تخلي واحد منهم متعلم عليه بشكل افتراضي، استخدم الـ checked attribute:

  <input type="checkbox" id="bike" name="vehicle" value="bike" checked /> <!-- Pre-selected checkbox -->

radio

• الوظيفة: بيعرض radio button (زر اختيار دائري).
• بيسمح لليوزر يختار قيمة واحدة بس من بين مجموعة خيارات.
• بيتقدموا عادة في مجموعات (radio groups): مجموعة radio buttons ليهم نفس الـ name attribute. لما يكون ليهم نفس الـ name، اليوزر مينفعش يختار غير واحد بس منهم في نفس الوقت.

<!-- User can select only one option with the same name -->
<input type="radio" id="light" name="theme" value="Light"> <!-- Value is important -->
<label for="light">Light</label>
<input type="radio" id="dark" name="theme" value="Dark">
<label for="dark">Dark</label>

• زي الـ checkbox، ممكن تستخدم checked عشان تخلي اختيار افتراضي.
• الـ value هنا مهم جدًا عشان هو ده اللي بيتبعت للسيرفر لما اليوزر يختار الـ radio button ده.

submit

• الوظيفة: بيعرض زرار submit. لما اليوزر بيدوس عليه، بيبعت كل القيم اللي في الفورم للـ form-handler (اللي متحدد في الـ action attribute بتاع الفورم).
• اتكلمنا عنها بالتفصيل في submit HTML

<form action="myserver.com" method="POST">
  <!-- Other form elements go here -->
  <input type="submit" value="Submit" /> <!-- Submits the form data -->
</form>

• لو محطتش value للزرار، هياخد قيمة افتراضية (زي “Submit”).

reset

• الوظيفة: بيعرض زرار بيرجع كل قيم الفورم لقيمها الافتراضية (default values).

<input type="reset" value="Reset"> <!-- Resets form fields to default -->

date

• الوظيفة: بيعرض أداة تحكم (control) عشان اليوزر يدخل تاريخ (سنة، شهر، يوم) من غير وقت. شكل الأداة بيختلف حسب المتصفح.

<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="date_of_birth"> <!-- Date picker -->

• ممكن تستخدم min و max عشان تحدد مدى تواريخ مسموح بيه.

<form>  
  <label for="datemax">Enter a date before 1980-01-01:</label>  
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>  
  <label for="datemin">Enter a date after 2000-01-01:</label>  
  <input type="date" id="datemin" name="datemin" min="2000-01-02">  
</form>

datetime-local

• الوظيفة: بيعرض أداة تحكم عشان اليوزر يدخل تاريخ ووقت مع بعض (سنة، شهر، يوم، ساعة، دقيقة).

<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime"> <!-- Date and time picker -->

time

• الوظيفة: بيعرض أداة تحكم عشان اليوزر يدخل وقت (ساعة ودقيقة) من غير time zone.

<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt"> <!-- Time picker -->

month

• الوظيفة: بيعرض أداة تحكم عشان اليوزر يدخل شهر وسنة، من غير time zone.
• خد بالك: ده نوع جديد نسبيًا وممكن مش كل المتصفحات تدعمه. (اتأكد من Can I use)

<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth" min="1930-01" value="2000-01"> <!-- Month and year picker -->

week

• الوظيفة: بيعرض أداة تحكم عشان اليوزر يدخل تاريخ عبارة عن رقم الأسبوع في السنة والسنة نفسها، من غير time zone.
• خد بالك: ده برضه نوع جديد وممكن مش كل المتصفحات تدعمه.

<label for="week">Select a week:</label>
<input type="week" id="week" name="week"> <!-- Week and year picker -->

email

• الوظيفة: بيعمل حقل مخصص لعنوان البريد الإلكتروني (email address).
• بيبقى شبه الـ text العادي، لكن المتصفح بيعمله validation (تحقق) تلقائي إن الصيغة بتاعته صح لما تيجي تعمل submit للفورم.
• بعض الموبايلات بتغير شكل الكيبورد عشان تسهل كتابة الإيميل (زي إضافة زرار .com).

<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"> <!-- Validates email format on submit -->

tel

• الوظيفة: بيعمل حقل مخصص لرقم التليفون.
• المتصفحات اللي مش بتدعمه بتتعامل معاه كأنه text.
• ممكن تستخدم الـ pattern attribute عشان تعمل validation على شكل الرقم المطلوب.

<label for="phone">Enter your phone number:</label>
<!-- The pattern attribute defines a regex for input validation -->
<input type="tel" id="phone" name="phone" pattern="[+]{1}[0-9]{11,14}"> <!-- Example pattern for international numbers -->

url

• الوظيفة: بيعمل حقل مخصص للـ URL (عنوان موقع ويب).
• زي الـ email، المتصفح بيعمله validation تلقائي للصيغة بتاعته عند الـ submit.
• بعض الموبايلات بتغير الكيبورد عشان تسهل كتابة الـ URL.

<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage"> <!-- Validates URL format on submit -->

file

• الوظيفة: بيعرض أداة تحكم بتسمح لليوزر يختار ملف من جهازه عشان يعمله upload. بيظهر زرار زي “Browse” أو “Choose File”.

<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"> <!-- File selection control -->

• الـ accept attribute: ممكن تستخدمه عشان تحدد أنواع الملفات المسموح بيها (المتصفح هيحاول يفلتر الملفات لليوزر، لكن ده مش بيمنع اليوزر يختار نوع تاني).

  <!-- Allow only PNG images -->
  <input type="file" accept="image/png" name="profilePicPng">
  <!-- Allow any image type -->
  <input type="file" accept="image/*" name="profilePicAny">

• الـ multiple attribute: لو ضفته، هيسمح لليوزر يختار أكتر من ملف في نفس الوقت.

  <!-- Allow multiple image file selections -->
  <input type="file" accept="image/*" name="galleryPics" multiple/>

hidden

• الوظيفة: بيعمل حقل إدخال بيكون مخفي ومش ظاهر لليوزر في الصفحة.
• فايدته إيه؟ بنستخدمه عشان نبعت بيانات للسيرفر اليوزر مش محتاج يشوفها أو يعدلها، زي مثلًا id بتاع عميل أو أي بيانات تتبع تانية.

<form>
    <label for="fname"> First name:</label>
    <input type="text" id="fname" name="fname"> <br><br>
    <!-- This field is hidden but its value is submitted -->
    <input type="hidden" id="custID" name="custId" value="3487">
    <input type="submit" value="Submit">
</form>

• تحذير: رغم إن الحقل ده مش ظاهر، أي حد يقدر يشوف قيمته ويعدلها باستخدام أدوات المطورين (developer tools) في المتصفح أو عن طريق “View Source”. أوعى تستخدمه كوسيلة أمان!

image

• الوظيفة: بيعرض صورة بتشتغل كأنها زرار submit رسومي (graphical submit button).
• لازم تستخدم الـ src attribute عشان تحدد مكان ملف الصورة.

<!-- Image acts as a submit button -->
<input type="image" src="submit_img.png" alt="Submit" width="48" height="48">

number

• الوظيفة: بيعمل حقل مخصص لإدخال الأرقام. المتصفح غالبًا بيعرض أسهم صغيرة عشان تزود أو تنقص الرقم.
• ممكن تستخدم attributes زي min, max, step عشان تحط قيود على الأرقام المسموحة.

<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"> <!-- Numeric input with range -->

range

• الوظيفة: بيعرض widget (زي slider أو مؤشر) عشان اليوزر يختار رقم في مدى معين. القيمة الدقيقة نفسها مش بتكون مهمة أوي زي في حالة الـ number.
• بنستخدم min و max عشان نحدد المدى المسموح. القيمة الافتراضية للمدى هي من 0 لـ 100.

<label for="volume">Volume:</label>
<!-- Slider control for selecting a value in a range -->
<input type="range" id="volume" name="volume" min="0" max="10">

search

• الوظيفة: بيعمل حقل نصي مخصص لكتابة استعلامات البحث (search query).
• من ناحية الوظيفة هو زي الـ text بالظبط، لكن ممكن المتصفح يعرضه بشكل مختلف شوية (زي إنه يحط علامة x صغيرة لمسح النص).

<label for="gsearch">Search in Google:</label>
<input type="search" id="gsearch" name="gsearch"> <!-- Text input styled for search -->

color

• الوظيفة: بيعمل حقل بيسمح لليوزر يختار لون (غالبًا بيفتح color picker).
• مش مدعوم في المتصفحات القديمة (زي IE). اتأكد من Can I use.

<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor"> <!-- Color picker control -->

أهم الـ Attributes لعناصر الـ <input> (وغيرها)

اتكلمنا عن الـ Attributes HTML قبل كدا

غير الـ type، فيه attributes تانية مهمة جدًا بنستخدمها مع الـ <input> وعناصر تانية في الفورم:

name

• الأهمية: ضروري جدًا لأي Input type عايز تبعت قيمته للسيرفر.
• وظيفته: بيحدد اسم الحقل ده. لما الفورم بتتبعت، البيانات بتوصل للسيرفر على شكل name=value.
• لو حذفت الـ name attribute، قيمة الحقل ده مش هتتبعت أصلًا.
• لغات الـ Backend بتستخدم الـ name ده عشان تعرف كل قيمة جاية بتاعة أنهي حقل بالظبط.

<!-- Server-side will receive: firstname=Mahmoud -->
<input id="fname" type="text" name="firstname" />

• ملحوظة: مينفعش تكرر نفس الـ name لعناصر مختلفة في نفس الفورم إلا في حالة الـ radio buttons (عشان تعمل مجموعة) أو الـ checkboxes (لو عايز تجمع القيم في list أو array في الـ backend). لو كررت الـ name لعناصر text مثلًا، ممكن يعمل override (آخر قيمة هي اللي هتتبعت) وده هيسبب مشاكل.

value

• الوظيفة: بيحدد القيمة المبدئية (initial value) للحقل.
• مهم جدًا مع الـ checkbox والـ radio عشان هو ده اللي بيحدد القيمة اللي هتتبعت للسيرفر لما اليوزر يختار العنصر ده.
• مع الـ text, password, وغيرها، بتبقى القيمة اللي ظاهرة في الحقل أول ما الصفحة تحمل.

<input type="text" id="fname" name="fname" value="John"> <!-- Field will initially contain "John" -->
<input type="radio" id="html" name="fav_language" value="HTML"> <!-- If selected, submits fav_language=HTML -->

readonly

• الوظيفة: بيخلي الحقل للقراءة فقط (read-only).
• اليوزر ميقدرش يعدل القيمة، لكن يقدر يوصله بالـ tab، ويعمل highlight للنص، وينسخه.
• مهم: قيمة الحقل الـ readonly بتتبعت مع الفورم لما تعمل submit.

<input type="text" id="fname" name="fname" value="John" readonly> <!-- Value cannot be changed by user, but is submitted -->

disabled

• الوظيفة: بيعطل الحقل (disabled).
• الحقل بيبقى غير قابل للاستخدام ومينفعش تدوس عليه أو تعدله. شكله كمان بيبقى باهت غالبًا.
• مهم: قيمة الحقل الـ disabled مش بتتبعت مع الفورم لما تعمل submit.

<input type="text" id="fname" name="fname" value="John" disabled> <!-- Field is unusable and value is NOT submitted -->

min و max

• الوظيفة: بيحددوا أقل قيمة (minimum) وأقصى قيمة (maximum) مسموحة للحقل.
• بيشتغلوا مع أنواع الـ input دي: number, range, date, datetime-local, month, time, week.
• ممكن تستخدمهم مع بعض عشان تحدد مدى معين للقيم المسموحة.

<input type="number" id="quantity" name="quantity" min="1" max="5"> <!-- Allows numbers between 1 and 5 -->
<input type="date" id="datemax" name="datemax" max="1979-12-31"> <!-- Latest allowed date -->

maxlength و minlength

• الوظيفة: بيحددوا أقصى (maximum) وأقل (minimum) عدد حروف مسموح بيه في الحقل.
• بنستخدمهم مع أنواع الإدخال النصية زي text, password, search, tel, url, email.

<input type="text" name="username" minlength="5" maxlength="15"> <!-- Defines allowed text length -->

placeholder

• الوظيفة: بيعرض نص تلميحي (hint) مؤقت جوه الحقل قبل ما اليوزر يبدأ يكتب.
• التلميح ده بيوصف القيمة المتوقعة (زي مثال أو وصف قصير للصيغة المطلوبة). بيختفي أول ما اليوزر يكتب.
• بيشتغل مع أنواع الـ input دي: text, search, url, number, tel, email, password.

<input type="tel" id="phone" name="phone" placeholder="123-45-678"> <!-- Hint shown before user types -->

autofocus

• الوظيفة: بيخلي الـ focus (مؤشر الكتابة) يروح على الحقل ده تلقائيًا أول ما الصفحة تحمل.
• المفروض تستخدمه مرة واحدة بس في الصفحة.

<input type="text" id="fname" name="fname" autofocus> <!-- Gets focus automatically on page load -->

required

• الوظيفة: بيوضح إن الحقل ده مطلوب (required)، واليوزر لازم يدخل فيه قيمة ومينفعش يسيبه فاضي.
• لو اليوزر حاول يعمل submit والفورم فيها حقل required فاضي، المتصفح هيمنع الـ submission وهيطلع رسالة تنبيه.

<input type="email" name="email" required> <!-- This field must be filled out -->

checked

• الوظيفة: بيخلي الـ checkbox أو الـ radio button متعلم عليه (checked) بشكل افتراضي أول ما الصفحة تحمل.

<input type="radio" id="html" name="fav_language" value="HTML" checked> <!-- Default selected radio -->
<input type="checkbox" id="agree" name="agree" checked> <!-- Default checked checkbox -->

pattern

• الوظيفة: بيسمحلك تحدد regular expression (تعبير نمطي) القيمة اللي اليوزر بيدخلها لازم تطابقه عشان تعتبر صحيحة.
• ده بيوفر طريقة قوية للـ client-side validation لأشكال معقدة.
• بيشتغل مع أنواع زي text, tel, email, url, password, search.

<!-- Validates input against a regular expression -->
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>

step

• الوظيفة: بيحدد الزيادة أو النقصان المسموح بيها في القيمة لما تستخدم الأسهم (مع type="number") أو الـ slider (مع type="range").

<!-- Defines the allowed increments for number/range inputs -->
<input type="number" name="points" step="5" min="0" max="50"> <!-- Allowed values: 0, 5, 10... -->

عناصر تانية مهمة في الفورم

عنصر الـ <select>

• الوظيفة: بيعمل قايمة منسدلة (drop-down list).

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
    <!-- Options for the dropdown list -->
    <option value="0">Volvo</option>
    <option value="1">fiat</option>
    <option>lambo</option> <!-- If value is omitted, text content is used -->
    <option>mpw</option>
</select>

• عنصر <option>: كل عنصر جوه القايمة بنعرفه باستخدام <option>.
  • الـ value attribute هو القيمة اللي هتتبعت للسيرفر لو اليوزر اختار الـ option ده.
  • النص اللي بين <option> و </option> هو اللي بيظهر لليوزر في القايمة.
• الاختيار الافتراضي: أول <option> في القايمة هو اللي بيكون مختار افتراضيًا.
• الـ selected attribute: عشان تخلي option معين هو اللي مختار افتراضيًا، ضيفله الـ selected attribute.

  <option value="fiat" selected>Fiat</option> <!-- This option is pre-selected -->

• الـ size attribute: بيحدد عدد الخيارات اللي بتكون ظاهرة في القايمة من غير ما تفتحها. لو أكبر من 1، شكلها بيتغير من قايمة منسدلة لـ list box.

  <!-- Displays 3 options at once -->
  <select id="cars" name="cars" size="3">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
  </select>

  
• الـ multiple attribute: لو ضفته، بيسمح لليوزر يختار أكتر من option في نفس الوقت (غالبًا عن طريق الضغط على Ctrl أو Shift مع الكليك).

  <!-- Allows multiple selections (usually with Ctrl/Shift + click) -->
  <select id="cars" name="cars" size="4" multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
  </select>

عنصر الـ <textarea>

• الوظيفة: بيعمل حقل إدخال نصي متعدد الأسطر (multi-line input field). مناسب للنصوص الطويلة زي الرسايل أو التعليقات.

<!-- Defines the initial visible size -->
<!-- The text between tags is the default value -->
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

• الـ rows attribute: بيحدد الارتفاع المبدئي للحقل بعدد السطور الظاهرة.
• الـ cols attribute: بيحدد العرض المبدئي للحقل بعدد الحروف التقريبي في السطر.
• ملحوظة: ممكن برضه تتحكم في حجم الـ <textarea> باستخدام CSS.

كده يبقى غطينا معظم أنواع الـ <input> المشهورة والـ attributes المهمة اللي بنستخدمها في بناء الـ Forms HTML.