މައިގަނޑު ކޮންޓެންޓަށް ސްކިޕް ކުރާށެވެ ޑޮކްސް ނެވިގޭޝަނަށް ސްކިޕް ކުރާށެވެ
Check
in English

ފްލޯޓިންގ ލޭބަލްތަކެވެ

އިންޕުޓް ފީލްޑްތަކުގެ މައްޗަށް ފްލޯޓް ކުރާ ރީތި ސާދާ ފޯމް ލޭބަލްތައް އުފައްދާށެވެ.

މިސާލު

ބޫޓްސްޓްރެޕްގެ ޓެކްސްޗުއަލް ފޯމް ފީލްޑްތަކާއެކު ފްލޯޓިންގ ލޭބަލްތައް އެނެބަލް ކުރުމަށްޓަކައި ޖޯޑު އޮފް <input class="form-control">އެންޑް <label>އެލިމެންޓްސް އިން ރެޕް ކުރާށެވެ. އަޅުގަނޑުމެންގެ ސީއެސްއެސް-އޮންލީ ފްލޯޓިންގ ލޭބަލްތަކުގެ މެތޯޑުގައި ސޫޑޯ-އެލިމެންޓް ބޭނުންކުރާތީ ކޮންމެ އެއްޗެއްގެ މައްޗަށް .form-floatingއޭ placeholderބޭނުންވެއެވެ . އަދި އެއްބަނޑު އެއްބަފާ ސެލެކްޓަރެއް (އެބަހީ، ) ބޭނުންކުރެވޭނެ ގޮތަށް ފުރަތަމަ އަންނަން ޖެހޭކަން ފާހަގަކޮށްލަންޖެހެއެވެ.<input>:placeholder-shown<input>~

html އެވެ
<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>

valueމިހާރުވެސް ކަނޑައެޅިފައިވާ އެއްޗެއް އޮތް އިރު ، <label>s އޮޓޮމެޓިކުން އެމީހުންގެ ފްލޯޓް ޕޮޒިޝަނަށް އެޖެސްޓް ވާނެއެވެ.

html އެވެ
<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputValue">Input with value</label>
</form>

ފޯމް ވެލިޑޭޝަން ސްޓައިލްތައް ވެސް މަސައްކަތް ކުރަނީ އުންމީދު ކުރެވޭ ގޮތަށެވެ.

html އެވެ
<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

ޓެކްސްޓް އޭރިއާސް

ބައި ޑިފޯލްޓްކޮށް، <textarea>s with .form-controlވާނީ s އާއި އެއް އުސްމިނެއްގައެވެ <input>.

html އެވެ
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

ތިބާގެ ގައި ކަސްޓަމް އުސްމިން ސެޓް ކުރުމަށްޓަކައި ، އެޓްރިބިއުޓް <textarea>ބޭނުން ނުކުރައްވާށެވެ . rowsއޭގެ ބަދަލުގައި އެކްސްޕްލިސިޓް height(އިންލައިން ނުވަތަ ކަސްޓަމް ސީއެސްއެސް މެދުވެރިކޮށް) ސެޓް ކުރާށެވެ.

html އެވެ
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

ހޮވައެވެ

ފިޔަވައި .form-control، ފްލޯޓިންގ ލޭބަލްތައް ލިބެން ހުންނަނީ ހަމައެކަނި .form-selectސ. އެމީހުން މަސައްކަތް ކުރަނީ އެއްގޮތަކަށް ނަމަވެސް <input>s އާއި ހިލާފަށް އެމީހުން އަބަދުވެސް ދައްކާނީ <label>އޭގެ ފްލޯޓެޑް ސްޓޭޓްގައެވެ. ސެލެކްޓްސް ވިތު sizeއަދި multipleސަޕޯޓް ނުކުރެވެއެވެ.

html އެވެ
<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

ހަމައެކަނި ކިޔުމަށް އާދައިގެ ލިޔުމެއް

ފްލޯޓިންގ ލޭބަލްސް އިން ވެސް ސަޕޯޓް ކުރެއެވެ , މިއީ ޕޭޖް ލޭއައުޓަށް އަސަރު ނުކޮށް .form-control-plaintextއެޑިޓް ކުރެވޭ އެއްޗަކުން ޕްލޭންޓެކްސްޓް ވެލިއުއަކަށް ޓޮގްލް ކުރުމަށް އެހީތެރިވެދޭނެ ކަމެކެވެ .<input>

html އެވެ
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
  <label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
  <label for="floatingPlaintextInput">Input with value</label>
</div>

އިންޕުޓް ގްރޫޕްތަކެވެ

ފްލޯޓިންގ ލޭބަލްސް ވެސް ސަޕޯޓް .input-groupކުރެއެވެ .

@
html އެވެ
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
    <label for="floatingInputGroup1">Username</label>
  </div>
</div>

ބޭނުންކުރާއިރު .input-groupއަދި .form-floatingފޯމް ވެލިޑޭޝަން އާއި އެކު، ދަ -feedbackބަހައްޓަންވާނީ ގެ ބޭރުގައި .form-floating، އެކަމަކު އެތެރޭގައި .input-group. މާނައަކީ ފީޑްބެކް ދައްކަން ޖެހޭނީ ޖާވާސްކްރިޕްޓް ބޭނުންކޮށްގެންނެވެ.

@
ޔޫޒަރނޭމް އެއް ހޮވާށެވެ.
html އެވެ
<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <div class="form-floating is-invalid">
    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
    <label for="floatingInputGroup2">Username</label>
  </div>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

ލޭއައުޓް

ބޫޓްސްޓްރަޕް ގްރިޑް ސިސްޓަމާއެކު މަސައްކަތްކުރާއިރު، ކޮލަމް ކްލާސްތަކުގެ ތެރޭގައި ފޯމް އެލިމެންޓްތައް ބެހެއްޓުން ޔަގީންކުރައްވާށެވެ.

html އެވެ
<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label for="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>

ސާސް އެވެ

ވެރިއޭބަލްސް އެވެ

$form-floating-height:            add(3.5rem, $input-height-border);
$form-floating-line-height:       1.25;
$form-floating-padding-x:         $input-padding-x;
$form-floating-padding-y:         1rem;
$form-floating-input-padding-t:   1.625rem;
$form-floating-input-padding-b:   .625rem;
$form-floating-label-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;