formulare (Română)

exemple și instrucțiuni de utilizare pentru stiluri de control formă, Opțiuni de aspect, și componente personalizate pentru a crea o mare varietate de forme.

Prezentare generală

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

asigurați-vă că utilizați un atribut type pe toate intrările (de ex.,, email pentru adresa de e-mail sau number pentru informații numerice) pentru a profita de noi controale de intrare ca verificare de e-mail, numărul de selecție, și mai mult.

Iată un exemplu rapid pentru a demonstra stilurile de formă ale Bootstrap. Continuați să citiți pentru documentație cu privire la clasele necesare, aspectul formularului și multe altele.

Formular de control

asigurați-vă că pentru a explora forme personalizate în continuare stil <select>s

Pentru fișierul intrari, swap .form-control pentru .form-control-file.,

Dimensionarea

Set înălțimi folosind clase, cum ar fi .form-control-lg și .form-control-sm.

Readonly

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

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Readonly plain text

Dacă vrei să ai <input readonly> elemente în formă de stil ca text simplu, utilizați .form-control-plaintext clasa a elimina default câmp de formular de styling și păstrarea corectă marjă și padding.

intrări de gamă

setați intrări de gamă derulabile orizontal folosind .form-control-range.,

Casete de selectare și radio

Default 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 lor elemente HTML. Casetele de selectare sunt pentru selectarea uneia sau mai multor opțiuni dintr-o listă, în timp ce radiourile sunt pentru selectarea unei opțiuni dintre multe.

casetele de selectare și radiourile dezactivate sunt acceptate. Atributul disabled va aplica o culoare mai deschisă pentru a indica starea intrării.,

casetele de selectare și radiourile utilizate sunt construite pentru a sprijini validarea formularului bazat pe HTML și pentru a oferi etichete concise și accesibile. Ca atare, ne <input>s și <label> – uri sunt frate elemente ca spre deosebire de un <input> într-un <label>. Acest lucru este puțin mai detaliat cum trebuie să specificați id și for atribute să se refere <input> și <label>.,

Default (stacked)

în mod implicit, orice număr de casete de selectare și radiouri care sunt frate imediat vor fi stivuite vertical și distanțate corespunzător cu .form-check.

Linie

Grupul checkbox sau radio de pe același rând orizontal prin adăugarea .form-check-inline pentru orice .form-check.,

Fără etichete

Add .position-static la intrări în .form-check care nu au nici o eticheta text. Nu uitați să furnizați încă o formă de etichetă pentru tehnologiile de asistență (de exemplu, folosind aria-label).,

Layout

Începând cu Bootstrap se aplică display: block și width: 100% pentru aproape toate formele noastre de control, formulare va implicit stiva vertical. Clase suplimentare pot fi folosite pentru a varia acest aspect pe o bază per-formular.

grupuri de formulare

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

formă grilă

forme mai complexe pot fi construite folosind clasele noastre grilă. Utilizați acestea pentru machete de formular care necesită mai multe coloane, lățimi variate și opțiuni suplimentare de aliniere.,

Forma rând

puteți schimba, de asemenea, .row pentru .form-row, o variantă de standard grila de rând, care suprascrie implicit coloana jgheaburi pentru mai strânsă și mai compact machete.

machete mai complexe pot fi, de asemenea, create cu sistemul de grilă.

formă Orizontală

de a Crea formele orizontale cu grila prin adăugarea .row clasa a forma grupuri și folosind .col-*-* clase pentru a specifica lățimea de etichete și de control., Fi sigur de a adăuga .col-form-label la <label> – uri, precum și astfel încât acestea sunt centrat vertical cu asociat formă de control.

uneori, poate că trebuie să utilizați utilități de marjă sau umplutură 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 linia de bază a textului.,

formă Orizontală eticheta de dimensionare

Coloana de dimensionare

