HTML / حقول الإدخال

الناشر :كودا فوكس -

HTML / حقول الإدخال

مفهوم حقول الإدخال

حقول الإدخال أو مربعات النصوص في صفحات الويب يمكن تصنيفها لنوعين أساسيين:

HTML / حقول الإدخال


  • مربع نص يتألف من سطر واحد حيث يظهر كل ما يكتبه المستخدم فيه على سطر واحد.
  • مربع نص متعدد الأسطر حيث يمكن أن يظهر ما يكتبه المستخدم فيه على أكثر من سطر.

في هذا الدرس سنتعرف على الوسوم التي تستخدم للحصول على مربعات نصوص بالإضافة لخصائصها.

إضافة مربع نص

لإضافة مربع نص في الصفحة يمكنك استخدام الوسم <input> مع الإشارة إلى أن هذا الوسم يمكن استخدامه لإضافة الكثير من الأشياء الأخرى و التي سنتعرف عليها في دروس لاحقة.

يمكنك إضافة الخصائص التالية لهذا الوسم:

  • id نضيفها له في حال أردنا ربطه بوسم <label>.
  • name نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.
  • type لتحديد النوع أو الشكل الذي سيتم عرضه مكان الوسم في الصفحة.
  • value لإعطائه قيمة أولية.
  • readonly لجعل قيمته غير قابلة للتغيير.
  • disabled لجعله يظهر بلون باهت و قيمته غير قابلة للنسخ أو التغيير.
  • size لتحديد كم حرف تريد أن يظهر بداخل المربع.
  • maxlength لتحديد أقصى عدد أحرف يمكن أن إدخالها فيه.
  • placeholder لإظهار تلميح بداخل مربع النص يظهر في حال كان فارغاً.
  • required لإجبار المستخدم على إدخال قيمة في مربع النص في حال تركه فارغاً.

تحديد نوع مربع النص

بالنسبة لنوع مربع النص الذي نحدده بواسطة الخاصية type فإن الأشكال التالية هي الأكثر أهمية:

  • <input type="text"> للحصول على مربع نص عادي.
  • <input type="password"> للحصول على مربع نص مخصص لإدخال كلمة المرور.
  • <input type="number"> للحصول على مربع نص مخصص لإدخال الأرقام.
  • <input type="email"> للحصول على مربع نص مخصص لإدخال بريد إلكتروني.

إفتراضياً، في حال لم تحدد شكل الوسم <input> سيتم إعتبار أنك تريد عرض مربع نص عادي <input type="text">.

خد الكواد نسخ واضغط هنا جرب الكود

في المثال التالي قمنا بعرض مربع نص بدون تحديد نوعه:

📋

المثال الأول

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
			<label for="username">Username</label><br>
            <!-- هنا قمنا بعرض مربع نص عادي بدون تحديد نوعه -->
			<input id="username" name="username"><br><br>
            <input type="submit">
        </form>
    </body>
</html>
ملاحظة: هنا في حال لم يدخل المستخدم نص يشبه البريد الإلكتروني فإنه لن يتمكن من النقر على زر إرسال البيانات.

في المثال التالي قمنا بعرض مربع نص مخصص لإدخال بريد إلكتروني و مربع نص مخصص لإدخال كلمة مرور:

📋

المثال الثاني

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
            <!-- هنا قمنا بعرض مربع نص مخصص لإدخال بريد إلكتروني -->
			<label for="email">Email</label><br>
			<input type="email" id="email" name="email"><br><br>

            <!-- هنا قمنا بعرض مربع نص مخصص لإدخال كلمة مرور -->
			<label for="password">Password</label><br>
			<input type="password" id="password" name="password"><br><br>
			
            <input type="submit">
        </form>
    </body>
</html>
ملاحظة: هنا يسمح للمستخدم بإدخال أعداد فقط بداخل مربع النص.

في المثال التالي قمنا بعرض مربع نص مخصص لإدخال رقم:

📋

المثال الثالث

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
			<label for="age">Your age</label><br>
            <!-- هنا قمنا بعرض مربع نص مخصص لإدخال أرقام -->
			<input type="number" id="age" name="age">
            <input type="submit">
        </form>
    </body>
</html>

في المثال التالي قمنا بتحديد أن عدد الأحرف التي يمكن أن تظهر بداخل مربع النص هو 20 و عدد الأحرف الأقصى التي يمكن إدخالها فيه هو 25:

📋

المثال الرابع

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
            <!-- هنا قمنا بتحديد أن مربع النص يمكن أن يظهر فيه 20 حرف و عدد الأحرف الأقصى التي يمكن إدخالها فيه هو 25 -->
			<label for="username">Username</label><br>
			<input type="text" id="username" name="username" size="20" maxlength="25">
			<br><br>
            <input type="submit">
        </form>
    </body>
</html>

في المثال التالي قمنا بإضافة قيمة أولية في مربع النص:

📋

المثال الخامس

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
			<label for="username">Username</label><br>
            <!-- كقيمة أولية في مربع النص "Ahmed" هنا قمنا بوضع الكلمة -->
			<input type="text" id="username" name="username" value="Ahmed"><br><br>
            <input type="submit">
        </form>
    </body>
