Bootstrap 5 Form

Nagpapatong na Form

Ang lahat ng <input> at <textarea> na may klase .form-control ay makakakuha ng tamang estilo ng form:

Example

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Pakikipagtype ng email address" name="email">
  </div>
  

    <div class="mb-3">
    <label for="pwd" class="form-label">Password：</label>
  </div>
  <input type="password" class="form-control" id="pwd" placeholder="Manghiling ilagay ang password" name="pswd">
    <div class="form-check mb-3">
      <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="remember"> Tandaan ako
  </div>
  </label>
</form>

Try It Yourself

<button type="submit" class="btn btn-primary">Isumite</button> Bilang karagdagan, pinaidah ang bawat elemento ng label na may .form-label

ang mga checkbox ay may iba't-ibang marka. Sila ay na-set na ang klase upang matiyak na maayos ang pagpunan. .form-check ang klase ng elementong may kubli. Ang label ay .form-check-label ang klase, habang ang mga checkbox at radio button ay ginagamit ang .form-check-input。

Textarea

Example

<label for="comment">Komento：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Try It Yourself

form row / grid (inline form)

Kung gusto mong ipakita ang mga elemento ng form na magkakasunod-sunod, gamitin ang .row at .col：

Example

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Manghiling ilagay ang email address" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Manghiling ilagay ang password" name="pswd">
    </div>
  </div>
</form>

Try It Yourself

Magiging matatagpuan ka ng Bootstrap Grid Makakatutok ka sa mas maraming kaalaman tungkol sa column at row sa chapter na ito.

Form Control Sizes

Maaari mong gamitin .form-control-lg Or .form-control-sm Change .form-control Size of Input Control:

Example

<input type="text" class="form-control form-control-lg" placeholder="Large Input Control">
<input type="text" class="form-control" placeholder="Common Input Control">
<input type="text" class="form-control form-control-sm" placeholder="Small Input Control">

Try It Yourself

Disable and Read-only

Gumamit ng disabled at/ o readonly attribute upang idisable ang input field:

Example

<input type="text" class="form-control" placeholder="Common Input Control">
<input type="text" class="form-control" placeholder="Disabled Input Control" disabled>
<input type="text" class="form-control" placeholder="Read-only Input Control" readonly>

Try It Yourself

Plain Text Input

Gumamit ng .form-control-plaintext Gamitin ang class upang itakda ang estilo ng walang border ng input field, ngunit panatilihin ang magandang paghahalaga ng labas at loob:

Example

<input type="text" class="form-control-plaintext" placeholder="Plain Text Input">
<input type="text" class="form-control" placeholder="Common Input Control">

Try It Yourself

Picker

Para sa tamang pagtatakda ng estilo ng type="color" ng input, gamitin ang .form-control-color Class:

Example

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Try It Yourself