<

Campo del form

Il blocco gutenberg Campo del form è un blocco personalizzato del wordpress Gpci framework; nella maggior parte dei casi verrà utilizzato insieme a un blocco form ma è anche possibile utilizzarlo indipendentemente, ad esempio per avviare funzioni javascript basate sugli input o i click dell'utente. Il blocco è composto da un div html che racchiude label e campo ed è indicato utilizzare il gruppo di controlli posizionamento con proprietà css display:flex per definire istantaneamente la direzione e la posizione dei componenti.

Controlli del campo del form

Dopo avere inserito il blocco è necessario configurare alcuni controlli per definire il campo. Alcuni attributi sono comuni a tutti i tipi di campo, altri invece sono specifici per tipo (come textarea e select). Va specificato che quasi tutti i controlli specifici per questo blocco sono relativi al campo e non al div contenitore come nel caso del gruppo di controlli attributi.

Controlli comuni

I controlli comuni a tutti i tipi di campo sono subito visibili nella barra laterale InspectorControl:

Nome

Stringa che verrà usata come attributo name. Per poter usare il valore spedito tramite un form questo campo è obbligatorio. Come regola generale utilizzare lettere, trattini medi/bassi e numeri e iniziare con una lettera.

Tipo di valore

Eventuale conversione dinamica relativa l'attributo id. Utilizzare se il campo è all'interno di un ciclo query.

Id

Stringa che verrà usata come attributo id, aggiornerà automaticamente anche l'attributo ancora del blocco (in avanzate). Compilare se la label viene visualizzata ( per l'attributo for ) oppure il campo è all'interno di un ciclo query ( in questo caso convertire a valore dinamico ). Come regola generale utilizzare lettere, trattini medi/bassi e numeri e iniziare con una lettera.

Label

Stringa che verrà usata come contenuto del tag label: compilare sempre in quanto se nascosta verrà usata come attributo aria-label.

Nascondi label

Nasconde la label.

Tag

Selezionare il tag del campo compilabile.

Type

Compare se il tag lo richiede, selezionare l'attributo type per completare ad esempio il tag input.

Placeholder

Compare solo se inerente. Se compilato, aggiungerà l'attributo placeholder al tag del campo.

Required

Se true, aggiungerà l'attributo required al tag del campo e farà comparire il controlli successivi per Oninvalid.

Tipo di messaggio

Scegliere come i messaggio nel campo successivo verrà visualizzato tra le seguenti scelte:

  • fumetto - classico messaggio del browser per campo invalido ma con un messaggio personalizzato. In questo caso verrà anche aggiunto automaticamente un attributo oninput per il ricontrollo automatico del campo
  • alert - il messaggio verrà visualizzato in un alert
  • codice personalizzato - inserire direttamente il codice javascript per visualizzare il messaggio secondo le proprie preferenze

Oninvalid

Inserire qui il messaggio o il codice javascript per far visualizzare un'eventuale notifica di campo invalido all'utente.

Disabled

Se true, aggiungerà l'attributo disabled al tag del campo.

Larghezza

Se compilato, verrà aggiunto al tag del campo un attributo style contenente la proprietà width definita. Questo controllo ha associato un gruppo di pulsanti con alcuni valori comuni preassegnati, è comunque sempre scrivibile manualmente.

Valore iniziale

Sono presenti due controlli:

  1. conversione dinamica del valore
  2. valore: assegnerà automaticamente al campo un valore predefinito appena caricata la pagina. Questo controllo è utile nei form php di tipo GET (quindi molto probabilmente nelle query php) per segnalare all'utente la ricerca correntemente impostata e nei form inviati via javascript per filtrare le query correttamente in certi contesti.

Controlli per tipo di campo

Vari tipi di campo hanno attributi speciali richiesti o comunque utili al loro funzionamento. Questi controlli compaiono soltanto per i tipi di campo in cui possono essere utili. Tenere presente che per tutti gli attributi non ancora integrati qui è sempre possibile settarli manualmente utilizzando il gruppo di controlli attributi.

Checked

Per checkbox: se true la checkbox sarà spuntata di default.

Rows

Per textarea: setta l'attributo rows.

Cols

Per textarea: setta l'attributo cols.

Multiple

Per select: aggiunge l'attributo multiple.

Opzioni

Per select: configura le opzioni (fa comparire i controlli necessari). Le opzioni possono essere di due tipi attivabili contemporaneamente:

Opzioni statiche

E' possibile aggiungere opzioni a piacere cliccando sul pulsante aggiungi option. Per ogni opzione settare il value, il nome visibile e, se desiderato, anche l'attributo selected. L'attributo selected sarà applicato solo all'ultima opzione con l'attributo (per select senza attributo multiple) e a tutti i tag option (per select con attributo multiple)

Opzioni dinamiche

Le opzioni dinamiche possono essere attivate insieme alle statiche ma al momento compariranno sempre per ultime. Se attivate le opzioni dinamiche comparirà il controllo origine riempimento in cui è possibile decidere come le opzioni saranno configurate selezionando tra:

Campo metabox

Riempire i due campi seguenti:

  • Id metabox: scrivere l'id dellla metabox (gruppo di campi) che contiene il campo personalizzato
  • Id campo: scrivere l'id del campo personalizzato (il select) da cui ottenere le opzioni
Nome funzione

Scrivere nel campo apposito il nome della funzione senza argomenti, la funzione deve generare tutti i tags option desiderati. Esempio:

Nome funzione: ListaUtenti

function ListaUtenti() {
    $users = get_users();
    $option = '';    
    foreach( $users as $user ){
        $option .= '<option value="'.$user->ID.'">'.$user->display_name.'</option>'; 
    }
    return $option;
}
Php

Scrivere nella textarea Il codice php per ritornare i tag option. Il codice sarà processato via eval quindi attenzione a cosa si scrive qui. Esempio (stesso risultato di prima):

$users = get_users();
$option = '';    
foreach( $users as $user ){
	$option .= '<option value="'.$user->ID.'">'.$user->display_name.'</option>'; 
}

//ritornare sempre i tags sottoforma di stringa
return $option;