Formulare (Română)

Exemple și instrucțiuni de utilizare pentru stilurile de control al formularelor, opțiunile de aspect și componentele personalizate pentru crearea unei largi varietăți de formulare.

Prezentare generală

Controalele de formular Bootstrap se extind pe stilurile noastre de formulare repornite cu clase. Utilizați aceste clase pentru a opta pentru afișajele personalizate pentru o redare mai consistentă între browsere și dispozitive.

Asigurați-vă că utilizați un atribut type adecvat pentru toate intrările (de ex. , email pentru adresa de e-mail sau number pentru informații numerice) pentru a profita de controale de intrare mai noi, cum ar fi verificarea e-mailului, selectarea numărului și multe altele.

Iată un exemplu rapid pentru a demonstra stilurile de formular Bootstrap. Continuați să citiți documentația privind clasele necesare, aspectul formularului și multe altele.

Controalele formularului

Asigurați-vă că explorați formularele personalizate pentru a continua stilul <select> s.

Pentru intrări de fișiere, schimbați .form-control pentru .form-control-file.

Dimensionare

Setați înălțimi folosind clase precum .form-control-lg și .form-control-sm.

Numai citire

Adăugați readonly atribut boolean pe o intrare pentru a preveni modificarea valorii intrării. Intrările numai în citire par mai ușoare (la fel ca intrările dezactivate), dar păstrează cursorul standard.

Citire numai text simplu

Dacă doriți să aveți <input readonly> elemente în formularul dvs. sub formă de text simplu, utilizați .form-control-plaintext class pentru a elimina stilul implicit al câmpului formularului și a păstra marja și umplerea corecte.

Casete de selectare și aparate radio

Implicit casetele de selectare și radiourile sunt îmbunătățite cu ajutorul .form-check, o singură clasă pentru ambele tipuri de intrare care îmbunătățește aspectul și comportamentul elementelor HTML. Casetele de selectare sunt pentru a selecta una sau mai multe opțiuni dintr-o listă, în timp ce aparatele de radio sunt pentru a selecta o opțiune din multe.

Sunt acceptate casetele de selectare și radiourile dezactivate, dar pentru a furniza un not-allowed cursor la trecerea cu mouse-ul peste parul <label>, va trebui să adăugați atributul disabled la .form-check-input. Atributul dezactivat va aplica o culoare mai deschisă pentru a indica starea intrării.

Casetele de selectare și utilizarea radiourilor sunt construite pentru a accepta validarea formularelor bazate pe HTML și pentru a oferi etichete concise și accesibile. Ca atare, <input> s și <label> sunt elemente frate, spre deosebire de <input> în cadrul unui <label>. Acest lucru este puțin mai detaliat, deoarece trebuie să specificați atributele id și for pentru a lega <input> și <label>.

Implicit (stivuit)

În mod implicit, orice număr de casete de selectare și radio care sunt frate imediat vor fi stivuite vertical și spațiat corespunzător cu .form-check.

Inline

Casete de selectare grup sau radiouri pe același rând orizontal prin adăugarea .form-check-inline la orice .form-check.

Fără etichete

Adăugați .position-static la intrările din .form-check care nu au text de etichetă. Nu uitați să furnizați în continuare o formă de etichetă pentru tehnologiile de asistență (de exemplu, folosind aria-label).

Aspect

Deoarece Bootstrap se aplică display: block și width: 100% la aproape toate comenzile noastre de formular , formularele se vor stiva implicit pe verticală. Clasele suplimentare pot fi folosite pentru a varia acest aspect pe bază de formular.

Grupuri de formulare

Clasa .form-group este cel mai simplu mod pentru a adăuga o structură formelor. Oferă o clasă flexibilă care încurajează gruparea corectă a etichetelor, a controalelor, a textului de ajutor opțional și a mesajelor de validare a formularelor. În mod implicit, se aplică numai margin-bottom, dar preia stiluri suplimentare în .form-inline după cum este necesar. Folosiți-l cu <fieldset> s, <div> s sau aproape orice alt element.

