حقول الإدخال
إضافة مربع نص
لإضافة مربع نص في الصفحة يمكنك استخدام الوسم <input> مع الإشارة إلى أن هذا الوسم يمكن استخدامه لإضافة الكثير من الأشياء الأخرى مثل الازرار والحقول والصور لاكن عند التحديد داخله بالنوع الدي تريد ان يظهر عليه.
يمكنك إضافة الخصائص التالية لهذا الوسم:
type لتحديد النوع أو الشكل الذي سيتم عرضه مكان الوسم في الصفحة.
value لإعطائه قيمة أولية.
id نضيفها له في حال أردنا ربطه بوسم <label>.
name نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.
readonly لجعل قيمته غير قابلة للتغيير.
disabled لجعله يظهر بلون باهت و قيمته غير قابلة للنسخ أو التغيير.
size لتحديد كم حرف تريد أن يظهر بداخل المربع (كأنك تحدد حجمه نسبةً لعدد الأحرف التي يمكن إدخالها فيه).
maxlength لتحديد أقصى عدد أحرف يمكن أن إدخلها فيه.
placeholder لإظهار تلميح بداخل مربع النص يظهر في حال كان فارغاً.
required يمكنك إضافتها له لإجبار المستخدم على إدخال قيمة في مربع النص في حال تركه فارغاً و نقر على زر إرسال البيانات.
ولتحديد النوع
<input type="text"> للحصول على مربع نص عادي و هذا هو النوع الإفتراضي له.
<input type="number"> للحصول على مربع نص مخصص لإدخال الرقام.
<input type="email"> للحصول على مربع نص مخصص لإدخال بريد إلكتروني.
<input type="password"> للحصول على مربع نص مخصص لإدخال كلمة المرور.
إفتراضياً في حال لم تحدد شكل الوسم <input> سيتم إعتبار أنك تريد عرض مربع نص عادي <input type="text">.
المثال : في هذا المثال قمنا بعرض مربع نص بدون تحديد نوعه.
<label for="username">Username</label><br>
<input id="username" name="username">
المثال : في المثال التالي قمنا بعرض مربع نص مخصص لإدخال بريد إلكتروني و مربع نص مخصص لإدخال كلمة مرور.
ملاحظة: هنا في حال لم يدخل المستخدم نص يشبه البريد الإلكتروني فإنه لن يتمكن من النقر على زر إرسال البيانات .
<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">
المثال : في المثال التالي قمنا بعرض مربع نص مخصص لإدخال رقم.
ملاحظة: هنا يسمح للمستخدم بإدخال أعداد فقط بداخل مربع النص.
<label for="age">Your age</label><br>
<input type="number" id="age" name="age">
المثال : في المثال التالي قمنا بإضافة قيمة أولية في مربع النص.
<label for="username">Username</label><br>
<input type="text" id="username" name="username" value="mhamad">
المثال : في المثال التالي قمنا بتحديد أن عدد الأحرف التي يمكن أن تظهر بداخل مربع النص هو 20 و عدد الأحرف الأقصى التي يمكن إدخالها فيه هو 25.
<label for="username">Username</label><br>
<input type="text" id="username" name="username" size="20" maxlength="25">
المثال : في المثال التالي قمنا بجعل قيمة مربع النص قابلة للقراءة فقط, أي لا يمكن تغييرها.
<label for="username">Username</label><br>
<input type="text" id="username" name="username" value="mhamad" readonly>
المثال : في المثال التالي قمنا بجعل مربع النص يظهر بشكل غير مفعّل مما يعني أنه يظهر بلون باهت و قيمته غير قابلة للنسخ أو التغيير.
<label for="username">Username</label><br>
<input type="text" id="username" name="username" value="mhamad" disabled>
المثال : في المثال التالي قمنا بجعل المستخدم مجبر على ملئ مربعات النصوص في حال تركها فارغة و نقر على زر إرسال البيانات.
<label for="email">Email</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password</label><br>
<input type="password" id="password" name="password" required>
المثال : في المثال التالي قمنا بجعل مربعات النصوص تظهر تلميحات في حال كانت فارغة.
<label for="email">Email</label><br>
<input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>
<label for="password">Password</label><br>
<input type="password" id="password" name="password" placeholder="Enter your password">
إضافة مربع نص متعدد الأسطر
نستخدم الوسم <textarea> على هذا النحو <textarea>text</textarea> لعرض مربع نص يتألف من أكثر من سطر. مكان الكلمة text نمرر كل النص الذي نريد عرضه بداخله.
في العادة نستخدم مربع نص متعدد الأسطر حين نطلب من المستخدم إدخال عنوانه أو نبذة عنه.
يمكنك إضافة الخصائص التالية لهذا الوسم:
id نضيفها له في حال أردنا ربطه بوسم <label>.
name نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.
readonly نضيفها له في حال أردنا جعل قيمته غير قابلة للتغيير.
disabled نضيفها له في حال أردنا جعله يظهر بلون باهت و قيمته غير قابلة للنسخ أو التغيير.
cols نضيفها له في حال أردنا تحديد كم حرف كحد أقصى يمكن أن يظهر فيه على نفس السطر, أي كأنك تحدد عرضه نسبةً لعدد الأحرف الأقصى التي يمكن إدخالها في كل سطر.
rows نضيفها له في حال أردنا تحديد كم سطر يمكن أن يظهر فيه في كل مرة, أي كأنك تحدد طوله نسبةً لعدد الأسطر التي تحددها له.
المثال : في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع وضع قيمة أولية فيه.
<label for="biography">Biography</label><br>
<textarea name="biography" id="biography">Harmash.com is published in 2014.</textarea>
المثال : في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد حجمه و جعله غير مفعّل, أي لا يمكن تغيير قيمته أو نسخها.
<label for="biography">Biography</label><br>
<textarea name="biography" id="biography" cols="40" rows="4" disabled>Harmash.com is published in 2014.</textarea>
المثال : في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد عدد الأحرف الأقصى التي يمكن أن تظهر في كل سطر و عدد الأسطر الإفتراضية التي ستظهر فيه.
<label for="biography">Biography</label><br>
<textarea name="biography" id="biography" cols="40" rows="4">Harmash.com is published in 2014.</textarea>
المثال: في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد حجمه و جعل قيمته قابلة للقراءة فقط.
<label for="biography">Biography</label><br>
<textarea name="biography" id="biography" cols="40" rows="4" readonly>Harmash.com is published in 2014.</textarea>
ليست هناك تعليقات:
إرسال تعليق
الموسوعة العامة تحتوي على كل ما يهمك من عمل أو تحميل للأفلام أو أخبار... مجانا