El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Enviant formularis

Següent ►
►

En aquest tema, aprendrem com enviar formularis en HTML. Els formularis són una part essencial de moltes aplicacions web, ja que permeten als usuaris introduir i enviar dades. Veurem com configurar correctament els formularis per enviar dades a un servidor i com gestionar els diferents mètodes d'enviament.

Conceptes clau

  1. Atribut action: Defineix l'URL on s'enviarà el formulari.
  2. Atribut method: Especifica el mètode HTTP que s'utilitzarà per enviar el formulari (GET o POST).
  3. Botó de submissió: Utilitzat per enviar el formulari.

Atribut action

L'atribut action de l'etiqueta <form> especifica l'URL on es processarà el formulari. Si no es defineix, el formulari s'enviarà a la mateixa pàgina.

<form action="process_form.php">
    <!-- Elements del formulari -->
</form>

Atribut method

L'atribut method defineix el mètode HTTP que s'utilitzarà per enviar el formulari. Els dos mètodes més comuns són:

  • GET: Les dades del formulari s'envien com a part de l'URL.
  • POST: Les dades del formulari s'envien com a part del cos de la sol·licitud HTTP.
<form action="process_form.php" method="post">
    <!-- Elements del formulari -->
</form>

Diferències entre GET i POST

Mètode Característiques
GET - Les dades es mostren a l'URL.
- Adequat per a sol·licituds que no modifiquen dades.
- Té una limitació de longitud d'URL.
POST - Les dades no es mostren a l'URL.
- Adequat per a sol·licituds que modifiquen dades.
- No té limitació de longitud.

Botó de submissió

El botó de submissió s'utilitza per enviar el formulari. Es crea amb l'etiqueta <button> o <input> amb el tipus submit.

<form action="process_form.php" method="post">
    <label for="name">Nom:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Correu electrònic:</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">Enviar</button>
</form>

Exemple pràctic

A continuació, es mostra un exemple complet d'un formulari que envia dades a un servidor utilitzant el mètode POST.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulari de contacte</title>
</head>
<body>
    <h1>Formulari de contacte</h1>
    <form action="process_form.php" method="post">
        <label for="name">Nom:</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">Correu electrònic:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="message">Missatge:</label>
        <textarea id="message" name="message" required></textarea>
        
        <button type="submit">Enviar</button>
    </form>
</body>
</html>

Exercici pràctic

Exercici

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

  • Nom d'usuari
  • Contrasenya
  • Confirmació de contrasenya
  • Correu electrònic

El formulari ha d'enviar les dades a register.php utilitzant el mètode POST.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulari de registre</title>
</head>
<body>
    <h1>Formulari de registre</h1>
    <form action="register.php" method="post">
        <label for="username">Nom d'usuari:</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">Contrasenya:</label>
        <input type="password" id="password" name="password" required>
        
        <label for="confirm_password">Confirmació de contrasenya:</label>
        <input type="password" id="confirm_password" name="confirm_password" required>
        
        <label for="email">Correu electrònic:</label>
        <input type="email" id="email" name="email" required>
        
        <button type="submit">Registrar</button>
    </form>
</body>
</html>

Errors comuns i consells

  1. No especificar l'atribut method: Si no especifiques el mètode, el formulari utilitzarà GET per defecte, cosa que podria no ser adequada per enviar dades sensibles.
  2. No utilitzar required en camps obligatoris: Assegura't d'utilitzar l'atribut required per garantir que els usuaris omplin tots els camps necessaris abans d'enviar el formulari.
  3. No validar les dades al servidor: Encara que validis les dades al client, sempre has de validar-les també al servidor per garantir la seguretat.

Conclusió

En aquesta secció, hem après com enviar formularis en HTML utilitzant els atributs action i method, i com crear botons de submissió. També hem vist un exemple pràctic i hem realitzat un exercici per reforçar els conceptes apresos. Ara estàs preparat per crear formularis que enviïn dades a un servidor de manera segura i eficient.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats