Link-uri și butoane

#<a> element

Elementul <a> denumit și ancoră sau link este unul din cele mai uzuale elemente folosite pentru construirea paginilor web. Dacă vrem să ne mutam la o altă pagină sau la o altă zonă în cadrul aceleiași pagini, atunci vom folosi acest element. Pentru a specifica destinația link-ului vom folosi atributul href.

#Exemple unde folosim tag-ul a

# Cele mai uzuale

<a href="https://frontend.ro/"> Frontend.ro </a>

În cazul acesta, spunem că este un link către un URL absolut - adică un URL care conține întreaga adresă a unei pagini. Acest tip de URL este deseori întâlnit atunci când un website face legătura către un alt website.

Putem avea și URL-uri, a căror destinție finală se calculează în funcție de pagina pe cară ne aflăm. În exemplul de mai jos avem același link atât în about.html cât și în home.html :

<a href="info.html"> Go to info page </a>

Totuși, ajungem la destinații diferite în funcție de pagina pe care suntem.

Foarte utile sunt și link-urile care duc către o secțiune ale aceleiași pagini sau așa numitele jump links.

<a href="#comments"> 
Sari la secțiunea de comentarii
</a> 
<h2 id="comments">Comentarii</h2>
<!-- ... -->

Observați atributul id. Aceasta este modalitatea prin care facem legătura între link și secțiunea paginii la care vrem să ajungem.

Deși nu am ajuns la partea de CSS, merită menționat că jump links pot să beneficieze de smooth scrolling pentru ca utilizatorii să aibă o experiență mai plăcută:

#Link-uri către email-uri

Sunt situații în care vrem să oferim unui utilizator posibilitatea de a deschide email-ul precompletat către o adresă. În cazul acesta ne vom folosi de mailto:

<a href="mailto:hello@frontend.ro">
Trimite email la Frontend.ro
</a>

Apasă pe linkul alăturat și ți se va deschide clientul de email, precompletat cu adresa noastră 👉 Trimite email la Frontend.ro.

#Link-uri către numere de telefon

Mai mult, dacă vrem să arătăm în pagină numere de telefon e recomandat să folosim link-uri, pentru a ne deschide direct aplicația prin care sunăm:

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>

Apasă pe unul din numerele de mai jos pentru a vedea cum sunt precompletate pe telefon (poți să dai click fără griji, nu le vei apela dacă faci asta)

• +49 157 0156
• (555) 5309

#Link-uri de download

Împreuna cu atributul download putem instrui browser-ul să downloadeze fișierul din cadrul link-ului în loc să îl deschidă în pagina curentă:

<a href="https://FrontEnd.ro/logo.png" download> Download our logo </a>

Apasă pe linkul de alături pentru a downlada logo-ul nostru 👉 Downloadează logo-ul nostru

Acum că ne-am familiarizat cu situații din practică unde putem folosi link-uri, ne-am obișnuit puțin cu markup-ul și cu câteva dintre atributele ce pot însoți elementul, putem să vorbim de câteva bune practici pe care să le avem în vedere.

#Atributul target=”_blank”

În afară de atributele prezentate, un alt atribut des folosit este target, care ne indică cum să deschidem link-ul din href.

Ca și developeri cel mai des ne vom întâlni cu situația de a folosi target="_blank" (link-ul va fi deschis într-o fereastră sau un tab nou). Când folosim valoarea _blank, e recomandat să adăugăm un nou atribut pentru securitate și anume: rel=”noopener noreferrer” .

<a href="http://frontend.ro" target="_blank" rel="noopener noreferrer">
Link-ul se deschide într-un nou tab
</a>
    

Apasă pe următorul link pentru a-l deschide într-un nou tab 👉 Link-ul se deschide într-un nou tab

#Întrebări BONUS

În continuare vom raspunde la câteva întrebări pe care noi ca și developeri ni le putem adresa pe măsură ce codăm și ne întâlnim cu diverse situații:

Putem folosi doar un icon în interiorul unui link?

Din păcate un simplu icon nu ne-ar oferi suficientă informație contextuală despre link, deci nu ar fi chiar recomandat. Dacă totuși suntem nevoiți să folosim un astfel de icon, o bună practică ar fi să adăugăm în link niște text ascuns vizual, care va fi totuși citit de screen readers:

