Până în 1998, când a fost lansat CSS Level 2, elementele de formular erau deja acceptate de toate browserele majore. Specificația CSS 2 nu a abordat problema prezentării. Deoarece aceste elemente fac parte din interfața cu utilizatorul, autorii specificației au ales să le ofere reprezentare vizuala la mila dezvoltatorilor de browsere.

An de an, specificația insuficient de detaliată i-a forțat pe dezvoltatorii web să experimenteze în încercările de a aduce la un „numitor comun” prezentarea elementelor precum input , select , fieldset , legenda și textarea în diferite browsere. În acest articol, vom analiza câteva tehnici CSS utilizate de dezvoltatorii web pentru a standardiza prezentarea vizuală a elementelor de formular.

Mai întâi în 2004 și apoi în 2007, Roger Johansson a creat un set cuprinzător de teste pentru a testa aplicarea stilurilor CSS pentru a forma elemente. Rezultatele acestor teste, pe care le puteți găsi în articolul său „Despre stilul elementelor de formular cu CSS”, au dus la o concluzie dezamăgitoare, pe care Johansson a exprimat-o în următoarele cuvinte:

Deci, ce arată acest experiment? După cum am spus, arată că folosirea CSS pentru a stila elementele de formular pentru a le face să pară consistente browsere diferiteși pe platforme diferite imposibil. De asemenea, arată că majoritatea browserelor ignoră multe proprietăți CSS aplicate elementelor de formular.

În ciuda validității neîndoielnice a acestor concluzii, dezvoltatorii web au continuat să testeze în mod activ aplicarea stilurilor CSS pentru a forma elemente pentru a găsi Sfântul Graal al prezentării lor cross-browser, sau cel puțin un compromis rezonabil între stilurile aplicate de browser de către implicite și cele specificate de dezvoltator.

Specificația CSS 2.1 specifică în foaia de stil implicită propusă pentru HTML4 că elementele de formă, cum ar fi textarea , input , și select sunt blocate în linie:

La rândul lor, elementele de formular și set de câmpuri sunt la nivel de bloc:

Descrierea modelului implicit propus de specificația CSS este limitată la aceasta. Toate celelalte aspecte vizuale ale elementelor de formular depind de foaia de stil implicită a browserului. Cu toate acestea, regulile enumerate înseamnă următoarele:

Elementele de bloc inline pot fi stilate folosind modelul inline. Vă permite să utilizați proprietăți CSS, cum ar fi line-height și vertical-align, pentru a controla înălțimea unui bloc și alinierea lui verticală. În plus, proprietățile de margine și de umplutură pot fi utilizate pentru a indica umplutura exterioară și interioară a unui bloc. Elementele bloc inline acceptă lățimea și înălțimea deoarece folosesc modelul de formatare a blocurilor.

Elementele bloc pot fi stilizate folosind binecunoscutul model bloc. Cu toate acestea, apar probleme cu elementele fieldset și legendă, deoarece legenda depinde în întregime de stilurile implicite ale browserului.

Cum rezolvă dezvoltatorii web aceste probleme?

Dezvoltatorii web au observat rapid că browserele se comportă ciudat atunci când folosesc elemente inline-block atunci când este vorba de specificarea explicită a dimensiunilor. Specificarea unei înălțimi duce adesea la rezultate neașteptate:

Dezvoltatorii au încercat să rezolve această problemă transformând aceste elemente în elemente bloc:

Funcționează doar cu textarea . Soluții standard Această problemă constă în utilizarea proprietăților font-size și padding în loc de înălțime.

Elementele de formular nu moștenesc caracterul și dimensiunea fontului, așa că primul lucru pe care trebuie să-l faceți este să le specificați:

După definirea tipului de literă, puteți seta umplutură pentru a adăuga umplutură la blocul de elemente:

Elementele de intrare și textarea au un chenar definit în foile de stil ale browserului. Să o normalizăm:

Browserele adaugă umplutură suplimentară la elementele de introducere a butonului de tip și trimite. O practică comună pentru normalizarea acestora este:

Problema cu această tehnică este că browserele, printre altele, aplică proprietăți specifice browser-ului acestor elemente, iar umplutura nu este întotdeauna capabilă să le normalizeze. De exemplu, în browserele care utilizează motorul Webkit, puteți găsi următoarele:

padding este folosit și pentru elementele fieldset și legendă, dar produce rezultate diferite:

• Setarea valorii proprietăți de umplutură pentru un element, un set de câmpuri de 0 în mod implicit va reseta indentarea elementului legenda în unele browsere (dar nu IE).
• Setarea proprietății de umplutură a elementului legendă la 0 va face ca acesta să se prăbușească.

Pentru selectare și pentru introducerea cu casete de selectare și tipuri de radio, ar trebui să utilizați numai:

• familie de fonturi
• marimea fontului
• lățime (pentru selectare),
• umplutura.

