In tempi precedenti, le tabelle sono state utilizzate per creare il layout del sito Web. Al giorno d'oggi, l'HTML ,

,
1. , o diversi altri elementi sono usati principalmente per creare una forma. Questi elementi aiutano a creare un modulo attraente senza usare le tabelle. Inoltre, CSS è diventato più avanzato e fornisce molte proprietà per gli elementi HTML. Usando queste proprietà, lo stile della forma può essere reso attraente e organizzato.

   Questo post fornirà una guida graduale su come creare un modulo HTML senza tabelle che utilizza CSS.

   Come creare un modulo senza tabelle usando CSS?

   Diverse proprietà CSS e elementi HTML possono essere utilizzati per creare una forma. Esamina l'esempio di seguito, che dimostra una guida graduale alla creazione di un modulo senza tabelle.

   Passaggio 1: aggiungi l'elemento "forma"

   In HTML, aggiungi un ""Tag e assegnagli una classe"forma di forma". Quindi, aggiungi il "

   "Elemento tra l'elemento" "per includere un'intestazione al documento. Quindi, aggiungi un html ""Elemento per creare una forma:

   
   

   Modulo di registrazione degli studenti

   
   

   
   

   
   Passaggio 2: aggiungi l'elemento "Fieldset"

   Dopodiché, tra l'apertura e la chiusura ""Tag, posizionare il""Elemento con un"id"Attributo"informazioni personali". Al suo interno, aggiungi il ""Elemento:

   
   

   Informazione personale

   
   

   
   Qui:

   • • IL ""L'elemento viene utilizzato per raggruppare gli elementi di forma. Traccia una linea attorno agli elementi del gruppo.
     • IL ""L'elemento viene utilizzato per applicare una didascalia all'elemento" ".

   Produzione

   
   Passaggio 3: Aggiungi elementi del modulo

   Aggiungeremo elementi di forma all'interno del ""Elemento usando i tag elencati:

   • • Innanzitutto, aggiungi un html "
       "Tag che segnerà i numeri di sequenza prima degli elementi dell'elenco.
       1. All'interno dell'elenco ordinato, aggiungi il contenuto del modulo come elenco.
       2. Ognuno di "
       3. Gli elementi contiene il "" E "" elementi. Nota che, l'elemento "" è "per"E l'elemento" "id"Gli attributi devono avere lo stesso valore:

   
   
   1. 
      Nome di battesimo:
      
      
   
   
   2. 
      Cognome:
      
      
   
   
   3. 
      Indirizzo:
      
      
   
   
   4. 
      Codice Postale:
      
      
   
   
   5. 
      Telefono:
      
      
   
   
   6. 
      Indirizzo e-mail:
      
      
   
   
   7. 
      Genere:
      
      Maschio
      
      Femmina
      
      

   
   



2. 
   Compleanno:
   
   

L'output del codice sopra fornito è mostrato qui:

Passaggio 4: Aggiungi "pulsante" per formare

Aggiungiamo due pulsanti al ""Elemento per il"Ripristina" E "sottomissione"Operazioni. Per fare ciò, aggiungi il ""Elemento con un ID"pulsanti". All'interno di questo tag, aggiungi due elementi di input con il tipo "Ripristina" E "invia":

Gli attributi associati agli elementi di input sono spiegati di seguito:

• • "tipo"Specifica il tipo di input, come testo, casella di controllo, radio, reset o altro ancora.
  • "nome"Definisce un nome per gli elementi utilizzati in JavaScript per un'ulteriore manipolazione.
  • "id"Designa l'ID speciale Element.
  • "valore"L'attributo specifica il valore per l'elemento. Viene utilizzato in modo diverso per diversi elementi di input. Quando il tipo di input è "Ripristina","pulsante", E "invia", Il valore viene visualizzato sul pulsante.

L'output mostra che i pulsanti sono stati creati correttamente:

Spostati verso la sezione CSS, in cui gli elementi HTML vengono applicati con diverse proprietà di styling.

Passaggio 5: elementi "tutti" di stile

*
Font-Family: Georgia, "Times New Roman", Times, Serif;

L'asterisco "*"Il simbolo viene utilizzato per indicare tutti gli elementi HTML. IL "famiglia di font"Viene applicata la proprietà con l'elenco dei valori. Questo elenco è specificato per garantire che l'altro carattere venga applicato automaticamente se il browser non supporta il primo carattere.

Passaggio 6: stile "forma-main"

Successivamente, accedi al "div"Container con classe"forma di forma"E applicare il"colore di sfondo"Proprietà per impostare il colore di sfondo:

.forma-main
background-color: #d6e4e5;

Passaggio 7: elemento "li" di stile

.forma-main li
Margine: 5px;
Font-size: 18px;

IL "