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

Creant un formulari bàsic

Següent ►
►

Els formularis són una part essencial de moltes pàgines web, ja que permeten als usuaris enviar dades al servidor. En aquest tema, aprendrem com crear un formulari bàsic en HTML.

  1. Estructura bàsica d'un formulari

Un formulari en HTML s'inicia amb l'etiqueta <form> i es tanca amb </form>. Dins d'aquestes etiquetes, podem afegir diversos elements de formulari com camps de text, botons de selecció, caselles de verificació, etc.

<form action="/submit" method="post">
    <!-- Elements del formulari aquí -->
</form>

Atributs de l'etiqueta <form>

  • action: Defineix la URL a la qual s'enviaran les dades del formulari.
  • method: Especifica el mètode HTTP que s'utilitzarà per enviar les dades. Els valors comuns són GET i POST.

  1. Elements bàsics del formulari

2.1. Camps de text

Els camps de text es creen amb l'etiqueta <input> amb l'atribut type="text".

<form action="/submit" method="post">
    <label for="name">Nom:</label>
    <input type="text" id="name" name="name">
</form>

2.2. Botons de selecció (radio buttons)

Els botons de selecció permeten als usuaris seleccionar una opció d'un grup.

<form action="/submit" method="post">
    <p>Gènere:</p>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Home</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Dona</label>
</form>

2.3. Caselles de verificació (checkboxes)

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

<form action="/submit" method="post">
    <p>Interessos:</p>
    <input type="checkbox" id="coding" name="interest" value="coding">
    <label for="coding">Programació</label><br>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">Música</label>
</form>

2.4. Botó d'enviament

El botó d'enviament s'utilitza per enviar les dades del formulari.

<form action="/submit" method="post">
    <input type="submit" value="Enviar">
</form>

  1. Exemple complet de formulari bàsic

A continuació, es mostra un exemple complet d'un formulari bàsic que inclou camps de text, botons de selecció, caselles de verificació i un botó d'enviament.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulari Bàsic</title>
</head>
<body>
    <h1>Formulari de Registre</h1>
    <form action="/submit" method="post">
        <label for="name">Nom:</label>
        <input type="text" id="name" name="name"><br><br>

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

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

        <p>Interessos:</p>
        <input type="checkbox" id="coding" name="interest" value="coding">
        <label for="coding">Programació</label><br>
        <input type="checkbox" id="music" name="interest" value="music">
        <label for="music">Música</label><br><br>

        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Exercici pràctic

Objectiu

Crea un formulari bàsic que inclogui els següents elements:

  • Un camp de text per al nom.
  • Un camp de correu electrònic.
  • Botons de selecció per al gènere (Home, Dona).
  • Caselles de verificació per a interessos (Esports, Lectura, Viatges).
  • Un botó d'enviament.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulari d'Exemple</title>
</head>
<body>
    <h1>Formulari d'Exemple</h1>
    <form action="/submit" method="post">
        <label for="name">Nom:</label>
        <input type="text" id="name" name="name"><br><br>

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

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

        <p>Interessos:</p>
        <input type="checkbox" id="sports" name="interest" value="sports">
        <label for="sports">Esports</label><br>
        <input type="checkbox" id="reading" name="interest" value="reading">
        <label for="reading">Lectura</label><br>
        <input type="checkbox" id="travel" name="interest" value="travel">
        <label for="travel">Viatges</label><br><br>

        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Resum

En aquest tema, hem après com crear un formulari bàsic en HTML. Hem vist com utilitzar l'etiqueta <form> i diversos elements de formulari com camps de text, botons de selecció, caselles de verificació i botons d'enviament. També hem creat un exemple complet de formulari i hem proporcionat un exercici pràctic per reforçar els conceptes apresos. En el proper tema, explorarem més elements de formulari com <textarea> i <select>.

◄ 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