<a href="https://fontawesome.com/">
<svg width="24" height="24" viewBox="0 0 1024 1024">
<g>
<path d="M384 928c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z" />
<path d="M1024 928c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z" />
<path d="M1024 512v-384h-768c0-35.346-28.654-64-64-64h-192v64h128l48.074 412.054c-29.294 23.458-48.074 59.5-48.074 99.946 0 70.696 57.308 128 128 128h768v-64h-768c-35.346 0-64-28.654-64-64 0-0.218 0.014-0.436 0.016-0.656l831.984-127.344z" />
</g>
</svg>
// Se comporta ca un label ce e ascuns
<span style="position: absolute; opacity: 0">
Coș de cumpărături
</span>
</a>

Spre exemplu, link-ul alăturat conține doar un icon pentru un coș de cumpărături, dar e în același timp accesibil pentru cei ce folosesc screen readere 👉: Coș de cumpărături

Atributul style este folosit pentru a adăuga reguli CSS elementelor. Încă nu am ajuns la acel capitol deci e ok dacă nu știi cum să-l folosești. Totuși, te rugăm să-l păstrezi în exemplu, pentu a funcționa cum ne așteptăm.

Putem folosi o imagine în interiorul unui link?

Daaa. Vom avea nevoie de multe ori să facem asta în proiectele noastre.

<a href="https://FrontEnd.ro">
<img 
src="https://FrontEnd.ro/images/logo.png" 
alt="Frontend.ro LOGO." 
height="48" 
/>
</a>

Alături avem o imagine într-un link. Dacă dăm click pe ea, ne va duce pa pagina principală (home page) 👉

#<button> element

Elementul html <button> este folosit atunci când vrem să facem o acțiune (exemple: arată/ascunde un meniu, play sau pause la un video, trimite un comentariu, etc)

<button type="button">
Open menu
</button>

Spre deosebire de link-uri, butoanele NU schimbă pagina. Totuși dacă avem un formular cu un buton de login, dăm click pe el, așteptăm, apoi suntem direcționați către o nouă pagină, putem spune că acțiunea declanșată de buton a schimbat pagina. În cazul acesta e ok :)

#Atributul type

Cele 2 tipuri de butoane pe care le vom folosi cel mai des în aplicațiile noastre sunt:

• type="button"
• type="submit": (utilizate în cadrul formularelor - vom discuta mai multe în momentul în care vom ajunge la această lecție)

O bună practică este să specificăm mereu tipul acestora.

Pe lângă submit și button, type mai pot avea și valoarea reset. Uite un exemplu care le include pe toate 3:

<form action="/" method="POST">
<input type="text" name="name" id="name" style="padding: 0.7em; border-radius: 5px; "/>

<!-- Dacă vrem să fie mai explicit... -->
<button type="submit" style="padding: .5em; border: none; color: #fff; font-size: 1.2em; border-radius: 5px; background: #58af58">Submit</button>

<!-- ...sau să resetăm inputurile la valoarea
lor inițială (tinde să enerveze userii) -->
<button type="reset" style="padding: .5em; border: none; color: #fff; font-size: 1.2em; border-radius: 5px; background: #77838b">Reset</button>

<!-- Acesta împiedică ca acțiunea de submit să 
aibă loc,  ceea ce poate fi util uneori în cadrul 
unui form -->
<button type="button" style="padding: .5em; border: none; color: #fff; font-size: 1.2em; border-radius: 5px; background: #2980b9">Non-submitting button</button>
</form>
  

#Atributul disabled

Acest atribut boolean împiedică interactivitatea cu butonul: nu poate fi apăsat sau focusat. Cel mai comun pattern este în cazul autentificării pe un site:

1. completăm formularul
2. apăsăm butonul de login
3. butonul devinde disabled cât timp se trimit datele la server și se așteaptă un răspuns (pentru a preveni cazul în care utilizatorul încearcă din nou în timp ce autentificarea e înca în proges)
4. dacă logarea eșuează, putem afișa un mesaj informativ în care să explicăm de ce nu a putut avea loc și să facem enabled la buton abia la final, pentru a reîncerca.

#Link-uri vs butoane

Ca o scurtă recapitulare, folosim link-uri dacă se schimbă pagina sau facem jump la o secțiune din pagină, iar de butoane dacă facem o acțiune.

Nu putem avea link-uri în butoane sau butoane în link-uri - nu e valid markup-ul.