Bootstrap vypnuté textové vstupné polia

Bootstrap Vypnute Textove Vstupne Polia



V Bootstrape sa na efektívne vytváranie formulárov používajú rôzne triedy. Tieto triedy poskytujú prvkom množstvo štýlových vlastností, medzi ktoré patrí „ kontrola formy “, “ forma-skupina “, “ formulár-kontrola-štítok ', a mnoho ďalších. Konkrétnejšie, vstupné polia formulára sú textové vstupné polia používané na zhromažďovanie informácií od používateľov. Vstupné pole však môžeme deaktivovať pomocou „ zdravotne postihnutých “trieda alebo atribút.

Tento príspevok sa bude týkať nasledujúcich tém:

Predpoklad: Vytvorte formulár

Najprv vytvorte formulár pomocou kódu HTML „

' prvok:







< formulár < / formulár >

Potom pridajte „

prvok a priraďte mu triedu stĺpik-12 “. V rámci prvku zadajte popis formulára:



< fieldset trieda = 'col-md-12' >

< legenda >Prihlasovací formulár študentov< / legenda >

< / fieldset >

Výkon







Ako zakázať pole na zadávanie textu?

Pre prebiehajúci príklad postupujte podľa uvedených pokynov:

  • Vnútri '
    ” za element legendy pridajte značku
    a priraďte mu triedu “ forma-skupina “.
  • Potom zahrňte „ <štítok> “ a „ ” prvky pre popis a vstupné polia. Priraďte vstupnému prvku triedu “ kontrola formy “.
  • Potom prideľte „ zdravotne postihnutých ” na vypnutie vstupného poľa:
< div trieda = 'formová skupina' >

< štítok >Zadajte svoj názov

< vstup typu = 'text' trieda = 'kontrola formulára' zakázaný>

< / štítok >

< / div >

Nasleduje vysvetlenie vyššie uvedených tried:



  • forma-skupina ” je flexibilná trieda, ktorá poskytuje najjednoduchší spôsob, ako zahrnúť štruktúru do formulárov.
  • kontrola formy ” automaticky pridá štýl k prvkom formulára.

Výkon

Pridajte ďalšie vstupné pole bez „ zdravotne postihnutých ” atribút:

< div trieda = 'formová skupina' >

< štítok >Vstúpte do svojho Otca názov

< vstup typu = 'text' trieda = 'kontrola formulára' >

< / štítok >

< / div >

Je možné pozorovať, že prvé vstupné pole je zakázané a druhé je povolené:

Ako zakázať možnosť výberu poľa?

Ak chcete vytvoriť výberové pole vo formulári, použite kód HTML „ ' prvok. ' ” prvky sa potom pridajú na výber položiek políčok.

V tomto príklade si všimnite, že druhá možnosť je nastavená ako zakázaná pomocou „ zdravotne postihnutých ” atribút:

< div trieda = 'formová skupina' >

< štítok > Zakázané Vyberte položku Box

< vyberte trieda = 'kontrola formulára' >

< možnosť >vyberte < / možnosť >

< možnosť zakázaný> Zakázané vyberte< / možnosť >

< možnosť >Menu< / možnosť >

< / vyberte >

< / štítok >

< / div >

Výkon

Ako zakázať vstupný prvok začiarkavacieho políčka?

Urobme ďalšie začiarkavacie políčko na ovládanie formulára. Ak chcete začiarkavacie políčko deaktivovať, „ zdravotne postihnutých ” atribút je špecifikovaný takto:

< div trieda = 'kontrola formulára' >

< štítok trieda = 'forma-check-label' >

< vstup trieda = 'form-check-input' typu = 'zaškrtávacie políčko' zakázaný>

Môžeš toto nekontroluj



Výkon

Ako zakázať vstupný prvok tlačidla?

Môžete tiež pridať prvok tlačidla HTML na odoslanie formulára. Teraz deaktivujeme toto tlačidlo pomocou „ zdravotne postihnutých ' trieda:

< tlačidlo typu = 'Predložiť' trieda = 'btn btn-primárne btn-lg vypnuté' >Odoslať< / tlačidlo >

Výkon

To bolo všetko o deaktivácii vstupných polí v Bootstrape.

Záver

V Bootstrape je možné vypnúť ovládacie prvky formulára pomocou „ zdravotne postihnutých ” atribút alebo trieda. Atribút je umiestnený vo vnútri počiatočnej značky prvku. Na druhej strane, „ zdravotne postihnutých “trieda je umiestnená v rámci “ trieda “. Tento článok obsahuje príklady, ktoré ilustrujú, ako vypnúť ovládacie prvky formulára v Bootstrap.