</html>

في المثال التالي قمنا بجعل قيمة مربع النص قابلة للقراءة فقط، أي لا يمكن تغييرها:

📋

المثال السادس

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
			<label for="username">Username</label><br>
            <!-- لجعل المستخدم غير قادر على تغيير القيمة الموجودة فيه <input> للوسم readonly أضفنا الخاصية -->
			<input type="text" id="username" name="username" value="Ahmed" readonly><br><br>
            <input type="submit">
        </form>
    </body>
</html>

في المثال التالي قمنا بجعل مربع النص يظهر بشكل غير مفعّل مما يعني أنه يظهر بلون باهت و قيمته غير قابلة للنسخ أو التغيير:

📋

المثال السابع

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
			<label for="username">Username</label><br>
            <!-- لجعل مربع النص يظهر بشكل غير مفعّل <input> للوسم disabled أضفنا الخاصية -->
			<input type="text" id="username" value="Ahmed" disabled><br><br>
        </form>
    </body>
</html>

في المثال التالي قمنا بجعل مربعات النصوص تظهر تلميحات في حال كانت فارغة:

📋

المثال الثامن

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
            <!-- في حال كان فارغاً "Enter your email address" مربع النص المخصص لإظهار بريد إلكتروني جعلناه يظهر التلميح -->
			<label for="email">Email</label><br>
			<input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>

            <!-- في حال كان فارغاً "Enter your password" مربع النص المخصص لإظهار بريد إلكتروني جعلناه يظهر التلميح -->
			<label for="password">Password</label><br>
			<input type="password" id="password" name="password" placeholder="Enter your password"><br><br>
			
            <input type="submit">
        </form>
    </body>
</html>

في المثال التالي قمنا بجعل المستخدم مجبر على ملئ مربعات النصوص في حال تركها فارغة و نقر على زر إرسال البيانات:

📋

المثال التاسع

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
            <!-- لإعلام المتصفح بأن هذا الحقل لا يجب أن يكون فارغاً عند النقر على زر إرسال البيانات <input> للوسم required أضفنا الخاصية -->
			<label for="email">Email</label><br>
			<input type="email" id="email" name="email" required><br><br>

            <!-- لإعلام المتصفح بأن هذا الحقل لا يجب أن يكون فارغاً عند النقر على زر إرسال البيانات <input> للوسم required أضفنا الخاصية -->
			<label for="password">Password</label><br>
			<input type="password" id="password" name="password" required><br><br>
			
            <input type="submit">
        </form>
    </body>
</html>

إضافة مربع نص متعدد الأسطر

نستخدم الوسم <textarea> على هذا النحو <textarea>text</textarea> لعروض مربع نص يتألف من أكثر من سطر. مكان الكلمة text نمرر كل النص الذي نريد عرضه بداخله.

في العادة نستخدم مربع نص متعدد الأسطر حين نطلب من المستخدم إدخال عنوانه أو نبذة عنه.

في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع وضع قيمة أولية فيه:

📋

المثال الأول

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
			<label for="biography">Biography</label><br>
            <!-- هنا قمنا بعرض مربع نص يتألف من أكثر من سطر مع وضع نص فيه كقيمة أولية -->
			<textarea name="biography" id="biography">codafox.blogspot.com is published in 2024.</textarea>
			<br><br>
            <input type="submit">
        </form>
    </body>
</html>

في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد عدد الأحرف الأقصى التي يمكن أن تظهر في كل سطر و عدد الأسطر الإفتراضية التي ستظهر فيه:

📋

المثال الثاني

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
			<label for="biography">Biography</label><br>
            <!-- يمكن أن يظهر بداخله 40 حرف <textarea> هنا قمنا بتحديد أن الوسم 
			على نفس السطر كحد أقصى و تحديد أنه يظهر فيه 4 أسطر بشكل إفتراضي -->
			<textarea name="biography" id="biography" cols="40" rows="4">codafox.blogspot.com is published in 2024.</textarea>
			<br><br>
            <input type="submit">
        </form>
    </body>
</html>

في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد حجمه و جعل قيمته قابلة للقراءة فقط:

📋

المثال الثالث

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
			<label for="biography">Biography</label><br>
            <!-- لجعل المستخدم غير قادر على تغيير القيمة الموجودة فيه <textarea> للوسم readonly أضفنا الخاصية -->
			<textarea name="bigoraphy" id="biography" cols="40" rows="4" readonly>codafox.blogspot.com is published in 2024.</textarea>
			<br><br>
            <input type="submit">
        </form>
    </body>
</html>

في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد حجمه و جعله غير مفعّل، أي لا يمكن تغيير قيمته أو نسخها:

📋

المثال الرابع

<!DOCTYPE html>
<html>
    <body>
        <h1>Sample Form</h1>
        <form action="/tryit/submitted" method="post">
			<label for="biography">Biography</label><br>
            <!-- لجعل مربع النص يظهر بشكل غير مفعّل <textarea> للوسم disabled أضفنا الخاصية -->
			<textarea id="biography" cols="40" rows="4" disabled>codafox.blogspot.com is published in 2024.</textarea>
			<br><br>
            <input type="submit">
        </form>
    </body>
</html>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال