Summary  
This chapter introduces the markup structure and attributes needed to create and style interactive HTML form elements for capturing user input.

General domain of usage  
Web development (user interaction on web pages)

I moduli sono la spina dorsale dell'interazione utente sulle pagine web. Consentono agli utenti di condividere informazioni, interagire con i contenuti e completare azioni essenziali, come acquisti o ricerche, trasformando siti web statici in esperienze dinamiche.

Questo corso si concentrerà sul markup dei moduli. Alla fine, sarai in grado di creare moduli funzionali che migliorano l'interazione con l'utente.

Ecco un rapido esempio di un semplice modulo in azione:

<html lang="en">
  <head>
    <style>
      .border-container {
        border-radius: 10px;
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #f5f5f5;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
      }

      .form1 {
        width: 400px;
        background-color: #fff;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .title1 {
        font-size: 24px;
        color: #333;
        margin-bottom: 20px;
        border-bottom: 2px solid #ff8a00;
        padding-bottom: 5px;
      }

      .label1 {
        font-size: 16px;
        color: #666;
        display: block;
        margin-top: 20px;
      }

      .input1 {
        width: 340px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .input1:focus,
      .input1:hover {
        outline: none;
        border-color: #ff8a00;
        box-shadow: 0 0 5px rgba(255, 138, 0, 0.5);
      }

      .input1[type="submit"] {
        background-color: #ff8a00;
        color: #fff;
        border: none;
        cursor: pointer;
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 4px;
        transition: background-color 0.3s ease;
        width: 100px;
        display: block;
        margin: 30px auto 0 auto;
      }

      .input1[type="submit"]:hover {
        background-color: #d27204;
      }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Play:wght@400;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu+Mono&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
      * {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 18px;
        font-weight: 400;
        box-sizing: border-box;
        vertical-align: baseline;
      }
      body {
        font-family: "Hind Siliguri", sans-serif;
        line-height: 1;
        height: 100%;
        overflow: hidden;
      }
      img {
        display: block;
        width: 100%;
        max-width: 550px;
        margin: 0 auto;
      }
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body class="body1" style="padding: 1.5px 0">
    <div class="border-container">
      <form class="form1" onsubmit="return false">
        <h3 class="title1">Contatto Principale</h3>
        <label class="label1" for="name">Nome</label>
        <input class="input1" type="text">
        <label class="label1" for="sirname">Cognome</label>
        <input class="input1" type="text" id="sirname">
        <label class="label1" for="phone">Numero di Telefono</label>
        <input class="input1" type="tel" id="phone">
        <label class="label1" for="mail">Email</label>
        <input class="input1" type="email" id="mail">
        <input class="input1" type="submit" value="Submit">
      </form>
    </div>
  </body>
</html>


Moduli come questo consentono agli utenti di connettersi e interagire con il tuo sito web. Immergiamoci nei moduli funzionali!

> Nota
>
> Questo corso si concentra sulla creazione di markup e sulla formattazione degli elementi del modulo. Alla fine, saprai come abilitare l'interazione e il coinvolgimento degli utenti.
>
> Tuttavia, l'elaborazione dei dati inviati tramite moduli - come la loro memorizzazione in un database o l'uso di linguaggi lato server come JavaScript (Node.js), Python, PHP o Go - non è trattata in questo corso.

Qual è lo scopo principale dei moduli nelle pagine web?

Impara le basi dell'HTML (HyperText Markup Language), la base dello sviluppo web. Questo corso adatto ai principianti copre tag, attributi, elementi e strutturazione delle pagine web. Acquisisci competenze pratiche nella creazione di intestazioni, paragrafi, elenchi, immagini, link, moduli e tabelle. Esplora le migliori pratiche, l'ottimizzazione e l'accessibilità web. Inizia il tuo percorso di sviluppo web con HTML.

Esplora il funzionamento interno del web. Scopri come i dati viaggiano attraverso le reti, scopri il ruolo dei protocolli e svela i misteri degli indirizzi IP e dei nomi di dominio. Ottieni una comprensione a livello generale di come i browser web e i server comunicano per fornire contenuti web.

Scopri il potere dei tag per strutturare il contenuto, dai titoli e paragrafi a elenchi e tabelle. Impara come migliorare gli elementi con gli attributi.

Il nucleo della struttura del documento HTML. Impara i componenti di un documento HTML, inclusa la dichiarazione doctype, head e body. Comprendi lo scopo di ciascun elemento e come contribuiscono alla struttura complessiva di una pagina web.

Rendi una pagina web più attraente con l'aiuto di media come immagini, audio e video. Lavora con dati tabulari strutturati sotto forma di tabelle.

Esplora la versatilità dei moduli HTML. Impara a progettare moduli intuitivi e facili da usare sfruttando concetti e tecniche chiave. Scopri come i moduli consentono l'interazione dell'utente e l'invio di dati sui siti web.

Introduzione ai Moduli HTML

Awesome!

Introduzione ai Moduli HTML