Aplicarea altor proprietăți acestor elemente duce adesea la rezultate inconsecvente browsere diferite.

Elementele de formă pot fi aliniate orizontal și vertical. Ele pot fi amplasate pe o linie sau ca un grup de blocuri unul sub celălalt. Pentru a le alinia pe aceeași linie, puteți utiliza una dintre cele două abordări:

Când se folosește float, elementele devin automat elemente bloc. Aceasta înseamnă că aceste elemente de formular sunt acum supuse regulilor celor nouă elemente flotante.

Elementele de formă pot fi aliniate vertical și orizontal.

Când se folosește float, principala problemă este alinierea verticală corectă în raport cu linia curentă. Acest lucru se face de obicei folosind margine sau umplutură:

Această abordare funcționează atunci când nu trebuie să setați alinierea blocurilor în raport cu text, cum ar fi conținutul unei etichete. În cazul în care acest lucru este necesar, puteți utiliza poziționarea relativă, umplutura și marginea pe elementele care conțin doar text:

O altă problemă apare cu butoanele. În cazul în care aveți un buton care este mai mare decât alte elemente, puteți seta alinierea lui verticală folosind poziționarea relativă:

O altă tehnică cu poziționare relativă poate fi utilizată pentru introducerea cu casete de selectare și tipuri de radio. Poziționare relativă poate fi folosit chiar și pentru a normaliza umplutura din stânga a unui element legendă în interiorul unui element fieldset. Singura diferență este că trebuie să utilizați proprietatea stângă în loc de proprietatea de sus.

Când utilizați modelul de casetă inline și inline, puteți utiliza proprietatea vertical-align pentru a alinia vertical elemente:

Poate fi convenabil să utilizați această proprietate împreună cu înălțimea liniei. Este important să rețineți că trebuie să aplicați această proprietate elementului părinte. Dacă aplicați această proprietate direct elementelor de formular, va avea un efect la calcularea înălțimii acestora:

Specificarea explicit a înălțimii elementului părinte este eficientă și atunci când este utilizată împreună cu o valoare egală a înălțimii rândului:

Când utilizați modelul în linie sau în bloc, puteți utiliza și proprietatea text-align a elementului părinte pentru a alinia elementele la dreapta, la stânga sau la centru.

- acesta este un caz special. Din motive de securitate, acest tip de element ar trebui să fie întotdeauna vizibil și recunoscut în browser. Aceasta înseamnă că browserele ignoră în mod deliberat unele stiluri (de exemplu, stilurile legate de vizibilitatea unui element) și tind să impună prezentarea descrisă de propriile foi de stil.

Este de remarcat faptul că aspectul implicit variază între browsere: unele browsere afișează doar un buton, în timp ce altele adaugă un câmp de text pentru a indica calea către fișierul descărcat.

Cu toate acestea, dezvoltatorii web au găsit rapid o modalitate de a depăși aceste limitări. Mai întâi au pus câmpul de intrare într-un container:

Apoi au ascuns elementul de intrare folosind proprietatea opacitate și au aplicat stiluri containerului:

Rețineți că!important . Aceasta este metoda preferată pentru a înlocui stilurile implicite de browser.

Controlul deplin asupra prezentării elementelor de formular nu este posibil din cauza lipsei de certitudine în specificația CSS și din cauza stilurilor implicite aplicate de browsere. Cu toate acestea, folosind unele tehnici comune, puteți reduce (dar nu elimina) diferențele în designul elementelor.

Articol original: The Problem of CSS Form Elements Articol citit de: , visitorFM , Anton Khlynovskiy , Igor Adamenko

Am întâlnit recent sarcină interesantă: Trebuie să plasați un formular de utilizator pe pagină, care avea mai multe câmpuri pentru introducerea datelor și un câmp pentru selectarea unui fișier. Mai mult, butonul de selectare a fișierelor este făcut exact ca frumos buton, mai degrabă decât componenta de intrare standard. Și trimiterea acestui formular, în conformitate cu termeni de referinta, ar trebui să fie executat imediat după selectarea unui fișier. Rezultatul final ar trebui să arate cam așa formular personalizat:

Nume de fișier:

Incarca fisier

Există două sarcini separate aici. Primul este să trimiteți formularul imediat după selectarea fișierului. Al doilea este de a proiecta componenta de selecție a fișierelor în conformitate cu designul sub forma unui buton non-standard.

Formularul pentru care implementăm toate sarcinile descrise are următorul cod sursă:

Nume de fișier:

si la inceput arata asa:

Nume de fișier:

O sarcină similară a fost discutată în articolul despre reîncărcarea și actualizarea unei pagini selectând în select . Acolo au folosit și evenimentul component al formularului pentru a trimite formularul folosind un script.

Puteți trimite formularul folosind folosind jQuery cod:

$("#formID" ).submit();

Acest apel trebuie să fie legat de schimbare eveniment(actualizarea) componenta de selecție a fișierului de intrare. Ca rezultat, codul jQuery pentru a rezolva formularul nostru ar trebui să fie după cum urmează:

