En aquest tema, explorarem els elements de formulari més comuns en HTML: <input>, <textarea>, i <select>. Aquests elements permeten als usuaris introduir dades i interactuar amb el teu lloc web.

L'element <input> és un dels més versàtils i pot adoptar diversos tipus segons el valor de l'atribut type. A continuació, es presenten alguns dels tipus més comuns:

1. Text:

   <label for="name">Nom:</label>
   <input type="text" id="name" name="name">
   

   Aquest tipus permet als usuaris introduir text en una sola línia.

2. Password:

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

   Aquest tipus oculta el text introduït per motius de seguretat.

3. Email:

   <label for="email">Correu electrònic:</label>
   <input type="email" id="email" name="email">
   

   Aquest tipus valida que l'entrada sigui una adreça de correu electrònic vàlida.

4. Number:

   <label for="age">Edat:</label>
   <input type="number" id="age" name="age" min="0" max="120">
   

   Aquest tipus permet als usuaris introduir només números i pot tenir atributs com min i max.

5. Radio:

   <label>Gènere:</label>
   <input type="radio" id="male" name="gender" value="male">
   <label for="male">Home</label>
   <input type="radio" id="female" name="gender" value="female">
   <label for="female">Dona</label>
   

   Els botons de ràdio permeten als usuaris seleccionar una opció d'un grup.

6. Checkbox:

   <label for="subscribe">Subscriu-te al butlletí:</label>
   <input type="checkbox" id="subscribe" name="subscribe">
   

   Les caselles de verificació permeten als usuaris seleccionar múltiples opcions independents.

7. Submit:

   <input type="submit" value="Enviar">
   

   Aquest tipus crea un botó que envia el formulari.

• id: Identificador únic per a l'element.
• name: Nom de l'element, utilitzat per identificar les dades quan es processen.
• value: Valor inicial de l'element.
• placeholder: Text que apareix dins de l'element com a suggeriment.
• required: Indica que l'element és obligatori.

L'element <textarea> s'utilitza per a la introducció de text en múltiples línies.

• rows: Nombre de files visibles.
• cols: Nombre de columnes visibles.
• placeholder: Text que apareix dins de l'element com a suggeriment.
• required: Indica que l'element és obligatori.

L'element <select> s'utilitza per crear una llista desplegable.

• id: Identificador únic per a l'element.
• name: Nom de l'element, utilitzat per identificar les dades quan es processen.
• multiple: Permet seleccionar múltiples opcions.
• required: Indica que l'element és obligatori.

• value: Valor de l'opció.
• selected: Indica que l'opció està seleccionada per defecte.

Crea un formulari de registre que inclogui els següents camps:

• Nom (text)
• Contrasenya (password)
• Correu electrònic (email)
• Edat (number)
• Gènere (radio: Home, Dona)
• Acceptar termes i condicions (checkbox)
• Botó d'enviar (submit)

Crea un formulari de comentaris que inclogui els següents camps:

• Nom (text)
• Correu electrònic (email)
• Missatge (textarea)
• Botó d'enviar (submit)

En aquest tema, hem après sobre els elements de formulari més comuns en HTML: <input>, <textarea>, i <select>. Hem vist com utilitzar aquests elements per crear formularis interactius i com aplicar diversos atributs per personalitzar el comportament i l'aparença dels formularis. A més, hem practicat amb exercicis per reforçar els conceptes apresos. En el proper tema, explorarem els atributs i la validació de formularis per assegurar-nos que les dades introduïdes pels usuaris siguin correctes i completes.