după Cum se arată în exemplele anterioare, nostru sistem de grilă vă permite să plasați orice număr de .col – uri într-un .row sau .form-row. Vor împărți lățimea disponibilă în mod egal între ele. Puteți alege, de asemenea, un subset de coloane să ia mai mult sau mai puțin spațiu, în timp ce restul de .col – uri împărțit în mod egal restul, cu coloana specific clase, cum ar fi .col-7.,

Auto-dimensionare

exemplul De mai jos foloseste un flexbox utilitate pentru a vertical centru de conținutul și modificările .col și .col-auto astfel încât coloane doar cât de mult spațiu este necesar. Pune-un alt mod, dimensiunile coloanei în sine pe baza conținutului.

Puteți apoi să remixați din nou clasele de coloane specifice mărimii.

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

formulare Inline

utilizați clasa.form-inline pentru a afișa o serie de etichete, comenzi de formulare și butoane pe un singur rând orizontal. Comenzile de formulare din formularele inline variază ușor de la stările implicite.

• Controale sunt display: flex, colaps orice HTML spațiu alb și permițându-vă pentru a asigura alinierea control cu spațiere și flexbox utilități.
• Controlează și grupuri de intrare primi width: auto pentru a trece peste Bootstrap default width: 100%.,
• controalele apar numai în linie în vizualizările cu o lățime de cel puțin 576px pentru a ține cont de vizualizările înguste de pe dispozitivele mobile.

poate fi necesar să abordați manual lățimea și alinierea comenzilor individuale de formular cu utilitarele spacing (așa cum se arată mai jos). În cele din urmă, asigurați-vă că pentru a include întotdeauna un <label> cu fiecare formă de control, chiar dacă aveți nevoie pentru a ascunde de la non-cititor de ecran vizitatorii cu .sr-only.

comenzile și selectările de formulare personalizate sunt, de asemenea, acceptate.,

text explicativ

la nivel de Bloc de text de ajutor în forme pot fi create folosind .form-text (cunoscut anterior ca .help-block în v3). Textul de ajutor Inline poate fi implementat flexibil folosind orice element HTML inline și clase de utilitate precum .text-muted.,

textul de ajutor de mai jos intrări pot fi stil cu .form-text. Această clasă include display: block și adaugă o marjă superioară pentru o distanțare ușoară de intrările de mai sus.,

text Inline poate folosi orice tipic inline HTML element (fie ea un <small>, <span>, sau altceva) cu nimic mai mult decât o clasă de utilitate.

forme dezactivate

adăugațidisabled atributul boolean pe o intrare pentru a preveni interacțiunile utilizatorului și a face să pară mai ușoară.,

<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

se Adaugă disabled atribut la un <fieldset> pentru a dezactiva toate comenzile în termen.

validare

oferiți feedback valoros și acționabil utilizatorilor dvs. cu validarea formularului HTML5-Disponibil în toate browserele acceptate. Alegeți din feedback-ul implicit de validare a browserului sau implementați mesaje personalizate cu clasele noastre încorporate și JavaScript de pornire.,în prezent, vă recomandăm să utilizați stiluri de validare personalizate, deoarece mesajele de validare implicite ale browserului nativ nu sunt expuse în mod constant tehnologiilor de asistență în toate browserele (în special, Chrome pe desktop și mobil).

Cum funcționează

Iată cum formular de validare funcționează cu Bootstrap:

