Î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:

Fă ceva

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 pe cont propriu, nu o pot face. S-a vorbit mult despre permiterea „href peste tot”, dar nu a ieșit nimic din asta.

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

, în mod implicit, se comportă exact așa cum se arată mai sus.

Trimite

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

este că conține atât etichete de deschidere, cât și etichete de închidere ( ). Și asta înseamnă că poate fi distins de orice alt cod. În practică, apare adesea următoarea situație:

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

sunt nefolositor.

in orice caz inca pare a fi mai bine

Chiar nu face nimic in afara , acest element este încă, după părerea mea, mai bine folosit pentru alte acțiuni care nu necesită trecerea la altă pagină. Oricum, ele sunt mai bune decât link-urile false.

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ă a rula 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.

aceasta ameliorare progresivăîn cea mai bună utilizare. De exemplu:

• 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ă atunci când stabiliț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.

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:

Aceasta este cea mai de bază opțiune. Vă sfătuiesc să citiți despre etichetă și etichetă pentru a personaliza butonul exact în funcție de nevoile dvs.

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

Această opțiune este, de asemenea, una dintre metodele de creare a unui buton ca link. Voi da un exemplu elementar de buton creat folosind eticheta și :

... ...

Iată cum ar arăta pe pagină:

Î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:

После этого кнопка будет выглядеть следующим образом на странице.

Поддержка браузерами возможностей CSS3 и в связи с этим активное использование в веб-дизайне градиентов, теней и скруглений привело к тому, что стала размываться чёткая грань между встроенными элементами интерфейса и «нарисованными». На деле пользователю должно быть всё равно, что перед ним, ссылка или кнопка, пусть даже они выглядят абсолютно одинаково, ведь на то и другое можно щёлкнуть. В действительности же, неверное использование одного элемента взамен другого может привести к нарушению понимания логики сайта. Иными словами, посетителю сайта пользоваться им станет неудобно и некомфортно.

Давайте сделаем ссылку и кнопку, оформим их одинаково и посмотрим, чем же они различаются между собой кроме оформления. В примере 1 я вставил в код тег и

и применил к ним стилевой класс design , при этом постарался убрать различия, чтобы эти два элемента выглядели похожими друг на друга как близнецы.

Пример 1. Оформление элементов

HTML5 CSS3 IE Cr Op Sa Fx

Iată cum arată în browserul Chrome (Figura 1).

Nu există nicio diferență la prima vedere. Ambele elemente sunt aceleași, când mutați cursorul mouse-ului peste ele, acesta se transformă într-o „mână”. Puteți face clic și așteptați un bip de răspuns. Aici încep lucrurile mărunte, în care zace diavolul. Sistematizez diferențele în detaliu.

• în bara de stare, browserul arată adresa link-ului către care duce;
• linkul poate fi deschis într-o fereastră sau filă nouă cu butonul din mijloc al mouse-ului;
• linkul poate fi salvat prin meniul contextual al browserului.

• când se face clic pe butonul, acesta navighează la pagina specificată în atributul de acțiune al etichetei
  . Desigur, acest lucru funcționează dacă avem un buton imbricat într-un formular. În exemplul de mai sus, puteți chiar să faceți clic pe butonul, nu va duce la nimic;
• Puteți pune o funcție JavaScript pe un buton care va face ceva fantezist pe care un link nu poate.

Se pare că rezultatul clicului pe un buton este imprevizibil, spre deosebire de un link. Aici știm sigur că se va deschide o nouă pagină. În cazul unui buton, se poate deschide o nouă pagină sau poate fi executat un script, sau nimic. În plus, există o confuzie între buton și link. Butonul nostru super-stil nu prea arată ca el însuși și pentru a arăta că se poate face clic, stilurile adaugă o proprietate a cursorului cu o valoare a indicatorului. Dar acest lucru duce la faptul că acum butonul este perceput ca un link și unii utilizatori încearcă să deschidă un astfel de buton într-o filă nouă, ceea ce, desigur, nu este fezabil.

Ce se poate face pentru a elimina această contradicție. Există mai multe opțiuni.

1. Nu faceți nimic, lăsați utilizatorii să-și dea seama singuri.
2. Profitați de experiența JavaScript. În acest caz, legăturile obișnuite sunt subliniate (ceea ce, în general, nu este necesar), iar textul, la clic, deschide un bloc invizibil sau modifică conținutul paginii curente, este evidențiat cu o subliniere punctată.
3. Eliminați proprietatea cursorului din buton, lăsând valoarea implicită.

Textul punctat este prezentat în fig. 2. Pentru claritate, măriți ușor dimensiunea fontului.

Orez. 2. Buton cu subliniere a textului punctat

Din nou, dacă se face clic pe butonul pentru a deschide o altă pagină, linia punctată nu este necesară, deoarece va deruta utilizatorii. Deci, metoda 2 este potrivită numai pentru scripturile care lucrează în cadrul aceleiași pagini.

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 iar pentru formular specificam atributul action cu adresa paginii web (exemplul 1). În plus, puteți adăuga atribut target cu valoarea _blank , apoi pagina web se va deschide într-o nouă filă de browser.

Exemplul 1. Atributul de acțiune

Urmând un link

Î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.

Urmând un link

Rezultat acest exemplu prezentată în fig. unu.

Folosind JavaScript

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.