CloseTag | الشروحات | Bootstrap | عناصر الادخال في BootStrap | Bootstrap Inputs

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap demo</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    </head>
    <body>


      <form>
        <!-- Multiple inputs -->
        <div class="input-group mb-3">
          <span class="input-group-text">Person</span>
          <input type="text" class="form-control" placeholder="First Name">
          <input type="text" class="form-control" placeholder="Last Name">
        </div>

        <!-- Multiple addons / help text -->
        <div class="input-group mb-3">
          <span class="input-group-text">One</span>
          <span class="input-group-text">Two</span>
          <span class="input-group-text">Three</span>
          <input type="text" class="form-control">
        </div>
      </form>



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
    </body>
  </html>

PCFkb2N0eXBlIGh0bWw+DQogIDxodG1sIGxhbmc9ImVuIj4NCiAgICA8aGVhZD4NCiAgICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4NCiAgICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSI+DQogICAgICA8dGl0bGU+Qm9vdHN0cmFwIGRlbW88L3RpdGxlPg0KICAgICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiIHJlbD0ic3R5bGVzaGVldCIgaW50ZWdyaXR5PSJzaGEzODQtZ0gyeUlKcUtkTkhQRXEwbjRNcWEvSEdLSWhTa0lIZUw1QXloa1lWOGk1OVU1QVI2Y3NCdkFwSEhObC92STFCeCIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+DQogICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4gOjotd2Via2l0LXNjcm9sbGJhcnt3aWR0aDo3cHg7aGVpZ2h0OjdweDt9Ojotd2Via2l0LXNjcm9sbGJhci10cmFja3tiYWNrZ3JvdW5kOiNmZmY7fTo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWJ7Ym9yZGVyLXJhZGl1czo1cHg7YmFja2dyb3VuZDojMmY0NWZmO308L3N0eWxlPjwvaGVhZD4NCiAgICA8Ym9keT4NCg0KDQogICAgICA8Zm9ybT4NCiAgICAgICAgPCEtLSBNdWx0aXBsZSBpbnB1dHMgLS0+DQogICAgICAgIDxkaXYgY2xhc3M9ImlucHV0LWdyb3VwIG1iLTMiPg0KICAgICAgICAgIDxzcGFuIGNsYXNzPSJpbnB1dC1ncm91cC10ZXh0Ij5QZXJzb248L3NwYW4+DQogICAgICAgICAgPGlucHV0IHR5cGU9InRleHQiIGNsYXNzPSJmb3JtLWNvbnRyb2wiIHBsYWNlaG9sZGVyPSJGaXJzdCBOYW1lIj4NCiAgICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgY2xhc3M9ImZvcm0tY29udHJvbCIgcGxhY2Vob2xkZXI9Ikxhc3QgTmFtZSI+DQogICAgICAgIDwvZGl2Pg0KDQogICAgICAgIDwhLS0gTXVsdGlwbGUgYWRkb25zIC8gaGVscCB0ZXh0IC0tPg0KICAgICAgICA8ZGl2IGNsYXNzPSJpbnB1dC1ncm91cCBtYi0zIj4NCiAgICAgICAgICA8c3BhbiBjbGFzcz0iaW5wdXQtZ3JvdXAtdGV4dCI+T25lPC9zcGFuPg0KICAgICAgICAgIDxzcGFuIGNsYXNzPSJpbnB1dC1ncm91cC10ZXh0Ij5Ud288L3NwYW4+DQogICAgICAgICAgPHNwYW4gY2xhc3M9ImlucHV0LWdyb3VwLXRleHQiPlRocmVlPC9zcGFuPg0KICAgICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBjbGFzcz0iZm9ybS1jb250cm9sIj4NCiAgICAgICAgPC9kaXY+DQogICAgICA8L2Zvcm0+DQoNCg0KDQogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMi4wL2Rpc3QvanMvYm9vdHN0cmFwLmJ1bmRsZS5taW4uanMiIGludGVncml0eT0ic2hhMzg0LUEzckpEODU2S293U2I3ZHdsWmRZRWtPMzlHYWdpN3ZJc0YwanJSQW9RbURLS3RRQkhVdUxaOUFzU3Y0akQ0WGEiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL0Bwb3BwZXJqcy9jb3JlQDIuMTEuNS9kaXN0L3VtZC9wb3BwZXIubWluLmpzIiBpbnRlZ3JpdHk9InNoYTM4NC1YZSs4Y0w5b0phNnROL3ZlQ2hTUDdxK21uU1BhajVCY3U5bVBYNUY1eElHRTBEVml0dGFxVDVsb3JmMEVJN1ZrIiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4NCiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIiBpbnRlZ3JpdHk9InNoYTM4NC1PRG1ESVZ6TitwRmRleHhIRUhGQlFIMy85L3ZROXVvcmk0NXo0SmpuRnNSeWRibVFibUw1dDF0UTBjdWxVenlLIiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4NCiAgICA8L2JvZHk+DQogIDwvaHRtbD4=