• HTML formă de validare este aplicat prin intermediul CSS două pseudo-clase, :invalid și :valid. Acesta se aplică <input>, <select> și <textarea> elemente.,
• Bootstrap domenii :invalid și :valid stiluri pentru părinte .was-validated clasa, de obicei aplicat la <form>. În caz contrar, orice câmp obligatoriu fără o 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).
• Pentru a reseta aspectul de formă (de exemplu, în caz de formă dinamică observații folosind AJAX), scoateți .was-validated clasa <form> din nou după depunere.,
• ca rezervă,.is-invalidși.is-valid clasele pot fi utilizate în locul pseudo-claselor pentru validarea pe server. Ei nu au nevoie de un .was-validated clasa părinte.
• din Cauza constrângerilor legate de cum functioneaza CSS, nu putem (în prezent) se aplică stiluri de la un <label> care vine înainte de o formă de control î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 setările implicite ale browserului (diferite pentru fiecare browser și instabile prin CSS) sau stilurile noastre de feedback personalizate cu HTML și CSS suplimentare.
• puteți furniza mesaje de valabilitate personalizate cu setCustomValidity în JavaScript.

având în vedere acest lucru, luați în considerare următoarele demo-uri pentru stilurile noastre de validare a formularelor personalizate, clasele opționale din partea serverului și setările implicite ale browserului.,

stiluri Personalizate

Pentru personalizat Bootstrap formă de mesaje de validare, va trebui să adăugați novalidate boolean atribut la <form>. Aceasta dezactivează sfaturile de feedback implicite ale browserului, dar oferă totuși acces la API-urile de validare a formularului din JavaScript. Încercați să trimiteți formularul de mai jos; JavaScript-ul nostru va intercepta butonul de trimitere și vă va transmite feedback. Când încercați să trimiteți, veți vedea stilurile :invalid și :valid aplicate comenzilor de formular.,stiluri de feedback personalizate aplicați culori personalizate, chenare, stiluri de focalizare și pictograme de fundal pentru a comunica mai bine feedback-ul. Fundal icoane pentru <select> – uri sunt disponibile numai cu .custom-select și nu .form-control.

setările implicite ale browserului

nu vă interesează mesajele de feedback personalizate de validare sau scrierea JavaScript pentru a schimba comportamentele formularului? Toate bune, puteți utiliza setările implicite ale browserului. Încercați să trimiteți formularul de mai jos. În funcție de browser și de sistemul de operare, veți vedea un stil de feedback ușor diferit.,

în timp ce aceste stiluri de feedback nu pot fi stilizate cu CSS, puteți personaliza în continuare textul de feedback prin JavaScript.

partea de Server

se recomanda utilizarea de validare client-side, dar în cazul în care aveți nevoie de server-side de validare, puteți indica nevalabile și valabil câmpuri de formular cu .is-invalid și .is-valid. Rețineți că .invalid-feedback este de asemenea acceptat cu aceste clase.,

Sprijinit elemente

Validare stiluri sunt disponibile pentru următoarea formă de control și componente:

Ponturile

Daca forma layout permite, puteți schimba .{valid|invalid}-feedback cursuri pentru .{valid|invalid}-tooltip clase pentru a afișa validare feedback-ul într-un stil tooltip. Asigurați-vă că aveți un părinte cu position: relative pe acesta 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ă.,

personalizarea

stările de validare pot fi personalizate prin Sass cu$form-validation-states harta. Situat în _variables.scss fișier, acest Sass harta este curbat pentru a genera implicit valid/invalid validare membre. Este inclusă o hartă imbricată pentru personalizarea culorii și pictogramei fiecărui stat. În timp ce nicio altă stare nu este acceptată de browsere, cei care folosesc stiluri personalizate pot adăuga cu ușurință feedback de formular mai complex.,vă rugăm să rețineți că nu recomandăm personalizarea acestor valori fără a modifica, de asemenea, mixinform-validation-state.

Formulare personalizate

pentru o mai mare personalizare și coerență încrucișată a browserului, utilizați elementele noastre de formular complet personalizate pentru a înlocui setările implicite ale browserului. Acestea sunt construite pe baza marcajului semantic și accesibil, deci sunt înlocuitori solizi pentru orice control implicit al formularului.,

Casete de selectare și radio

Fiecare caseta si radio <input> și <label> asocierea este înfășurat într-un <div> pentru a crea personalizate de control. Din punct de vedere structural, aceasta este aceeași abordare ca și implicit .form-check.

