Salt la pagină făcând clic pe butonul html. Când să utilizați elementul Buton
Îl folosești, hmm... ei bine, când vrei să pui un buton pe pagină pe care utilizatorul poate da clic, nu? Din păcate, lucrurile sunt puțin mai complicate. În principiu, acest lucru este aproape de adevăr, dar să studiem problema mai profund.
Elementul în sine arată astfel:
Care este cel mai frecvent rezultat al clicului pe ceva de pe un site web? Navigarea la o nouă adresă URL, ca și cum ați fi făcut clic pe un link (element).
Element
Când un buton este apăsat, anumite acțiuni sunt efectiv efectuate dacă se folosește contextul adecvat...
Butonul este un element de formular
Formularele web pot conține butoane pentru efectuarea (confirmarea) acțiunilor. Ai putea crede că arată cam așa:
Element înfășurat
Cu toate acestea, formularele pot avea și butoane de anulare. Puteți duplica aspectul acțiunii butonului schimbând comportamentul implicit de la efectuarea (confirmarea) acțiunii la anularea:
Făcând clic pe acest buton, toate celelalte câmpuri de introducere (și zone de text) vor elimina din blocul părinte
Butoanele pot conține conținut
Motivul principal pentru utilizarea elementului
A confirma
Atâta timp cât persistă, acest conținut mixt va fi afișat pe ecran.
Din câte îmi pot da seama, nu există prea multă limită la ceea ce poți pune în interiorul unui buton, așa că poți pune orice acolo pentru a crea niște butoane cu adevărat fanteziste. De asemenea, este posibil să folosiți pseudo elemente.
Să lăsăm deocamdată subiectul stilurilor , cu toate că browsere diferite au de obicei stiluri speciale care sunt aplicate butoanelor. Dacă doriți, puteți păstra stilurile aplicate de browsere sau le puteți elimina în întregime, iar apoi stilul dvs. implicit va înlocui stilurile browserelor.
Notă: „Dacă butonul nu are un href valid, este doar un element”
Amintiți-vă, am scris mai devreme că acest subiect îmi face o adevărată plăcere. Acesta este ceea ce m-a inspirat să scriu acest articol. Mi-am imaginat ce plăcere aș obține luând în considerare diverse incidente. Ca:
Am deja aceste butoane.
Cel mai probabil, codul de mai sus înseamnă ceva de genul: voi face clic pe un buton pentru a face ceva cu JavaScript. Cumva, acest lucru pare a fi mai bun decât utilizarea obișnuită
, deoarece aveți posibilitatea de a schimba aspectul cursorului și toate celelalte stiluri în mod implicit.
in afara
in orice caz inca pare a fi mai bine
Chiar nu face nimic in afara
Bun. Să punem JavaScript
Acesta este probabil cea mai bună soluție. Dacă JavaScript este necesar pentru orice acțiune de clic, atunci pentru element în principiu, puteți face fără să rulați JS.
Dar putem face următoarele:
// 1. Creați un buton var button = document.createElement("button"); button.innerHTML = „Fă ceva”; // 2. Plasează-l var body = document.getElementsByTagName("body"); body.appendChild(button); // 3. Adăugați acțiuni de gestionare button.addEventListener ("clic", function() ( alert("a făcut ceva"); ));
Poți face cu ușurință" butonul de adăugare» parte a fluxului de lucru JavaScript.
Când este mai bine să folosiți link-uri?
Dacă aveți tranziții hipertext către alte pagini, atunci este mai convenabil să le proiectați cu un link, astfel încât să puteți utiliza ancora. Chiar dacă îi anulați comportamentul prin JavaScript.
Butonul de căutare generează de obicei lansarea scripturilor de căutare Ajax - în timp ce linkul poate indica pur și simplu către pagina de căutare;
Se lansează butonul „publicare”. urmatorul pas publicarea a ceva de care utilizatorul are nevoie - dar linkul poate duce pur și simplu la pagina / publish /;
Butonul pentru miniaturile imaginii deschide un panou separat care afișează imaginea marime mai mare- iar linkul poate indica pur și simplu adresa URL a acestei imagini mărite.
Dacă nimic altceva nu se potrivește, inserați un buton cu JavaScript.
Probleme similare
S-ar putea să ajungi cu ceva asemănător cu ceea ce am făcut eu!
Sunt bine
Dar tu însuți nu ai dreptate încă. MDN acoperă această problemă în detaliu.:
Notă: Aveți grijă când așezați legături cu funcții de buton. Acțiunile butoanelor sunt de obicei invocate cu tasta Space, în timp ce acțiunile de legătură sunt invocate cu tasta Enter.
De asemenea, va trebui să adăugați o cheie de gestionare a acțiunilor care va răspunde la apăsarea tastei Spațiu pentru a se potrivi cu butonul original.
Ei bine, asta-i tot. Și hmm... fă lucrurile interactive corect.
Traducerea articolului " Când să utilizați elementul buton» a fost pregătit de o echipă prietenoasă de proiect.
tutorial
Acesta nu este un ghid definitiv pentru butoane sau un exemplu de design incredibil, ci doar o încercare de a arăta că există o diferență între link-uri și butoane.
Pentru cine este acest articol?
În primul rând, pentru un designer care realizează layout-ul site-ului, dar nu termină detaliile tipice web-ului. O încercare ciudată de a explica faptul că site-ul web se află dincolo de tipărirea plată.
În al doilea rând, pentru proiectantul de aspect căruia i-a venit aspectul fără stări, astfel încât să existe unde să trimită designerul.
În al treilea rând, în loc de o altă tiradă despre diferența de butoane / link-uri și necesitatea designului de stat, dați doar un link.
Poate că nu cunoști Tses, dar statele trebuie să deseneze!
De la designer, pe lângă aspectul cu starea obișnuită a link-ului sau a butonului, este necesar să se aplice diverse state, pentru a nu se potrivi designerului de layout bathert. De exemplu astfel:
Mulțumiri
Multumesc pentru lectura. Tot ce este scris aici nu este 100% adevărul suprem. repertoriu
GitHub
Link către depozitul acestui articol. Dacă doriți să adăugați sau să corectați, vă rugăm să trimiteți o cerere de tragere
Numai utilizatorii înregistrați pot participa la sondaj. , Vă rog.
Butonul în sine nu poate fi făcut un link, HTML interzice combinarea elementelor între ele (precum și ) și . Astfel, nu puteți imbrica un buton într-un link și un link într-un buton. Există trei moduri de a face clic pe buton să deschidă o pagină web.
Folosind HTML
buton pus în interiorul unui element
Exemplul 1. Atributul de acțiune
Buton
În acest exemplu, făcând clic pe butonul se deschide pagina web new.html într-o filă nouă.
O formă nu poate fi imbricată în alta. Înainte de a adăuga un buton, asigurați-vă că aveți un singur formular.
Folosind CSS
Deoarece butonul nu poate fi făcut un link, în general refuzăm și stilați linkul pentru a arăta ca un buton. Exemplul 2 arată clasa btn , atunci când este adăugată unui element linkul își schimbă aspectul.
Puteți utiliza evenimentul onclick pentru a naviga la pagina web specificată, adăugându-l la element . În interiorul onclick scriem document.location , iar ca valoare adresa paginii web dorite (exemplul 3). Atenție la combinația de ghilimele, adresa paginii web este luată între ghilimele simple.
Există două abordări pentru a crea un buton pe un site ca link. Să luăm în considerare fiecare dintre ele în detaliu.
1. Butonul Imagine
Aceasta este cea mai simplă abordare pentru a crea un buton de link pe un site web. Pentru a face acest lucru, trebuie doar să găsiți o imagine potrivită pentru buton. De exemplu, imaginea cu butonul dvs. se numește button.jpg . Apoi, pentru a crea un link, codul ar trebui să fie după cum urmează:
...
...
Acesta este ceea ce se transformă pe pagina site-ului:
Apropo, există un site special pentru crearea de imagini pentru butoane: http://dabuttonfactory.com/. Aici puteți crea un buton după gusturile dvs. gratuit (setați un stil, selectați o imagine, scrieți textul potrivit etc.).
2. Buton folosind eticheta HTML
În loc de URL1 și URL2, trebuie să scrieți adresele paginilor în care doriți să navigați. Dacă doriți ca linkurile să se deschidă în file noi (similar cu atributul target="_blank" al etichetei a), atunci în loc de onclick="javascript:window.location="..."" trebuie să vă înregistrați onclick="javascript:window.open="...""(înlocuiți locația cu deschisă).
Sunt aproape sigur că veți dori să proiectați butonul într-un fel diferit (sub designul site-ului dvs.). Pentru a face acest lucru, introducem clasa btn:
После этого кнопка будет выглядеть следующим образом на странице.