Introducere în Web Development

Fișiere

                    <input type="file" />
                

Acest tip de input permite încărcarea de fișiere.

În mod normal, se poate încărca doar câte un fișier, dar atributul multiple permite încărcarea mai multora.

Se pot limita fișierele ce pot fi selectate, prin atributul accept, care primește fie o listă de extensii, fie un tip MIME.

Stilizare

Inputul de tip fișier este altul care arată diferit pe diferite browsere și nu poate fi stilizat ușor. Va trebui să folosim trucuri pentru a ascunde inputul standard.

De exemplu, am putea pune inputul într-un <label>, pe care să îl stilizăm pentru a arăta ca un buton.

                    .file-picker input {
  width: 0;
  height: 0;
  padding: 0;
  opacity: 0;
}

.file-picker {
  background: aliceblue;
}
                

                    <label class="file-picker">
  Alege fișier
  <input type="file" />
</label>


                

Din JS, am putea modifica textul astfel încât să afișeze numele fișierului pe care l-am selectat. Acesta este disponibil în proprietatea files a obiectului DOM ce reprezintă elementul de input.

Input ascuns

                    <input 
  type="hidden" 
  name="secret" 
  value="Să nu spui nimănui" 
/>
                

Este un tip de input care nu afișează nimic în pagină, însă valoarea sa va fi serializată (atributul value).

În Web-Development-ul modern, nu prea se mai folosește, dar e posibil să fii întrebată de el la interviuri tehnice sau examene.
Era folosit pentru a da informații ascunse din formulare către server. De exemplu un token de siguranță care îi spune serverului că datele vin de la site și nu de la vreun script extern.

Butoane

Elementul <input> are și tipurile submit, reset și button, dar acestea nu se folosesc. În schimb, se preferă să se folosească elementul <button> care la rându-i poate avea atribut type cu una din aceste valori.

submit - La apăsarea butonului, va face ca formularul să fie trimis către server.
reset - La apăsare va face ca formularul să se reseteze. Adică toate valorile vor fi setate la valoarea din value
button - Nu face nimic special la apăsare, dar se poate detecta ușor din JavaScript când s-a apăsat.

                    <button type="submit">
  Trimite
</button>