Grila de formulare

Formele mai complexe pot fi construite folosind clasele noastre de grilă. Utilizați-le pentru aspectele formularelor care necesită coloane multiple, lățimi variate și opțiuni de aliniere suplimentare.

Rând formular

De asemenea, puteți schimba .row cu .form-row, o variantă a rândului nostru standard de rețea care suprascrie jgheaburile implicite ale coloanelor pentru aspectele mai strânse și mai compacte.

Layouturi mai complexe pot fi create și cu sistemul de rețea.

Formă orizontală

Creați forme orizontale cu grila adăugând clasa .row pentru a forma grupuri și utilizând .col-*-* clase pentru a specifica lățimea etichetelor și a comenzilor. Asigurați-vă că adăugați .col-form-label și la <label>, de asemenea, astfel încât acestea să fie centrate vertical cu comenzile de formular asociate.

Uneori, poate fi necesar să utilizați utilitare de margine sau de umplere pentru a crea acea aliniere perfectă de care aveți nevoie. De exemplu, am eliminat padding-top de pe eticheta noastră de intrări radio stivuite pentru a alinia mai bine textul de bază.

Eticheta formularului orizontal dimensionare

Dimensionarea coloanei

După cum se arată în exemplele anterioare, sistemul nostru de grilă vă permite să plasați orice număr de .col s în cadrul unui .row sau .form-row. Vor împărți lățimea disponibilă în mod egal între ele. De asemenea, puteți alege un subset de coloane pentru a ocupa mai mult sau mai puțin spațiu, în timp ce restul .col s împarte în mod egal restul, cu clase de coloane specifice, cum ar fi .col-7.

Redimensionare automată

Exemplul de mai jos folosește un utilitar flexbox pentru a centra vertical conținutul și modifică .col la .col-auto, astfel încât coloanele dvs. să ocupe doar spațiul necesar. Altfel spus, dimensiunile coloanei în sine pe baza conținutului.

Puteți apoi să o remixați din nou cu clase de coloane specifice dimensiunii.

Și, desigur, sunt acceptate comenzile de formulare personalizate.

Formulare în linie

Utilizați .form-inline clasă pentru a afișa o serie de etichete, controale de formular și butoane pe un singur rând orizontal. Controalele formularelor din formularele în linie variază ușor față de stările lor implicite.

• Controalele sunt display: flex, restrângând orice spațiu alb HTML și permițându-vă să oferiți controlul aliniării cu spațiu și utilitare flexbox.
• Comenzile și grupurile de intrare primesc width: auto pentru a suprascrie Bootstrap implicit width: 100%.
• Comenzile apar numai în linie în ferestrele de vizualizare care au o lățime de cel puțin 576 de pixeli pentru a contura ferestrele înguste de pe dispozitivele mobile.

Poate fi necesar să abordați manual lățimea și alinierea controalelor de formular individuale. cu utilități de spațiere (așa cum se arată mai jos). În cele din urmă, asigurați-vă că includeți întotdeauna un <label> cu fiecare control de formular, chiar dacă trebuie să îl ascundeți de vizitatorii care nu sunt cititori cu .sr-only .

Controalele și selecțiile de formulare personalizate sunt, de asemenea, acceptate.

Text de ajutor

Textul de ajutor la nivel de bloc în formulare poate fi creat folosind .form-text (cunoscut anterior ca .help-block în v3). Textul de ajutor în linie poate fi implementat flexibil utilizând orice element HTML și clase de utilitate precum .text-muted.

Textul de ajutor de mai jos intrări poate fi stilizat cu .form-text. Această clasă include display: block și adaugă o marjă superioară pentru spațierea ușoară de la intrările de mai sus.

