Lezioni
Inizia
Inizia il corso
CodeGym /Corsi /Python SELF IT /Form in HTML

Form in HTML

Python SELF IT
Livello 29 , Lezione 3
Disponibile

1. Introduzione ai form

I form in HTML sono uno strumento importante per permettere agli utenti di interagire con le pagine web. Consentono di raccogliere informazioni dagli utenti, come testo, selezioni da liste, file o altri tipi di dati, che possono poi essere inviati al server per l'elaborazione. In HTML, i form vengono creati utilizzando vari elementi, ognuno dei quali serve per un tipo specifico di input. L'elemento principale di un form è il tag <form>, che racchiude altri elementi come <input>, <textarea>, <button>, <select>, e molti altri.

Elementi principali dei form

Gli elementi dei form permettono di creare campi di input, bottoni, menu a tendina e altri componenti dell'interfaccia con cui l'utente può inserire dati. I tag principali usati nei form sono:

  • <form> — contenitore principale per tutti gli elementi del form. Definisce dove e come vengono inviati i dati.
  • <input> — elemento universale per creare campi di input di vari tipi (testo, password, radio button, checkbox, ecc.).
  • <label> — elemento associato ad un campo di input, permette di descriverne lo scopo.
  • <textarea> — campo per l'inserimento di testi multi-linea.
  • <button> — bottone per inviare il form o eseguire altre azioni.
  • <select> e <option> — menu a tendina in cui l'utente può selezionare una o più opzioni.

Esempio di un form semplice

HTML
      
    <form action="/submit" method="post">
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">Invia</button>
    </form>
HTML
          
<form action="/submit" method="post">
  <label for="name">Nome:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Invia</button>
</form>
  • action in <form> definisce l'URL a cui vengono inviati i dati del form.
  • method specifica il metodo di invio dei dati: post o get.

HTML <input>

Il tag <input> è uno degli elementi più versatili dei form in HTML. Supporta diversi tipi di input, ognuno adatto ad un tipo specifico di dati.

Sintassi del tag <input>:

Python

<input type="tipo" name="nome_campo" id="id" value="valore">
Python

<input type="tipo" name="nome_campo" id="id" value="valore">

Attributi utilizzati in <input>:

  • type — tipo di input (ad esempio testo, password, email, ecc.).
  • name — nome del campo, usato dal server per identificare i dati.
  • id — identificatore univoco, utilizzato per collegare l'input con un <label>.
  • value — valore visualizzato di default nel campo (ad esempio testo predefinito).

Tipi principali di <input>

  • Campo di testo type="text" — per inserire testo breve, come nome o cognome.
  • Password type="password" — per inserire password. I caratteri inseriti vengono mascherati con punti o asterischi.
  • Email type="email" — per inserire un indirizzo email. Il campo verifica la validità del formato.
  • Numero type="number" — per inserire valori numerici. Il campo accetta solo numeri.
  • Bottone invio type="submit" — invia i dati del form al server.

Altri attributi utili in <input>

  • placeholder — mostra un testo suggerito nel campo di input, che scompare quando l'utente inizia a digitare.
  • required — rende obbligatorio il campo. Se l'utente tenta di inviare il form senza compilare questo campo, il browser mostra un avviso.
  • min e max — definiscono il valore minimo e massimo per tipi come number, date, ecc.
  • maxlength — limita il numero di caratteri inseribili in un campo di testo.

3. Esempio di form

Mettiamo insieme tutti gli elementi e attributi discussi in un unico form:

HTML
      <!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Form di registrazione</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="name">Nome:</label>
    <input type="text" id="name" name="name" placeholder="Inserisci il tuo nome" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Inserisci email" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <label>Genere:</label>
    <label><input type="radio" name="gender" value="male"> Maschile</label>
    <label><input type="radio" name="gender" value="female"> Femminile</label>

    <label for="subscribe">Iscriviti alle notizie</label>
    <input type="checkbox" id="subscribe" name="subscribe">

    <button type="submit">Registrati</button>
  </form>
</body>
</html>
Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION