حقل إدخال

  • 11/03/2024
    3

    نص توضيحي افتراضي في حقول الإدخال

    لإضافة نص توضيحي افتراضي إلى حقل إدخال نصي في صفحة الويب الخاصة بك، يمكنك استخدام خاصية placeholder في عنصر input في HTML، وذلك على النحو التالي:

    html
    @Html.TextBoxFor(m => m.Name, new { placeholder = "اكتب اسمك هنا" })

    أو يمكنك استخدام EditorFor بنفس الطريقة:

    html
    @Html.EditorFor(m => m.Name, new { htmlAttributes = new { placeholder = "اكتب اسمك هنا" } })

    باستخدام الكود أعلاه، سيتم عرض نص “اكتب اسمك هنا” في حقل الإدخال، وعندما يقوم المستخدم بالنقر على الحقل للكتابة، سيتم حذف النص تلقائيًا، مما يسمح للمستخدم بإدخال النص الخاص به بدون أي اضطراب.

    المزيد من المعلومات

    لتعيين نص توضيحي افتراضي في حقل الإدخال، يمكنك استخدام خاصية placeholder في عنصر input في HTML، وذلك بتحديد النص المراد عرضه داخل القوسين بعد الوسم :

    html
    <input type="text" placeholder="اكتب اسمك هنا">

    يمكنك أيضًا استخدام هذه الطريقة مع @Html.TextBoxFor و @Html.EditorFor في ASP.NET MVC، ولكن يجب توخي الحذر لأنه قد يتعارض مع النموذج الخاص بك إذا كان يتوقع الحصول على بيانات أو قيم افتراضية. لذا، يُفضل استخدام هذا النمط عند الحاجة فقط لعرض نص توضيحي بسيط.

  • 08/03/2024
    3

    إنها تنسيق زر البحث في Bootstrap

    لتحقيق هذا الهدف، يمكنك استخدام بعض قواعد CSS لضبط ارتفاع الزر ليكون متساويًا مع حقل الإدخال. إليك كيف يمكن تحقيق ذلك:

    html
    html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap button inside input-grouptitle>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