jQuery(funcție())(
$("#myfile" ).change(function())( // eveniment de selecție a fișierului
$("#myform" ).submit(); // trimiteți formularul
});
});

Complexitatea acestei sarcini constă în lipsa standardelor de proiectare a componentelor. Este afișat diferit în diferite browsere. Și stilurile CSS care îl definesc aspect nu suficient pentru a-l oficializa.

Cel mai simplu mod de a rezolva această problemă ar fi să ascundeți componenta în sine și să o apelați atunci când faceți clic pe alt element. În acest caz, singura întrebare care apare este cum să asociați un clic pe un „buton personalizat” cu apelarea unui eveniment standard de selecție a fișierului.

O opțiune ar fi să folosiți din nou jQuery. Dar, în opinia mea, dacă este posibil să faci fără scripturi suplimentare și să folosești doar etichete HTML, atunci merită să faci fără scripturi. Și iată că ne vine în ajutor Etichetă HTML eticheta. Articolul „Comutarea butoanelor radio și a casetelor de selectare făcând clic pe o semnătură în HTML” a descris deja utilizarea acestuia.

Aici, în mod similar, eticheta componentei de selecție a fișierelor este înconjurată de o etichetă de etichetă. În etichetă vom adăuga și textul „Încărcați fișierul”

Nume de fișier:

Incarca fisier

Acum tot ce rămâne este să atribuiți stiluri pentru a proiecta etichetele existente. Componenta de selecție a fișierelor este ascunsă. Dați etichetei aspectul dorit:

#myform p (
text-align: centru;
marjă: 10px 0;
}
#myform #myfile (
afișaj: niciunul;
}
#myform #mylabel (
culoare de fundal: #fd685b;
umplutură: 10px 20px;
culoare: #fff;
cursor: pointer;
}

3,9 din 5

Buna ziua. Astăzi vreau să vă spun despre cum puteți schimba aspectul unui fișier de intrare, cum să stilați un fișier de intrare pentru a se potrivi designului dvs., cum să stilați .

Suficient Cuvinte cheie=). Cred că înțelegi ideea.

Cert este că schimbarea aspectului intrărilor, de regulă, nu provoacă dificultăți, dar acest tip de intrare este diferit de celelalte. În primul rând, acest lucru se datorează securității și, în al doilea rând, faptului că fiecare browser afișează acest element diferit, iar acest lucru este aproape imposibil de influențat.

Acest articol vă va spune cum să obțineți aspectul fișierului de intrare de care aveți nevoie.

Mai întâi, să ne uităm la modul în care sunt afișate intrările de fișiere fără a aplica niciun stil în diferite browsere.

Drept urmare, peste tot, cu excepția safariului, vedem începutul adresei, care nu are aproape nicio semnificație semantică. Mă îndoiesc că nimeni nu știa despre acest lucru, dar numai băieții de la Apple au acordat atenție acestei prostii și au făcut posibil să se vadă imediat nu numai numele fișierului selectat, ci și pictograma. Vom implementa aceeași funcționalitate de introducere a fișierelor pentru toate browserele.

Dar mai întâi, să ne familiarizăm cu problema.
1. Folosind JS, nu putem simula un clic pe o astfel de intrare. Iată ce spun sfintele scripturi ale specificației DOM despre asta:

clic
Simulați un clic de mouse. Pentru elementele INPUT al căror atribut tip are unul dintre următoarele valori: „button”, „checkbox”, „radio”, „reset” sau „submit”.
Fără parametri
Fără valoare de returnare
Fara exceptii

Adică, folosind metoda click putem simula un clic pe aproape toate tipurile de intrări, dar nu pe o intrare de fișier. Acest lucru se face pentru a proteja computerul clientului: in in caz contrar proprietarul site-ului ar putea primi cu ușurință orice fișiere de pe computerul clientului. Deși, pe de altă parte, când se face clic, este apelată doar fereastra de selecție a fișierelor. Într-un fel sau altul, în centrul de dezvoltatori Firefox acest fapt este desemnat ca un bug.

Există o soluție și nu noi am inventat bicicleta, am reglat-o. Toți cei care stilează intrările urmează același model: o intrare cu transparență zero este creată și plasată deasupra unui buton sau a unei imagini care reprezintă un buton de selecție a fișierului.

Principala dificultate constă în următoarea problemă.

2. Nu putem influența liber dimensiunea butoanelor „review” pentru a ajusta intrarea la dimensiunea imaginii suprapuse. În Firefox, nu putem schimba deloc aspectul fișierului de intrare. folosind css(cu excepția înălțimii). Adică, sarcina este de a determina dimensiune optimă imagine suprapusă la cantitate minimă pixelii nu se puteau da clic, iar zonele goale nu au răspuns la clicuri.

Să ne uităm la zonele pe care se poate face clic și la dimensiunile acestora în diferite browsere.