Guide

Corso HTML – Lezione 13: Elementi Input

Elementi input

Elementi input

Gli elementi input sono utilizzati per dare all’utente la possibilità di inserire dati o effettuare scelte (Chechboxes, Text, Radio Buttons, Images…)

Ciascuno degli elementi input che andremo a descrivere dovrà essere inserito all’interno di un form. La maggior parte di questi elementi dovrà essere inserito mediante un tag <input type=”…”>, il cui valore varierà in base al tipo di elemento che si desidera utilizzare.

Attributi elementi Input

  • Name specifica il nome da assegnare all’elemento, sarà utilizzato per specificare, nella pagina a cui si sono inviati i dati, da quale elemento si desidera prelevare il valore ($_POST[name] – in caso di invio mediante metodo POST);
  • Alt utilizzabile solo per il type=”image”, specifica un testo alternativo per l’immagine, si consiglia di inserire poche parole che possano spiegare cosa è rappresentato nell’immagine. Nei siti web adibiti al controllo del formato, tramite i quali è possibile visualizzare se vi sono errori di codice, l’omissione di questo attributo è considerata errore.
  • Readonly specifica un campo utilizzato in modalità solo lettura, fa riferimento ai type text e password;
  • Maxlength per i campi di inserimento testo, specifica la lunghezza massima, espressa in caratteri, per qual campo;
  • Disable dà la possibilità di scegliere se, al caricamento della pagina, l’elemento deve essere disabilitato;
  • Checked specifica se, al caricamento della pagina, l’elemento checkbox o radio deve essere settato sul valore on, di default questo è impostato su off non sono quindi richiesti specifici attributi per svolgere questa mansione.
  • Size specifica le dimensioni dell’elemento in pixels, non è valido per text e password;
  • Src (source) prevede il percorso dell’immagine che si desidera inserire come submit button;
  • Value è il valore che viene trasmesso alla pagina specificato come “value” dell’attributo action;
  • Type specifica il tipo di input che si desidera utilizzare, possiamo avere diverse tipologie di input fra le quali:
      • button;
      • checkbox;
      • file;
      • hidden;
      • image;
      • password;
      • radio;
      • reset;
      • submit;
      • text.

Checkboxes e Radio Buttons

Mediante l’uso degli elementi input Checkbox e Radio Buttons è possibile implementare pagine web in cui dare all’utente la possibilità di effettuare una scelta, questo avviene grazie ai suoi stati on – off.

Nel caso degli elementi input Checkbox può essere usato in gruppo ovvero, mediante una lista di Checkboxes, è possibile effettuare scelte multiple, questa proprietà lo rende un “elemento non esclusivo”. L’elemento viene visualizzato come un piccolo quadratino vuoto quando impostato su off, compare una spunta al suo interno quando viene settato su on.

Diversamente, nel caso delle Radio Buttons, la scelta effettuata è esclusiva ovvero non prevede scelta multipla. L’elemento, se non modificato, si presenterà come un piccolo cerchio, vuoto se impostato su off o con un pallino verde al suo interno se su on.

<form action="pagine.php" method="POST">
<input type="checkbox" name="sale" value="sale"> Sale
<br>
<input type="checkbox" name="pepe" value="pepe"> Pepe
<br>
<input type="checkbox" name="paprika" value="paprika"> Paprika
<br>
<input type="radio" name="primo" value="primo"> Primo piatto
<br>
<input type="radio" name="secondo" value="secondo"> Secondo piatto
<br>
<input type="radio" name="contorno" value="contorno"> Contorno
</form>

Button Reset Submit

Fra gli elementi input presentati, questo non richiede l’utilizzo del tag input, pur rientrando nella medesima categoria. Per poterne usufruire bisogna servirsi dei tag <button></button>. Questo tag è molto utilizzato per interagire con funzioni javascript in caso di controllo sui dati inseriti. La sua funzione è la stessa svolta dal bottone di tipo <input>, in questo caso ci viene offerta la comodità di poter inserire all’interno dei tag testo e o immagini. Come per il tag <input> è necessario specificare un diverso tipo di bottone, possiamo avere button, reset submit.

<form action="pagina.php" method="POST">

<button name="reset" type="reset">Reset

<img src="reset.jpg" width="40" heigh="40" alt="oops">

</button>

</form>

I tipi di tasto reset e submit possono essere utilizzati anche con il metodo <input type=”…”>. Nel caso del tasto reset questo viene utilizzato per svuotare tutti i campi precedentemente riempiti, questo avviene limitatamente al form entro cui è inserito il reset.
Il tasto submit viene utilizzato per inviare tutte le informazioni raccolte all’interno del form in cui è inserito. Se vi dovessero essere altri form esterni, questi verrebbero ignorati.

File

Vengono utilizzati per consentire agli utenti di includere interi file dal proprio sistema in un invio di form. I file possono essere di testo, immagini o altri dati.

<input type="file" name="somename" size="chars">

Password e Text

Entrambi gli elementi input sono utilizzati per l’immissione di lettere e caratteri da parte dell’utente, la maggior parte dei browser ne setta le dimensioni di default a venti caratteri. Nel caso del type password non è data la possibilità di leggere i caratteri immessi, questi vengono sostituiti da un pallino nero. L’abbinamento dei due elementi è usato nell’implementazione di form per il login.

<form action="pagina.php" method="post">

<p>Username: <input type="text" name="user"><br>
Password: <input type="text" name="pass"></p>

</form>
Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Le guide più interessanti