Form e Input in HTML

in data

Form e Input in HTML

6. Form e Input in HTML

I form (moduli) servono per raccogliere dati dagli utenti: possono essere moduli di contatto, registrazione, ricerca o ordine.
In HTML, un form è definito dal tag <form> e contiene vari tipi di campi di input.

6.1 Struttura di base di un form

<form action="processa_dati.php" method="post">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome">
    <br><br>
    <input type="submit" value="Invia">
</form>

  • action → indica dove inviare i dati (pagina o script che li elabora)

  • method → indica il metodo di invio:

    • GET → i dati sono visibili nell’URL (usato per ricerche, filtri)

    • POST → i dati non sono visibili nell’URL (usato per registrazioni, login)

6.2 Tipi di input più comuni

<input type="text" placeholder="Scrivi qui">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email">
<input type="number" min="0" max="100">
<input type="date">
<input type="checkbox"> Opzione
<input type="radio" name="scelta"> Sì
<input type="radio" name="scelta"> No
<input type="file">

Nota: per i radio button con lo stesso name si può selezionare solo una opzione.

6.3 Campi speciali

<textarea rows="4" cols="30" placeholder="Scrivi il tuo messaggio"></textarea>

<select>
    <option>Italia</option>
    <option>Francia</option>
    <option>Spagna</option>
</select>

<button type="submit">Invia</button>
<button type="reset">Resetta</button>

6.4 Attributi HTML5 utili

  • placeholder → testo guida dentro il campo

  • required → obbliga a compilare il campo

  • pattern → impone un formato con espressioni regolari

  • min / max → limite numerico o di data

  • step → intervallo di valori numerici

Esempio:

<input type="email" required placeholder="Inserisci la tua email">
<input type="text" pattern="[A-Za-z]+" title="Solo lettere">

6.5 Validazione di base

I browser moderni controllano automaticamente alcuni campi (come email, number) prima dell’invio.
Per una validazione più avanzata si usano JavaScript o controlli lato server (PHP, Python, ecc.).

English version
6. Form and input in HTML

Forms (modules) are used to collect data from users: they can be contact, registration, research or order modules.

In HTML, a form is defined by the <form> and contains various types of input fields.


6.1 Basic structure of a form

<Form Action = "Process_dati.php" Method = "Post"> 

<Label For = "Name"> Name: </bel> 

<Input Type = "Text" ID = "Name" Name = "Name"> 

<br> <br> 

<Input Type = "Submit" Value = "Send">

</fut>

  • Action → indicates where to send the data (page or script that processes them)
  • Method → indicates the sending method:
    • Get → The data are visible in the URL (used for searches, filters)
    • Post → The data are not visible in the URL (used for recordings, login)

6,2 more common types of inputs

<Input Type = "Text" Placeholder = "Write here">

<Input Type = "Password" placeholder = "password">

<Input Type = "email" placeholder = "email">

<Input Type = "Number" min = "0" Max = "100">

<Input Type = "Date">

<Input Type = "Checkbox"> Option

<Input Type = "radio" name = "choice"> yes

<Input Type = "Radio" Name = "Choice"> No

<Input Type = "File">

Note: for the Button radio with the same name you can only select an option.


6.3 Special fields

Multiple text area (<Textarea>)

<Textarea Rows = "4" Colls = "30" PlaceHolder = "Write your message"> </ Textarea>

Drop -down menu (<select>)

<Select> 
<option> Italy </ option> 
<option> France </ option> 
<option> Spain </ option>
</ select>

Buttons (<Button>)

<Button Type = "Submit"> Send </buton>
<Button Type = "reset"> reset </buton>

6.4 Useful HTML5 attributes

  • Placeholder → Guide text inside the field
  • Required → obliges to fill in the field
  • Pattern → imposes a format with regular expressions
  • min / max → numerical or date limit
  • step → interval of numerical values

Example:

<Input Type = "Email" Required Placeholder = "Enter your email">
<Input Type = "Text" pattern = "[a-za-z]+" title = "only letters">

6.5 Basic validation

Modern browsers automatically control some fields (such as email, number) before sending.

For more advanced validation, javascript or server side controls (php, python, etc.) are used.

Puoi seguire anche il mio canale YouTube https://www.youtube.com/channel/UCoOgys_fRjBrHmx2psNALow/ con tanti video interessanti


I consigli che offriamo sono di natura generale. Non sono consigli legali o professionali. Quello che può funzionare per una persona potrebbe non essere adatto a un’altra, e dipende da molte variabili.
Per supportare e far crescere il canale in modo semplice, rapido e gratuito, potete fare acquisti su amazon usando il mio link di affiliazione.
Questo implica che io prenda una commissione ogni volta che qualcuno faccia un qualsiasi acquisto utilizzando il mio link di affiliazione https://amzn.to/4cgJ3Ls

Commenti

Posta un commento