HTML: i Form

Ci sono diversi tipi di form in HTML e puoi usarli per raccogliere informazioni dai visitatori del tuo sito, le informazioni vengono inviate ad un server che processa i dati con un linguaggio di programmazione che può essere PHP, Java, C#, VB.net etc.

scambio di informazioni client-server
scambio di informazioni client-server

Ogni componente dovremo inserirlo all’interno del tag form, di seguito la sua struttura

<form action="percorsoDelloScriptLatoServer/script.php" method="POST">
        <p>Qui inseriremo i tag per l'input</p>
</form>

Nota: ovviamente devi conoscere il linguaggio PHP e scrivere un opportuno script per manipolare i dati inviati dal form. Se ancora non lo conosci ti consiglio di lasciare vuoto il valore dell’attributo action e prendere padronanza dei tag HTML per l’input.

Se vuoi iniziare a conoscere il PHP ti consiglio questa lezione: PHP Le istruzioni base.

Text input

<form action="" method="POST">
        Nome utente:
        <input type="text" name="username" maxlength="20" placeholder="Nome utente"/>
</form>

Attraverso l’attributo name diamo un nome al valore che invieremo, in questo esempio username. L’attributo maxlength indica il numero massimo di caratteri digitabili mentre placeholder fornirà all’utente un ulteriore aiuto/esempio per inserire i dati.

Password input

<form action="" method="POST">
        Nome utente:
        <input type="password" name="password" minlength="6" placeholder="Password"/>
</form>

Noteremo che i caratteri immessi verrano automaticamente offuscati, minlength è particolarmente utile per stabilire un numero minimo di caratteri. Il tema della validazione client-side dei campi verrà trattato in un apposita lezione Javascript.

Text area

<form action="" method="POST">
        <p>Inserisci qui il tuo commento</p>
        <textarea name="comments" cols="30" rows="10">
            Scrivi qui...
        </textarea>
</form>

Con gli attributi cols e rows specifichiamo il numero di caratteri per colonne e per righe. Avremo quindi 10 righe ognuna con 30 caratteri digitabili.

out dei tag per inviare testo
out dei tag per inviare testo

Radio buttons

Nel caso vogliamo ottenere un’informazione rappresentata da una scelta univoca useremo i radio button

<form action="" method="POST">
        <p>Il tuo colore preferito</p>
       <input type="radio" name="color" value="pink"/>Rosa
       <input type="radio" name="color" value="red" checked="checked"/>Rosso
       <input type="radio" name="color" value="purple"/>Viola
</form>

l’attributo checked pre selezionerà il valore corrispondete

Checkboxes

Nel caso vogliamo ottenere un’informazione rappresentata da una scelta multipla useremo i checkboxes

<form action="" method="POST">
        <p>Il tuo linguaggio/i di programmazione preferito</p>
       <input type="checkbox" name="cod_lang" value="Java"/>Java
       <input type="checkbox" name="cod_lang" value="Python" checked="checked"/>Python
       <input type="checkbox" name="cod_lang" value="C"/>C
       <input type="checkbox" name="cod_lang" value="PHP"/>PHP
       <input type="checkbox" name="cod_lang" value="C++"/>C++
</form>

Drop-dow list box

<select name="devices">
            <option value="tablet">Tablet</option> 
            <option value="pc">pc</option> 
            <option value="smartphone">Smartphone</option>
</select>
output dei tag per compiere scelte
output dei tag per compiere scelte

Inviare le informazioni

<input type="file" name="user-song" /><br/> 
<input type="submit" value="Upload" />

Premendo sul bottone Scegli file si aprirà il file chooser del proprio sistema operativo

output tag per fare l'upload di un file
output tag per fare l’upload di un file

Nota: Il tag <input type=”submit”> va implementato in ogni form, è il pulsante che triggera l’invio dei dati al server.

Image button

<input type="image" src="img/btn_like.jpg"
    width="80" height="20" />

Il valore dell ‘attributo src deve corrispondere al percorso dell’immagine che avete scelto

I tipi di input

Il tag input grazie all’attributo type può automaticamente renderizzare un aspetto diverso e funzionale al tipo di dato che verrà scelto e inoltre da mobile verrà selezionata la tastiera virtuale migliore.

Esempio: se il type è number verrà attivata solo la tastiera numerica.

Di seguito tutti i type disponibili:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Pubblicato da Carlo Contardi

Carlo Contardi, docente di informatica e sviluppatore Full Stack, condivide la sua passione per la programmazione e l’informatica attraverso il suo blog Space Coding. Offre preziosi consigli e soluzioni pratiche a chi vuole imparare a programmare o migliorare le proprie abilità. 🚀👨‍💻

Translate »