Pubblicato il 13/01/2024 da alnao nella categoria Css3 & Bootstrap

Fin dalla prima versione di HTML, i programmatori hanno avuto a disposizione alcuni tag per permettere agli utenti di inserire dati o di effettuare scelte e/o selezioni: si fa sempre riferimento ai tag INPUT e SELECT per costruire pagine dinamiche con l’inserimento dei dati da inviare ad un server grazie al tag FORM e alle potenzialità del protocollo HTTP.

Con le varie versioni di HTML e CSS si sono aggiunti molte nuove possibilità di utilizzo dei tag input e alcuni nuovi attributi sono stati inseriti con la versione tre di CSS. Fin dalle prime versioni di HTML e di CSS sono disponibili:

  • type il tipo di input, per esempio “text” o “checkbox”
  • name il nome dell’elemento all’interno del form con l’eventuale nome del parametro inviato al server
  • value il valore iniziale del campo
  • readonly il campo è di sola lettura
  • disabled il campo è disabilitato
  • size la grandezza dell’input in caratteri
  • maxlength la lunghezza massima in caratteri

Mentre sono state aggiunte diverse nuove proprietà, dalla versione 5 di HTML e dalla versione 3 di CSS sono disponibili nuove proprietà per i tag INPUT:

  • autocomplete indica al browser di visualizzare o meno all’utente la finestrella per l’autocomplete, se non specificato vale di default “on” quindi viene mostrato, valore alternativo autocomplete=”off”
  • autofocus indica al browser di attivare l’input al caricamento della pagina tramite il focus
  • form è possibile posizionare l’input fuori dal tag form e indicare tramite questa proprietà a quale/quali form questo tag appartiene
  • formaction nei tag input di tipo submit indica una action alternativa a quella definita nel tag form
  • formenctype nei tag input di tipo submit indica una ctype alternativa a quella definita nel tag form, per esesempio con il valore “multipart/form-data”
  • formmethod nei tag input di tipo submit indica una method alternativa a quella definita nel tag form, per esempio formmethod=”post”
  • formnovalidate nei tag input di tupo submit indica se non eseguire le validazioni “client” al submit
  • formtarget nei tag input di tipo submit indica un target alternativo a quella definita nel tag form, per esempio formtarget=”_blank”
  • height and width definisce le dimensioni di un input di tipo image
  • list se si definisce un dominio di valori tramite il tag datalist è possibile agganciare la lista ad un input di tipo text
  • min and max nei tag input di tipo number e date è possibile definire un massimo ed un minimo valore
  • multiple nei tag input di tipo file è possibile indicare se si possono selezionare più file
  • pattern (regexp) nei tag input di tipo text indica una regola di inserimento espressa in regexp, per esempio pattern=”[A-Za-z]{3}”
  • placeholder indica un test da visualizzare di “sfondo” quando il campo è vuoto, non fa parte del valore dell’input
  • required indica se, in fase di validazione, l’input deve essere valorizzato
  • step nei tag input di tipo number, indica il modulo di valorizzazione, per esempio se step=”3″ i valori possibili sono: -3, 0, 3, 6, …

In particolare form e input sono evoluti in modo che il browser possa validare in maniera semplice i dati inseriti dall’utente senza la necessità di usare Javascript, per esempio per il tag form sono disponibili queste nuove proprietà:

  • autocomplete indica se tutti i tag all’interno del form ereditano la proprietà autocomplete, di default vale “on” quindi gli autocomplete sono attivati
  • novalidate indica al browser di non eseguire la validazione “client” del form al momento del submit

Un esempio di validazione e gestione degli errori di un tag input è:

<input type="text" id="username" name="username"
  placeholder="Inserire l'username" 
  oninvalid="this.setCustomValidity('Username non valido')"
  oninput="setCustomValidity('')"
  autocomplete="off" 
  autofocus
  required
/>

In questo esempio dove è stato definito anche la proprietà oninvalid per visualizzare un messaggio di errore personalizzato quando la validazione va in errore. Per personalizzare l’aspetto grafico con CSS dei form e degli input ci sono moltissime possibilità, esistono infatti molti siti specializzati che mettono a disposizione esempi come freefrontend mentre il sito ufficiale W3C mette a disposizione alcuni esempi di input e form.

MENU