Vom folosi frate selector (~) pentru toate <input> membre—cum ar fi :checked—corect stilul nostru formular personalizat indicator., Atunci când sunt combinate cu .custom-control-label clasa, putem, de asemenea, stilul de text pentru fiecare element bazat pe <input>modelului de stat.

Ne-am ascunde implicit <input> cu opacity și .custom-control-label pentru a construi un nou formular personalizat indicator în locul său cu ::before și ::after. Din păcate nu putem construi unul personalizat la doar <input> pentru CSS e content nu merge pe acel element.,

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

Checkboxes

checkboxes personalizate pot utiliza, de asemenea, :indeterminate pseudo class atunci când sunt setate manual prin JavaScript (nu există nici un atribut HTML disponibil pentru specificarea).,

Dacă sunteți folosind jQuery, ceva de genul asta ar fi de ajuns:

$('.your-checkbox').prop('indeterminate', true)

Radio

Linie

Dezactivat

Personalizate casete de selectare și radio poate fi, de asemenea, dezactivat., Adăugațidisabled atributul boolean la<input> și indicatorul personalizat și descrierea etichetei vor fi stilizate automat.

Switch-uri

Un comutator are marcajul de un obicei de selectare, dar foloseste .custom-switch class pentru a face un comutator. Comutatoarele acceptă, de asemenea, atributul disabled.,

Selectați meniu

Comanda <select> meniuri nevoie doar de o clasă personalizat, .custom-select pentru a declanșa stiluri personalizate. Stilurile personalizate sunt limitate la aspectul inițial al <select>și nu pot modifica <option> din cauza limitărilor browserului.

de asemenea, puteți alege dintre selectările personalizate mici și mari pentru a se potrivi cu intrările de text de dimensiuni similare.,

multiple atribut este, de asemenea, suportate:

este size atribut:

Gama

Creați personalizate <input type="range"> controale cu .custom-range. Piesa (fundal) și degetul mare (valoarea) sunt ambele stil să apară la fel în browsere. Deoarece doar IE și Firefox acceptă „umplerea” piesei lor din stânga sau din dreapta degetului mare ca mijloc de a indica vizual progresul, în prezent nu îl susținem.,

<label for="customRange1">Example range</label><input type="range" class="custom-range">

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2">Example range</label><input type="range" class="custom-range" min="0" max="5">

By default, range inputs „snap” to integer values., Pentru a schimba acest lucru, puteți specifica o valoare step. În exemplul de mai jos, dublăm numărul de pași folosind step="0.5".

<label for="customRange3">Example range</label><input type="range" class="custom-range" min="0" max="5" step="0.5">

browser-ul de Fișiere

intrarea fișierului este cea mai noduroasă a buchetului și necesită JavaScript suplimentar dacă doriți să le conectați cu funcția Alegeți fișierul… și textul numelui fișierului selectat.

Ne-am ascunde de fișier implicit <input> prin opacity și în loc de stil <label>. Butonul este generat și poziționat cu ::after. În cele din urmă, declarăm un width și height pe <input> pentru spațierea corectă pentru conținutul din jur.,

traducerea sau personalizarea șirurilor cu SCSS

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

$custom-file-text: ( en: "Browse", es: "Elegir");

Aici lang(es) în acțiune pe fișier personalizat de intrare pentru o traducere spaniolă:

Veți avea nevoie pentru a seta limba documentului (sau subarborele acestuia) în mod corect pentru a corecta textul să fie afișat., Acest lucru poate fi realizat folosind lang atribut pe <html> element sau Content-Language HTTP antet, printre alte metode.

Traducerea sau personalizarea siruri de caractere cu HTML

Bootstrap, de asemenea, oferă o modalitate de a traduce „Browse” text în HTML cu data-browse atribut care poate fi adăugat la intrare personalizate eticheta (de exemplu, în olandeză):