/* Add this CSS to your stylesheet */
.input-group-btn {
    position: relative;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.input-group-btn>.btn {
    position: absolute;
    font-size: 12px; /* تعديل حجم الخط حسب الحاجة */
    height: 100%; /* جعل ارتفاع الزر يساوي ارتفاع حقل الإدخال */
}
style>
head>
<body>

<div class="container">
    <h2>Bootstrap button inside input-grouph2>
    <p>How to make it so that it appears nicely after input page with same height?p>
    
    <div class="input-group">
        <input type="text" class="form-control"/>
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit">
                <i class="fa fa-search">i>
            button>
        span>
    div>
div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">script>

body>
html>

    هذا التعديل يجعل ارتفاع زر البحث يساوي ارتفاع حقل الإدخال، ويضمن أنهما يظهران بشكل جيد معًا دون أية فجوات فارغة.

    المزيد من المعلومات

    لتحقيق التناسق في الظهور بين حقل الإدخال وزر البحث داخل عنصر input-group في Bootstrap، يمكنك استخدام بعض الأساليب الإضافية في CSS. على سبيل المثال، يمكنك تعيين ارتفاع زر البحث ليكون نفس ارتفاع حقل الإدخال، وذلك باستخدام height: 100% وتعيين padding مناسب للزر. إليك كيف يمكن تحقيق ذلك:

    html
    html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap button inside input-grouptitle>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
/* Add this CSS to your stylesheet */
.input-group-addon button {
    height: 34px; /* تعيين ارتفاع زر البحث */
    padding-top: 6px; /* تعيين البادنج العلوي للزر */
    padding-bottom: 6px; /* تعيين البادنج السفلي للزر */
}
style>
head>
<body>

<div class="container">
    <h2>Bootstrap button inside input-grouph2>
    <p>How to make it so that it appears nicely after input page with same height?p>
    
    <div class="input-group">
        <input type="text" class="form-control"/>
        <span class="input-group-addon">
            <button class="btn btn-default" type="submit">
                <i class="fa fa-search">i>
            button>
        span>
    div>
div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">script>

body>
html>

    هذا التعديل يجعل زر البحث يظهر بنفس ارتفاع حقل الإدخال، ويساعد في تحقيق التناسق المطلوب في التصميم.

  • 08/03/2024
    4

    إضافة أسماء ديناميكية باستخدام جافا سكريبت

    لإنشاء هذا السلوك في صفحة الويب الخاصة بك، يمكنك استخدام الجافا سكريبت. يمكنك بدايةً إنشاء عنصر input لإدخال النص وزر button لتفعيل الإضافة، وعنصر div لعرض الأسماء التي تم إدخالها. هناك طريقتان شائعتان لتحقيق ذلك، وإليك كلاهما:

    الطريقة الأولى: استخدام دالة جافا سكريبت مباشرة

    في هذه الطريقة، سنستخدم دالة جافا سكريبت onclick مباشرة في الزر لإضافة الأسماء. يمكنك استخدام الكود التالي:

    html
    html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>إضافة وعرض الأسماءtitle>
head>
<body>
<input type="text" id="nameInput">
<button onclick="addName()">إضافة الإسمbutton>
<div id="namesList">div>

<script>
function addName() {
    // الحصول على قيمة الإسم من حقل الإدخال
    var name = document.getElementById('nameInput').value;
    
    // إنشاء عنصر جديد لعرض الإسم
    var newNameElement = document.createElement('p');
    newNameElement.textContent = name;
    
    // إضافة الإسم إلى قائمة الأسماء
    document.getElementById('namesList').appendChild(newNameElement);
    
    // إفراغ حقل الإدخال لإضافة إسم جديد
    document.getElementById('nameInput').value = '';
}
script>
body>
html>

    الطريقة الثانية: استخدام الحدث والاستماع له

    في هذه الطريقة، سنستخدم معالج حدث خارجي للزر لإضافة الأسماء. يمكنك استخدام الكود التالي:

    html
    html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>إضافة وعرض الأسماءtitle>
head>
<body>
<input type="text" id="nameInput">
<button id="addNameButton">إضافة الإسمbutton>
<div id="namesList">div>

<script>
// العثور على زر الإضافة باستخدام الهوية وإضافة معالج حدث له
document.getElementById('addNameButton').addEventListener('click', function() {
    // الحصول على قيمة الإسم من حقل الإدخال
    var name = document.getElementById('nameInput').value;
    
    // إنشاء عنصر جديد لعرض الإسم
    var newNameElement = document.createElement('p');
    newNameElement.textContent = name;
    
    // إضافة الإسم إلى قائمة الأسماء
    document.getElementById('namesList').appendChild(newNameElement);
    
    // إفراغ حقل الإدخال لإضافة إسم جديد
    document.getElementById('nameInput').value = '';
});
script>
body>
html>

    هذه الأكواد تسمح للمستخدم بإدخال أسماء في حقل الإدخال وعرضها ديناميكيًا عند النقر على الزر. تأكد من وضع هذا الكود في صفحة HTML وتحديث المتصفح لرؤية التغييرات.

    المزيد من المعلومات

    بالطبع! يمكنك تحسين هذا الكود بإضافة بعض الخصائص الإضافية مثل التحقق من صحة الإدخال، وإمكانية الضغط على مفتاح Enter لإضافة الإسم، وتنظيم الكود بشكل أفضل. إليك النسخة المحسنة من الكود:

    html
    html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>إضافة وعرض الأسماءtitle>
<style>
    #namesList {
        margin-top: 10px;
    }
    .name {
        margin-bottom: 5px;
    }
style>
head>
<body>
<input type="text" id="nameInput">
<button id="addNameButton">إضافة الإسمbutton>
<div id="namesList">div>

<script>
// الحصول على عناصر الإدخال والزر وقائمة الأسماء
var nameInput = document.getElementById('nameInput');
var addNameButton = document.getElementById('addNameButton');
var namesList = document.getElementById('namesList');

// إضافة معالج حدث للزر وكذلك للضغط على مفتاح Enter
addNameButton.addEventListener('click', addName);
nameInput.addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        addName();
    }
});

function addName() {
    var name = nameInput.value.trim(); // إزالة الفراغات الزائدة من الإدخال
    
    if (name !== '') {
        var newNameElement = document.createElement('p');
        newNameElement.textContent = name;
        newNameElement.classList.add('name'); // إضافة الكلاس للتنسيق
        
        namesList.appendChild(newNameElement);
        nameInput.value = ''; // إفراغ حقل الإدخال
    } else {
        alert('الرجاء إدخال اسم صحيح.'); // إظهار رسالة خطأ عندما يكون الإدخال فارغًا
    }
}
script>
body>
html>

    هذا الكود يقوم بإضافة الأسماء إلى قائمة مع تنظيمها بشكل أفضل، كما يتحقق من صحة الإدخال ويعرض رسالة خطأ إذا كان الإدخال فارغًا. يمكنك تخصيص التنسيق بحسب احتياجاتك عن طريق تعديل الأنماط في الجزء الخاص بـ