Textul în linie poate utiliza orice element HTML tipic în linie (fie că este un <small>, <span> sau altceva) cu nimic mai mult decât o clasă de utilitate.

Formulare dezactivate

Adăugați atributul boolean disabled pe o intrare pentru a preveni interacțiunile utilizatorilor și a face să apară mai ușor.

Adăugați disabled atribut unui <fieldset> pentru a dezactiva toate comenzile din interior.

Validare

Oferiți feedback valoros și acționabil utilizatorilor dvs. cu validarea formularului HTML5 – disponibilă în toate browserele noastre acceptate. Alegeți din feedbackul de validare implicit al browserului sau implementați mesaje personalizate cu clasele noastre încorporate și JavaScript de pornire.

Cum funcționează

Iată cum funcționează validarea formularului cu Bootstrap:

• Validarea formularului HTML se aplică prin intermediul celor două pseudo-clase CSS, :invalid și :valid. Se aplică <input>, <select> și <textarea> elemente.
• Bootstrap cuprinde stilurile :invalid și :valid pentru clasa parent .was-validated, aplicată de obicei clasei <form>. În caz contrar, orice câmp obligatoriu fără valoare apare ca nevalid la încărcarea paginii. În acest fel, puteți alege când să le activați (de obicei după ce se încearcă trimiterea formularului).
• Ca alternativă, .is-invalid și .is-valid pot fi folosite clase în locul pseudo-claselor pentru validarea pe partea de server. Nu necesită o clasă părinte .was-validated.
• Datorită constrângerilor în modul în care funcționează CSS, nu putem (în prezent) să aplicăm stiluri unui <label> care vine înainte de un control de formular în DOM fără ajutorul JavaScript personalizat.
• Toate browserele moderne acceptă API-ul de validare a constrângerilor, o serie de metode JavaScript pentru validarea controalelor de formular.
• Mesajele de feedback pot utiliza valorile implicite ale browserului (diferite pentru fiecare browser și nedestilabile prin CSS) sau stilurile noastre de feedback personalizate cu HTML și CSS suplimentare.
• Puteți furniza mesaje de validitate personalizate cu setCustomValidity în JavaScript.

Având în vedere acest lucru, luați în considerare următoarele demonstrații pentru stilurile noastre de validare a formularelor personalizate, clasele opționale ale serverului și valorile implicite ale browserului.

Stiluri personalizate

Pentru mesajele de validare a formularului Bootstrap personalizate, va trebui să adăugați atributul boolean novalidate la <form>. Aceasta dezactivează sfaturile de instrumente de feedback implicite ale browserului, dar oferă totuși acces la API-urile de validare a formularului în JavaScript. Încercați să trimiteți formularul de mai jos; JavaScript nostru va intercepta butonul de trimitere și vă va transmite feedback.

Când încercați să trimiteți, veți vedea :invalid și :valid stiluri aplicate comenzilor dvs. de formular.

Valorile implicite ale browserului

Nu vă interesează mesaje de feedback personalizate de validare sau scrierea JavaScript pentru a schimba comportamentele formularului? Bine, puteți utiliza valorile implicite ale browserului. Încercați să trimiteți formularul de mai jos. În funcție de browser și sistem de operare, veți vedea un stil de feedback ușor diferit.

Deși aceste stiluri de feedback nu pot fi stilizate cu CSS, puteți personaliza textul de feedback prin JavaScript.

Partea server

Vă recomandăm să utilizați validarea partea client, dar în cazul în care aveți nevoie de partea server, puteți indica câmpuri de formular nevalide și valide cu .is-invalid și .is-valid. Rețineți că .invalid-feedback este, de asemenea, acceptat cu aceste clase.

Elemente acceptate

Exemplele noastre de formulare arată textul nativ <input> mai sus, dar sunt disponibile stiluri de validare a formularelor și pentru comenzile noastre de formulare personalizate.

Sfaturi pentru instrumente

Dacă aspectul formularului vă permite acest lucru, puteți schimba .{valid|invalid}-feedback clase pentru clasele .{valid|invalid}-tooltip pentru a afișa feedback-ul de validare într-o descriere de stil. Asigurați-vă că aveți un părinte cu position: relative pentru poziționarea tooltip. În exemplul de mai jos, clasele noastre de coloane au deja acest lucru, dar proiectul dvs. poate necesita o configurare alternativă.

Formulare personalizate

Pentru personalizare și mai multă încrucișare consistența browserului, utilizați elementele noastre de formular complet personalizate pentru a înlocui valorile implicite ale browserului. Acestea sunt create pe partea de sus a semnalizării semantice și accesibile, deci sunt înlocuitoare solide pentru orice control implicit al formularului. div id = „02ee7be3d5”> cu un frate <span> pentru a crea controlul nostru personalizat și un <label> pentru textul însoțitor. Structural, aceasta este aceeași abordare ca .form-check implicită.

Folosim selectorul de frate (~) pentru toate <input> stările noastre – cum ar fi :checked – pentru a ne stiliza corect indicatorul de formular personalizat. Atunci când este combinat cu clasa .custom-control-label, putem stiliza textul pentru fiecare element pe baza stării <input>.

Ascundem <input> implicit cu opacity și folosim .custom-control-label pentru a construi un nou indicator de formular personalizat în locul său cu ::before și ::after. Din păcate, nu putem construi unul personalizat doar din <input>, deoarece content CSS nu funcționează pe acel element.

În stările verificate, folosim pictogramele SVG încorporate base64 din Open Iconic. Acest lucru ne oferă cel mai bun control pentru stilare și poziționare pe browsere și dispozitive.

Casete de selectare

Casete de selectare personalizate poate utiliza, de asemenea, pseudo-clasa :indeterminate atunci când este setată manual prin JavaScript (nu există un atribut HTML disponibil pentru specificarea acestuia).

Dacă utilizați jQuery, ceva de genul acesta ar trebui să fie suficient:

Radio

Inline

Dezactivat

Casetele de selectare și radiourile personalizate pot fi, de asemenea, dezactivate. Adăugați atributul boolean disabled la <input>, iar indicatorul personalizat și descrierea etichetei vor fi stilate automat.

Selectați meniul

Personalizat <select> meniurile au nevoie doar de o clasă personalizată, .custom-select pentru a declanșa stilurile personalizate.

De asemenea, puteți alege dintre selecțiile personalizate mici și mari la potriviți intrările noastre de text de dimensiuni similare.

Atributul multiple este, de asemenea, acceptat:

Așa cum este atributul size:

Browser de fișiere

Intrarea fișierului este cea mai grea din grup și necesită JavaScript suplimentar dacă doriți să le conectați cu funcțional Alegeți fișierul … și textul numelui fișierului selectat.

Ascundem fișierul implicit <input> prin și, în schimb, stilizați <label>. Butonul este generat și poziționat cu ::after. În cele din urmă, declarăm un width și height pe <input> pentru spațiere adecvată pentru conținutul din jur .

Traducerea sau personalizarea șirurilor

Pseudo-clasa :lang() este utilizată pentru a permite traducerea textului „Răsfoiți” în altul limbi. Înlocuiți sau adăugați intrări la variabila $custom-file-text Sass cu eticheta de limbă relevantă și șiruri localizate. Șirurile în limba engleză pot fi personalizate în același mod.De exemplu, iată cum s-ar putea adăuga o traducere în spaniolă (codul de limbă spaniolă este es):

Iată lang(es) în acțiune la introducerea fișierului personalizat pentru o traducere în spaniolă:

Va trebui să setați corect limba documentului (sau subarborele acestuia) corect pentru a fi afișat textul corect. Acest lucru se poate face folosind atributul lang de pe elementul <html> sau antetul HTTP Content-Language , printre alte metode.