Elementi principali dei form

2.1 Elemento <input>

I form sono un componente importante delle pagine web e permettono agli utenti di inserire e inviare dati. Gli elementi principali dei form sono <input>, <textarea> e <button>. Questi elementi permettono agli utenti di inserire testo, selezionare opzioni, caricare file e svolgere altre azioni.

L'elemento <input> è uno degli elementi dei form più utilizzati. Supporta diversi tipi di input e può essere usato per vari scopi, come l'inserimento di testo, la selezione di file, l'indicazione di date, ecc.

Sintassi generale:

    
      <input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
    
  

Attributi <input>

• type: definisce il tipo di input
• name: nome dell'elemento del form, usato per identificare i dati sul server
• id: identificatore univoco dell'elemento
• value: valore iniziale dell'elemento
• placeholder: testo di inserimento mostrato dentro l'elemento prima dell'inserimento dei dati
• required: indica che l'elemento è obbligatorio

Esempio <input>

input-text permette di inserire testo su una sola riga.

    
      <input type="text" name="username" id="username" placeholder="Inserisci il nome utente" required>
    
  

2.2 Elemento <textarea>

L'elemento <textarea> è usato per l'inserimento di testo su più righe. Si differenzia da <input type="text"> perché permette di inserire testo che contiene più righe e può essere ridimensionato.

Sintassi generale:

    
      <textarea name="name"
        id="id"
        rows="rows" cols="cols"
        placeholder="placeholder" required>
      </textarea>
    
  

Attributi <textarea>

• name: nome dell'elemento del form, usato per identificare i dati sul server
• id: identificatore univoco dell'elemento
• rows: numero di righe di testo
• cols: numero di caratteri in una riga
• placeholder: testo di inserimento mostrato dentro l'elemento prima dell'inserimento dei dati
• required: indica che l'elemento è obbligatorio

Esempio di utilizzo:

    
      <label for="comments">Commenti:</label>
      <textarea name="comments"
        id="comments"
        rows="5"
        cols="40"
        placeholder="Inserisci i tuoi commenti qui..."
        required>
      </textarea>
    
  

Stilizzazione <textarea>

L'elemento <textarea> può essere stilizzato con CSS per migliorare l'aspetto e l'esperienza utente.

Esempio di stilizzazione:

    
      textarea {
        width: 75%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical; /* resize sarà possibile solo verticalmente */
      }
    
  

    
      <label for="comments">Commenti:</label>
      <textarea name="comments"
        id="comments"
        rows="5" placeholder="Inserisci i tuoi commenti qui..." required>
      </textarea>
    
  

2.3 Elemento <button>

L'elemento <button> è usato per creare bottoni nei form. A differenza di <input type="button">, l'elemento <button> è più flessibile e permette di inserire differenti elementi HTML, come testo, immagini, ecc.

Sintassi generale:

    
      <button type="type" name="name" id="id" value="value">Testo del bottone</button>
    
  

Esempio di utilizzo:

    
      <button type="submit">Invia</button>
      <button type="reset">Reset</button>
      <button type="button" onclick="alert('Bottone premuto!')">Premi me</button>
    
  

Attributi <button>

1. type: definisce il comportamento del bottone. Valori possibili:
   • submit: invia il form (valore di default)
   • reset: resetta il form
   • button: bottone generico, non esegue azioni di default
2. name: nome dell'elemento del form, usato per identificare i dati sul server.
3. id: identificatore univoco dell'elemento.
4. value: valore inviato al server quando il form è inviato.

HTML annidato in <button>

L'elemento <button> permette di inserire diversi elementi HTML al suo interno per creare bottoni più complessi.

Esempio con HTML annidato:

    
      <button type="type" name="name" id="id" value="value">
        📨Invia
      </button>
    
  

    
      <button type="type" name="name" id="id" value="value">
        <img src="submit_icon.png" alt="Invia">
        Invia
      </button>
    
  

Stilizzazione <button>

L'elemento <button> può essere stilizzato con CSS per migliorare l'aspetto e l'esperienza utente.

Esempio di stilizzazione:

    
      button {
        background-color: #4CAF50; /* Sfondo verde */
        color: white; /* Testo bianco */
        padding: 15px 20px; /* Padding interno */
        border: none; /* Senza bordi */
        border-radius: 4px; /* Angoli arrotondati */
        cursor: pointer; /* Puntatore del cursore */
      }

      button:hover {
        background-color: #45a049; /* Sfondo verde scuro al passaggio del mouse */
      }
    
  

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