مقدمه في Bootstrap 5 Forms
-
بنحكي في هذا الدرس عن أمثلة وإرشادات الاستخدام ل form control و layout options وبنحكي عن كيف ممكن نعدل ونغير في هذه classes لإنشاء مجموعة متنوعة من forms.
يمكن استخدام مجموعه كبيرة ومتنوعه من inputs وتطبيق classes المتعلقة ب Forms عليها مثل ( البريد الإلكتروني Email، معلومات رقمية numerical information، الهاتف Phone، كلمة المرور ... الخ).
تطبيق هذه classes على inputs بتساعد على التحكم بها بكل سهولة.
نطبق مثال صغير حتى نفهم الموضوع:
Stacked Form
بنطبق في المثال التالي امثلة على label, input ، checkbox ،
<!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>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
<form class="border m-5">
<div class="mb-3 m-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="mb-3 m-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check m-3">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Keep Login</label>
</div>
<div class="m-3 text-center">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
</div>
</body>
</html>
تمام نفهم شو عملنا.
اضفنا في المثال السابق مجموعه من control والي بتتكون من <label>, <input>
طبقنا class باسم form-label على label لضمان اضافة padding الصحيحة.
وطبقنا class باسم form-control على input بهدف اعطاءها الشكل الظاهر في الصورة. واكيد نوع كل input مختلف، الاول من نوع email والثاني من نوع password
طبقنا class باسم form-check-input على checkbox
طبقنا class باسم form-check-label على label الخاص ب checkbox
مثال على Textarea
<!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>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
<form class="border m-5">
<div class="mb-3 m-3">
<label for="exampleInputFN" class="form-label">Frist Name</label>
<input type="text" class="form-control" id="inputFisrtName" aria-describedby="emailHelp">
</div>
<div class="mb-3 m-3">
<label for="exampleInputSN" class="form-label">Second Name</label>
<input type="text" class="form-control" id="inputSecondName">
</div>
<div class="mb-3 m-3">
<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
</div>
<div class="m-3 text-center">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</body>
</html>
النتيجة:
التحكم بالحجم Form Control Size
مثل ما تعلمنا في الدروس السابقة بنقدر نتحكم بحجم control باضافة classes التالية:
الحجم العادي Normal هو الحجم الافتراضي. يطبق مع class المسمى form-control
حجم كبير بنستخدم class باسم form-control-lg
حجم صغير بنستخدم class باسم form-control-sm
تمام التمام نطبق مثال :
<!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>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
<form class="border m-5">
<div class="mb-3 m-3">
<label for="exampleInputNS" class="form-label">Normal Size</label>
<input type="text" class="form-control" id="inputNS">
</div>
<div class="mb-3 m-3">
<label for="exampleInputLS" class="form-label">Large Size</label>
<input type="text" class="form-control form-control-lg" id="inputLS" aria-describedby="emailHelp">
</div>
<div class="mb-3 m-3">
<label for="exampleInputSS" class="form-label">Small Size</label>
<input type="text" class="form-control form-control-sm" id="inputSS">
</div>
</form>
</div>
</body>
</html>
النتيجة:
عرض control داخل Gride (Inline Forms)
يمكن عرض Control على شكل grid بدل من عرضها فوق بعض . هذا الامر اكيد بساعد على تنظيم الصفحه وعرضها بشكل اجمل واكثر تناسة. لتطبيق هذا الاشي بنستخدام classes التالية : row. و col.
نطبق مثال :
<!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>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
<form class="m-5">
<div class="row">
<div class="col">
<label for="exampleInputFN" class="form-label">Frist Name</label>
<input type="text" class="form-control" id="inputFisrtName" aria-describedby="emailHelp">
</div>
<div class="col">
<label for="exampleInputSN" class="form-label">Second Name</label>
<input type="text" class="form-control" id="inputSecondName">
</div>
<div class="col">
<label for="exampleInputSN" class="form-label">Family Name</label>
<input type="text" class="form-control" id="inputFMName">
</div>
</div>
<div class="row">
<div class="Col">
<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
</div>
</div>
<div class="row">
<div class="Col text-center">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</body>
</html>
النتيجة:
تمام نفهم شو عملنا.
اضفنا في البداية <div> وطبقنا عليها class باسم row الهدف هو انشاء صف .بعد هيك اضفنا <div> ثاني للاسم الاول وطبقنا عليها class باسم Col والي بعني هو عرض هذا العمود بكون 33.33 % (العرض حسب عدد الاعمده الموجوده في الصف). ولان في هذا المثال اضفنا 3 اعمده في الصف الاول (الاسم الأول، الاسم الثاني، اسم العائلة) بناء عليه بكون العرض يساوي 33.33%.
بعد هيك اضفنا صف ثاني للملاحظات ونفس الكلام طبقنا عليها class باسم row ويحتوي على عمود واحد فقط(العرض بكون 100%).
واخر اشي اضفنا صف ثاني يحتوي على زر الارسال ونفس الكلام طبقنا عليها class باسم row ويحتوي على عمود واحد فقط(العرض بكون 100%).
تطبيق Disabled and Readonly
اكيد بنقدر نتحكم ب control في الصفحة وممكن نعملها للقراءة فقط باستخدام class باسم Readonly ونفس الفكره لعمل تعطيل بنستخدم class باسم Disabled
نطبق مثال :
نفس المثال السابق بنعمل الاسم الاوسط Disabled
والملاحظات Readonly
<!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>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
<form class="m-5">
<div class="row">
<div class="col">
<label for="exampleInputFN" class="form-label">Frist Name</label>
<input type="text" class="form-control" id="inputFisrtName" aria-describedby="emailHelp">
</div>
<div class="col">
<label for="exampleInputSN" class="form-label">Second Name</label>
<input type="text" class="form-control" id="inputSecondName" placeholder="Disabled input" disabled>
</div>
<div class="col">
<label for="exampleInputSN" class="form-label">Family Name</label>
<input type="text" class="form-control" id="inputFMName">
</div>
</div>
<div class="row">
<div class="Col">
<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text" placeholder="Readonly input" readonly></textarea>
</div>
</div>
<div class="row">
<div class="Col text-center">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</body>
</html>
النتيجة:
تطبيق Color Picker
يمكن اضافة control لاختيار الألوان باستخدام class باسم form-control-color.
نطبق مثال .
<!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>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
<form class="m-5">
<div class="row">
<div class="col">
<label for="exampleInputFN" class="form-label">Frist Name</label>
<input type="text" class="form-control" id="inputFisrtName" aria-describedby="emailHelp">
</div>
<div class="col">
<label for="exampleInputSN" class="form-label">Second Name</label>
<input type="text" class="form-control" id="inputSecondName" placeholder="Disabled input" disabled>
</div>
<div class="col">
<label for="exampleInputSN" class="form-label">Family Name</label>
<input type="text" class="form-control" id="inputFMName">
</div>
</div>
<div class="row">
<div class="Col">
<label for="comment">color:</label>
<input type="color" class="form-control form-control-color" value="#CCCCCC">
</div>
</div>
<div class="row">
<div class="Col">
<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text" placeholder="Readonly input" readonly></textarea>
</div>
</div>
<div class="row">
<div class="Col text-center">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</body>
</html>
النتيجة:
اترك تعليقك