تطبيق Form Floating Labels
-
بنحكي في هذا الدرس عن تطبيق Floating Labels، والي بيعمل على اضافة مظهر اكثر جمالات واكثر تنسيقا على form. بنطبق هون class باسم form-floating. الي بيعمل على تحريك label الى الأعلى في controll بحركة جميلة.
حتى نفهم الفكره نطبق مثال.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
</div>
</body>
</html>
النتيجة:
اكيد لاحظت ان عند النقر في text box الأول تم تحريك النص Email address الى الأعلى. ونفس الكلام بالنسبة ل Password.
تمام نفهم شو عملنا.
في الكود الخاص ب Email اضفنا <Div> وطبقنا عليه class باسم form-floating الي بيعمل على اضافة الحركة. بعد هيك اضفنا <input> من نوع email، وعملنا Id يساوي floatingInput وربطنا هاذ id مع <label> الي بيحتوي على النص المطلوب عرضو فوق. باستخدام الكود:
for="floatingInput"
الكود الكامل :
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
اضافة قيمة افتراضية Value
يمكن اضافة قيمة افتراضية ل input
بنعدل الكود السابق الى :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]" value="[email protected]">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password" value="Password">
<label for="floatingPassword">Password</label>
</div>
</div>
</body>
</html>
النتيجة:
وهذا الحكي يمكن تطبيقة على جميع control
اترك تعليقك