HTML Input Types
-
HTML Form هو مكان في صفحة HTML يحتوي على مجموعه من controls وتسمى أيضا input elements مثل ( input textbox، checkboxes، radio buttons، submits buttons ... الخ) ويتم من خلاله تجميع البيانات المدخلة من input elements عن طريق المستخدم.
تمام
طريقة الكتابة :
<form>
<!--form elements-->
</form>
مثال :
نعمل محاكاه لشاشة تسجيل الدخول
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="">
<label for="fname">User Name:</label><br>
<input type="text" id="UserName" name="username"><br>
<label for="lname">Password:</label><br>
<input type="text" id="Password" name="Password" ><br><br>
<input type="submit" value="Login">
</form>
</body>
</htm>
نتيجة التنفيذ:
نفهم الكود:
<form action="">
<label for="fname">User Name:</label><br>
<input type="text" id="UserName" name="username"><br>
<label for="lname">Password:</label><br>
<input type="text" id="Password" name="Password" ><br><br>
<input type="submit" value="Login">
</form>
لاحظ بدأنا ب form>tag> وعملنا attribute لها action. هون بتم ربط هذا form مع server لغرض تنفيذ الامر المطلوب.
في داخل هذا <Form> اضفنا مجموعه من elements وهي
<label>،<input type="text"> ، <input type="submit">
عند النقر فوق submit يتم استدعاء function الي تم تحدديه في البداية في action attribute
نتعرف اكثر على input> element>
يستخدم هذا element في أكثر من مكان وبأكثر من طريقة بالاعتماد على type attribute:
وفيما يلي هذه الأنواع مع مثال لكل نوع:
<input type="button">
يستخدم لتعريف button بهدف القيام بعمل محدد يحتاج الى النقر ويمكن اضافته في أي مكان في صفحة HTML ولا يشترط ان يكون داخل form وعادتا ما يستخدم مع JavaScript.
طبق الكود التالي في صفحة HTML
<html>
<head>
<title>
HTML input type="button"
</title>
</head>
<body style="text-align:center;">
<h1>devkum</h1>
<input type="button"
onclick="send()"
value="Clic on button to get value">
<script>
function send() {alert("مرحبا بكم في ديفكوم");}
</script>
</body>
</html>
<input type="submit">يستخدم لتعريف button بهدف القيام بعمل محدد يحتاج الى submit ويجب ان يكون داخل form ويمكن أيضا استخدام JavaScript.طبق الكود التالي في صفحة HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="CheckUserNamePssword">
<label for="fname">User Name:</label><br>
<input type="text" id="UserName" name="username"><br>
<label for="lname">Password:</label><br>
<input type="text" id="Password" name="Password" ><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
شغل الصفحة وشوف النتيجة .
اكيد اذا نقرت على login بتشوف ان تم استدعاء CheckUserNamePssword وارسال Parameters ل Username , Password . اكيد بتكون النتيجة خطأ بسبب ان ما عملنا هذا action المسمى CheckUserNamePssword
النتيجة بعد النقر على login بتكون:
وهذا ال action المسمى CheckUserNamePssword بكون Server side يعني لازم نعمل هذا action للتحقق من صحة اسم المستخدم وكلمة المرور من قواعد البيانات.
<input type="checkbox">
تستخدم لتعريف checkbox (اختيار واحد او أكثر من مجموعة اختيارات)
مثال :
طبق الكود التالي:
<html>
<head>
<title>
HTML input type="checkbox"
</title>
</head>
<body style="text-align:center;">
<h1> Choose the menu</h1>
<input type="checkbox" id="Food1" name="Food1" value="Salad">
<label for="Food1"> Salad</label><br>
<input type="checkbox" id="Food2" name="Food2" value="Sweet">
<label for="Food2"> Sweet</label><br>
<input type="checkbox" id="Food3" name="Food3" value="Soup">
<label for="Food3"> Soup</label><br>
<input type="checkbox" id="Food4" name="Food4" value="Main Course">
<label for="Food4"> Main Course</label>
</body>
</html>
<input type="color">
يستخدم هذا input لتحديد الألوان، والألوان تعتمد على المتصفح
طبق الكود التالي في صفحة HTML:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Forms</h2>
<form action="GetColor">
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" >
<input type="submit" value="Submit">
</form>
</body>
</html>
النتيجة :
<input type="date">
يستخدم هذا input لاختيار التاريخ ، واكيد حسب المتصفح اذا كان بدعم او لا
طبق الكود التالي :
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Forms</h2>
<form action="GetColor">
<label for="Appointment">Appointment Date :</label>
<input type="date" id="Appointment" name="Appointment">
<input type="submit" value="Submit">
</form>
</body>
</html>
النتيجة:
<input type="datetime-local">
يستخدم هذا input لاختيار التاريخ والوقت (no time zone)، واكيد حسب المتصفح اذا كان بدعم او لا
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Forms</h2>
<form action="GetColor">
<label for="Appointment">Appointment Date :</label>
<input type="datetime-local" id="Appointment" name="Appointment">
<input type="submit" value="Submit">
</form>
</body>
</html>
النتيجة:
<input type="email">
يستخدم لإدخال البريد الإلكتروني، وبناء على نوع المتصفح يمكن ان يتم التحقق من صيغة البريد إذا كانت صحيحه ام لا.
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Forms</h2>
<form action="GetEmail">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
النتيجة:
<input type="file">
يستخدم هذا input لاختيار الملفات بهدف تحميلها الي الموقع او التطبيق.
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Forms</h2>
<form action="UploadFile">
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<input type="submit" value="Submit">
</form>
</body>
</html>
النتيجة:
<input type="hidden">
يستخدم هذا input لإضافة حقول مخفيه تساعد المطورين على تضمين البيانات بحيث لا يمكن للمستخدمين مشاهدتها او التعديل عليها.
ملاحظة: بالرغم من ان هذا input مخفي ولا يتم عرض القيمة عل المتصفح، الا انه يمكن الوصول اليها من خلال أدوات المطورين (browser@@#s developer tools) الموجودة في المتصفحات او من خال عرض الكود المصدر للصفحة (View Source). لذلك يجب الانتباه جيدا عند استخدام هذا input (مثلا لا يستخدم مع البيانات المهمة لأغراض security)
<"input type="image>
يستخدم هذا input لإضافة الصور الى الصفحات
طبق الكود التالي:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Forms</h2>
<form action="UploadFile">
<input type="image" id="Car" name="Car" src="mercedes-benz-s-class.jpg">
</form>
</body>
</html>
النتيجة:
<input type="month">
يستخدم هذا input لاختيار الشهر والسنه، واكيد بالاعتماد على نوع المتصفح اذا كان يدعم او لا.
طبق الكود التالي:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Forms</h2>
<form action="GetMonth">
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
<input type="submit" value="Submit">
</form>
</body>
</html>
النتيجة:
<"input type="number>
يستخدم هذا input لإدخال قيم صحيحه فقط numeric ، ويمكن إضافة قيود على الأرقام المقبولة في الادخال .
طبق الكود التالي:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Forms</h2>
<form action="GetQuantity">
<label for="quantity">Quantity (between 1 and 10) :</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">
<input type="submit" value="Submit">
</form>
</body>
</htm>
النتيجة:
حاول ادخال رقم اكير من 10 وشوف النتيجة (اكيد ما بتقدر).
<"input type="password>
يستخدم هذا input عند التعامل مع كلمة المرور، ويعمل على اظهار البيانات المدخلة بشكل نجوم او غيرها.
طبق الكود التالي :
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="">
<label for="fname">User Name:</label><br>
<input type="text" id="UserName" name="username"><br>
<label for="lname">Password:</label><br>
<input type="password" id="Password" name="Password" ><br><br>
<input type="submit" value="Login">
</form>
</body>
</htm>
النتيجة
<"input type="radio>
يستخدم هذا input لتعريف radio button (اختيار واحد لا أكثر من مجموعة اختيارات).
طبق الكود التالي:
<html>
<head>
<title>
HTML input type="checkbox"
</title>
</head>
<body style="text-align:center;">
<h1> Choose one of following </h1>
<input type="radio" id="Food1" name="Food" value="Salad">
<label for="Food1"> Salad</label><br>
<input type="radio" id="Food2" name="Food" value="Sweet">
<label for="Food2"> Sweet</label><br>
<input type="radio" id="Food3" name="Food" value="Soup">
<label for="Food3"> Soup</label><br>
<input type="radio" id="Food4" name="Food" value="Main Course">
<label for="Food4"> Main Course</label>
</body>
</html>
لاحظ ان attribute المسمى "name="Food واحد للجميع والسبب : لان مسموح باختيار واحد فقط وبهاذي الطريقة يتم عمل ذلك
النتيجة:
حاول تختار أكثر من اختيار وشوف النتيجة.
<"input type="range>
يستخدم هذا input لتعريف عنصر تحكم control لإدخال رقم قيمته الدقيقة ليست مهمة (مثل شريط التمرير slider control). والقيمة الافتراضية بين 0 الى 100. واكيد بتقدر تغيير هذه الاعدادات باستخدام attribute التالية min، max، step.
طبق الكود التالي :
<html>
<head>
<title>
HTML input type="checkbox"
</title>
</head>
<body style="text-align:center;">
<label for="vol">Volume (between 0 and 100):</label>
<input type="range" id="vol" name="vol" min="0" max="100">
</body>
</html>
النتيجة:
<"input type="reset>
يستخدم هذا input لتعريف reset button بهدف إعادة جميع القيم في form الى default value.
طبق الكود التالي:
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="">
<label for="fname">User Name:</label><br>
<input type="text" id="UserName" name="username"><br>
<label for="lname">Password:</label><br>
<input type="password" id="Password" name="Password" ><br><br>
<input type="submit" value="Login">
<input type="reset">
</form>
</body>
</htm>
النتيجة:
جرب دخل اسم المستخدم وكلمة المرر وبعدها اضغط على Reset وشوف النتيجة
<"input type="search>
يستخدم هذا input لتعريف search fields (search fields هو نفس regular text field)
طبق الكود التالي :
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="">
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
<input type="submit" value="Submit">
</form>
</body>
</htm>
النتيجة:
<"input type="tel>
يستخدم هذا input لتعريفinput من نوع الهاتف،.(اكيد يمكن التحكم بشكل الهاتف المطلوب)
طبق المثال التالي :
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="">
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="00962-0000-0000" pattern="[0-9]{5}-[0-9]{4}-[0-9]{4}" required><br><br>
<small>Format: 00962-0000-0000</small><br><br>
<input type="submit" value="Submit">
</form>
</body>
</htm>
النتيجة :
<"input type="text>
يستخدم هذا input لتعريف input لإدخال نص مكون من سطر واحد فقط.
طبق المثال التالي :
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="">
<label for="fname">User Name:</label><br>
<input type="text" id="UserName" name="username"><br>
<label for="lname">Password:</label><br>
<input type="password" id="Password" name="Password" ><br><br>
<input type="submit" value="Login">
<input type="reset">
</form>
</body>
</htm>
النتيجة:
<"input type="time>
يستخدم هذا input للاختيار الوقت (no time zone).
طبق الكود التالي :
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="">
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
<input type="submit" value="Login">
<input type="reset">
</form>
</body>
</htm>
النتيجة:
<"input type="url>
يستخدم هذا input لإدخال عنوان الكتروني URL address. واكيد حسب نوع المتصفح يتم التحقق من صحة الصيغة.
طبق الكود التالي :
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="">
<label for="WebSite">Add your WebSite:</label>
<input type="url" id="WebSite" name="WebSite">
<input type="submit" value="Save">
<input type="reset">
</form>
</body>
</htm>
النتيجة:
لاحظ ان المتصفح اعترض على صيغة الموقع لان الادخال خطأ.
<"input type="week>
يستخدم هذا input باختيار الأسبوع والسنه . واكيد حسب نوع المتصفح اذا كان بدعم او لا.
طبق الكود التالي:
<!DOCTYPE html>
<html>
<body>
<h2>Login HTML Forms</h2>
<form action="">
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
<input type="submit" value="Save">
<input type="reset">
</form>
</body>
</htm>
النتيجة:
القيود التي يمكن تطبيقها في input
| Attribute | الوصف |
| checked | يتم اختيار input مسبقًا عند تحميل الصفحة (تستخدم مع checkbox، أو radio |
| disabled | تعطيل input |
| max | تحديد حد أعلى لقيمة input |
| maxlength | تحديد اقصى حجم ممكن إدخاله (مسموح ادخال مثلا 150 character ) |
| min | تحديد حد أدنى لقيمة input |
| pattern | تحديد regular expression مثل صيغة البريد الإلكتروني او صيغة الموقع الإلكتروني |
| readonly | Input فقط للقراء لا يمكن استخدامه |
| required | مطلوب يجب ادخال قيمة داخل هذا input |
| size | تحديد العرض width (in characters) ل input |
| Step | يحدد legal number intervals ل input |
| value | تحديد قيمة افتراضية ل input |
اترك تعليقك