• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 1/16/18

Formularios

Log in or subscribe for free to enjoy all this course has to offer!

Cualquier página HTML puede mejorarse con formularios interactivos que piden al visitante que rellene información: introducir texto, seleccionar opciones, confirmar con un botón... ¡cualquier cosa es posible!

Sin embargo, estamos alcanzando los límites del lenguaje HTML, ya que después tienes que analizar la información que el visitante ha introducido... y eso no se puede hacer en HTML. Como vamos a ver, los resultados tienen que procesarse en otro lenguaje, como PHP, por ejemplo.

Mientras tanto, tenemos un gran número de etiquetas HTML por descubrir. Bienvenido al maravilloso mundo de los formularios. Un mundo en el que los botones, las casillas de verificación y las listas desplegables coexisten en armonía (bueno, casi).

Crear un formulario

Cuando tienes la repentina necesidad de insertar un formulario en tu página HTML, necesitas empezar escribiendo una etiqueta <form> </form>. Esta es la etiqueta principal de los formularios, y especifica su comienzo y su fin.

<p>Texto antes del formulario</p>

<form>
   <p>Texto dentro del formulario</p>
</form>

<p>Texto después del formulario</p>

Esta es la estructura básica. Ahora, presta atención: lo que voy a decirte no es fácil, puesto que hemos alcanzado los límites del HTML.

Veamos un ejemplo para clarificar las cosas. Supón que un visitante acaba de incluir un comentario en el formulario, como, por ejemplo, un mensaje que les gustaría publicar en el foro. Este mensaje tiene que enviarse para que puedas recibirlo (lógico, ¿verdad?) y mostrarlo a otros visitantes.

Bien, ese es el problema o, más bien, esos son los problemas, que vamos a abordar:

  • Problema n.º 1: ¿cómo enviar el texto introducido por el visitante? ¿De qué manera?

  • Problema n.º 2: una vez que los datos se han enviado, ¿cómo los procesas? ¿quieres recibir el mensaje automáticamente mediante correo electrónico, o prefieres un programa que lo guarde en algún sitio y después lo muestre en una página que todo el mundo lo pueda ver?

Para aportar las soluciones a estos dos problemas, tienes que añadir dos atributos a la etiqueta <form>:

  • method: este atributo especifica cómo se van a enviar los datos (solución al problema n.º 1). Hay dos maneras de enviar datos a la Web:

    • method="get": este método normalmente es menos adecuado, ya que se limita a 255 caracteres. Esta particularidad proviene del hecho de que la información se enviará a la dirección de la página (http://..., aunque este detalle en realidad no tiene importancia por el momento. Te recomiendo que utilices la mayoría de las veces el otro método: post.

    • method="post": es el método más usado en formularios, puesto que permite que se envíe un montón de información. Los datos introducidos en el formulario no van a través de la barra de direcciones.

  • action: es la dirección de la página o programa que va a procesar la información (solución al problema n.º 2). Esta página te enviará un correo electrónico con el mensaje si eso es lo que quieres o, por otro lado, guardará el mensaje con todos los demás mensajes en una base de datos.
    Esto no se puede hacer en HTML y CSS, así que normalmente utilizamos otro lenguaje sobre el que puede que hayas escuchado: PHP.

Por lo tanto, ahora vamos a completar la etiqueta <form> con los dos atributos que acabamos de ver.

Para method, lo has adivinado, voy a introducir el valor post.
Para action, voy a introducir el nombre de una página ficticia en PHP (tratamiento.php). Esta es la página que será solicitada cuando el visitante haga clic en el botón de envío en el formulario.

<p>Texto antes del formulario</p>

<form method="post" action="tratamiento.php">
   <p>Texto dentro del formulario</p>
</form>

<p>Texto después del formulario</p>

Por el momento, no sabemos lo que pasa dentro de la página tratamiento.php: asumamos que esta página está lista y funcionando.

Nuestra prioridad, por ahora, es descubrir en HTML/CSS cómo insertar campos de texto, botones y casillas de verificación en nuestra página web. Y eso es lo que vamos a ver ahora.

Campos de entrada básicos

Por lo tanto, regresemos a algo tangible.

Vamos a revisar varias etiquetas HTML que necesitamos para introducir texto en un formulario.
Deberías saber que hay dos campos de texto diferentes.

  • El campo de texto de una línea: como su nombre sugiere, solo puedes introducir una única línea en él. Se utiliza para textos cortos, por ejemplo, un nombre de usuario.

  • El campo de texto de líneas múltiples: este campo de texto permite introducir un gran cantidad de texto en varias líneas, por ejemplo, una tesis sobre el uso de HTML en el desarrollo de países del Sudeste de Asia (tan solo una sugerencia...).

Campo de texto de una línea

Esta imagen a continuación muestra el aspecto de un campo de texto de una línea.

Un campo de texto de una línea
Un campo de texto de una línea

Para insertar un campo de texto en una línea, vamos a utilizar la etiqueta <input />.

Para crear un campo de texto de una línea, tienes que introducir:

<input type="text" ></code>

Aún no es suficiente: tienes que dar un nombre a tu campo de texto. Aunque este nombre no aparece en la página, lo necesitarás más adelante. De hecho, te dirá (en PHP, por ejemplo) de dónde viene la información: sabrás que tal y cual cadena de texto es el nombre de usuario del visitante, otra cadena de texto es la contraseña que han seleccionado, etc.

Para dar un nombre a un elemento de formulario, se utiliza el atributo name. En este caso, vamos a asumir que al visitante se le ha pedido que vuelva a introducir su nombre de usuario:

<input type="text" name="nombre" ></code>

Así que vamos a intentar crear un formulario muy básico con nuestro campo de texto:

<form method="post" action="tratamiento.php">
   <p><input type="text" name="username" /></p>
</form>

Como de costumbre, te sugiero encarecidamente que intentes este código por ti mismo y veas el resultado.

Etiquetas

Este campo de texto está muy bien, pero si tu visitante se lo encuentra, no sabrá lo que poner. Esta es exactamente la labor de la etiqueta <label>:

<form method="post" action="tratamiento.php">
    <p>
        <label>Nombre usuario</label> : <input type="text" name="username" />
    </p>
</form>

Este código proporciona exactamente el mismo resultado que has visto en la imagen anterior.

Pero no es suficiente. Hay que enlazar la etiqueta con el campo de texto.
Para hacer esto, tienes que darle un nombre al campo de texto, no con el atributo name, sino con el atributo id (que puede usarse con todas las etiquetas).

¿Un name y un id en el campo? ¿No sería redundante?

Sí, de cierta manera. Personalmente, doy el mismo valor a name y a id; no supone ningún problema.

Para enlazar la etiqueta con el campo, se le tiene un que dar un atributo for, que tiene el mismo valor que el campo id... Lo mejor es verlo con un ejemplo:

<form method="post" action="tratamiento.php">
   <p>
       <label for="username">Nombre usuario</label> : <input type="text" name="username" id="username" />
   </p>
</form>

Intenta hacer clic en el texto «Tu nombre de usuario»: verás que el cursor se sitúa automáticamente en el campo de texto correspondiente.

Algunos atributos adicionales

Puedes añadir varios atributos adicionales a la etiqueta <input/> para personalizar su funcionamiento:

  • Puedes aumentar el tamaño del campo con size.

  • Puedes limitar el número de caracteres que pueden introducirse mediante maxlength.

  • Puedes prerrellenar el campo con un valor por defecto con value.

  • Puedes dar algún indicio de los contenidos del campo mediante placeholder. Esta indicación desaparecerá tan pronto como el visitante haga clic dentro del campo.

En el siguiente ejemplo, el campo de texto contiene una indicación para entender lo que debería escribirse; aunque el campo mide 30 caracteres, no puedes escribir mas de 10 dentro:

<form method="post" action="tratamiento.php">
    <p>
        <label for="username">Nombre usuario:</label>
        <input type="text" name="username" id="username" placeholder="Zozor" size="30" maxlength="10" />
    </p>
</form>

Prueba el resultado por ti mismo para ver cómo se comporta el campo. Mientras tanto, la siguiente imagen muestra el aspecto del campo en su estado inicial.

Un campo de texto con un indicador (marcador de posición)

Campo de contraseña

Puedes hacer fácilmente que el campo de texto se comporte como un «campo de contraseña», es decir, un campo donde no puedes ver en la pantalla los caracteres que se escriban. Para crear este tipo de campo de entrada, utiliza el atributo type="password".

Completaré mi formulario. Ahora le pide al visitante que escriba su nombre de usuario y su contraseña:

<form method="post" action="tratamiento.php">
   <p>
       <label for="username">Tu nombre de usuario:</label>
       <input type="text" name="username" id="username" />
       
       <br />
       <label for="pass">Tu contraseña:</label>
       <input type="password" name="pass" id="pass" />
       
   </p>
</form>

Verás que los caracteres de la contraseña no se visualizan en pantalla, como se muestra en la siguiente imagen.

Un campo de entrada de contraseña

Campo de texto de líneas múltiples

Para crear un campo de texto de líneas múltiples, cambia la etiqueta: vamos a utilizar <textarea> </textarea>.

Como cualquier otro elemento de formulario, tienes que proporcionarle un nombre mediante name y utilizar label para explicar qué es.

<form method="post" action="tratamiento.php">
   <p>
       <label for="mejora">¿Cómo crees que podría mejorar mi página web?</label><br />
       <textarea name="mejora" id="mejora"></textarea>
   </p>
</form>

¡Y aquí está la imagen con el resultado (siguiente captura)!

Un campo de entrada pequeño de líneas múltiples
Un campo de entrada pequeño de líneas múltiples

Como puedes ver, ¡es un poco pequeño! Afortunadamente, puedes cambiar el tamaño de <textarea> de dos maneras distintas.

  • En CSS: tan solo aplica las propiedades CSS width y height a <textarea>.

  • Con atributos: puedes añadir los atributos rows y cols a la etiqueta <textarea>. El primero especifica el número de líneas de texto que pueden mostrarse simultáneamente y el segundo, el número de columnas.

¿Por qué abres la etiqueta <textarea> y la cierras de nuevo inmediatamente después?

Puedes prerrellenar <textarea> con un valor por defecto. En este caso, no utilizamos el atributo value: simplemente escribimos el texto por defecto entre la etiqueta de apertura y la de cierre.

<form method="post" action="tratamiento.php">
   <p>
       <label for="mejora">
       ¿Cómo crees que podría mejorar mi página web?
       </label>
       <br />
       
       <textarea name="mejora" id="mejora" rows="10" cols="50">
       ¡¿Mejorar tu página web?! 
       ¡Venga! ¡Es tan perfecta que no necesita ninguna mejora!
       </textarea>       
   </p>
</form>

La siguiente imagen muestra el resultado.

Un campo de entrada de líneas múltiples completado previamente
Un campo de entrada de líneas múltiples completado previamente

Campos de entrada mejorados

HTML5 incluye muchas características nuevas en los formularios. De hecho, han aflorado nuevos tipos de campos con esta versión. Tan solo dale al atributo type de la etiqueta <input/> uno de los nuevos valoresdisponibles. ¡Echemos un vistazo rápido!

Correo electrónico

Puedes pedir a los visitantes que introduzcan una dirección de correo electrónico:

<input type="email" ></code>

El campo normalmente te parecerá el mismo, pero el navegador ahora sabe que el usuario tiene que escribir una dirección de correo electrónico. Puede dar una indicación si la dirección no es un correo electrónico, que es lo que hace Firefox (ejemplo a continuación).

Un correo electrónico escrito incorrectamente aparece enmarcado en rojo en Firefox
Un correo electrónico escrito incorrectamente aparece enmarcado en rojo en Firefox

Ten en cuenta que algunos navegadores, como, por ejemplo, los navegadores móviles de iPhone y Android, muestran un teclado diseñado para escribir direcciones de correo electrónico (debajo).

Teclado para correo electrónico de iPhone
Teclado para correo electrónico de iPhone

Una URL

Con el tipo url, puedes pedirle al visitante que escriba una dirección absoluta (normalmente comienza con http://):

<input type="url" ></code>

Mismo principio: si el campo no parece diferente en tu ordenador, ten en cuenta que ha entendido eficazmente que se supone que el visitante debe escribir una dirección. Por ejemplo, los navegadores de móviles muestran un teclado destinado a escribir una URL (imagen siguiente).

Teclado para URL de iPhone
Teclado para URL de iPhone

Número de teléfono

Este campo se usa para escribir números de teléfono.

<input type="tel" ></code>

En el iPhone, por ejemplo, se visualiza un teclado para esta función cuando el visitante tiene que completar este campo (imagen a continuación).

Teclado para números de teléfono de iPhone
Teclado para números de teléfono de iPhone

Número

Este campo se utiliza para escribir un número entero:

<input type="number" ></code>

El campo normalmente se muestra con unas pequeñas flechas para cambiar el valor (imagen siguiente).

Campo de entrada de números

Campo de entrada de números

Puedes personalizar la manera en la que funciona el campo con los siguientes atributos:

  • min: valor mínimo permitido.

  • max: valor máximo permitido.

  • step: es el desplazamiento. Si especificas un «step» de 2, el campo solo aceptará valores de 2 en 2 (por ejemplo: 0, 2, 4, 6, etc.).

Un cursor

El tipo range se utiliza para seleccionar un número con un cursor (también llamado un slider), como se puede ver en el siguiente ejemplo:

<input type="range" ></code>

Un cursor del tipo range

Un cursor del tipo range

Puedes utilizar de nuevo los atributos min, max y step para limitar los valores disponibles.

Color

Este campo te permite introducir un color:

<input type="color" ></code>

En la práctica, los navegadores no lo utilizan demasiado en la actualidad. No te sorprendas si solo ves un campo de texto normal.

Fecha

Hay varios tipos de campos de selección de fecha:

  • date: para la fecha (05/08/1985, por ejemplo);

  • time: para la hora (13:37, por ejemplo);

  • week: para la semana;

  • month: para el mes;

  • datetime: para la fecha y la hora (con administración de zona horaria);

  • datetime-local para la fecha y la hora (sin administración de zona horaria.

Ejemplo:

<input type="date" ></code>

Como puedes ver, ¡hay muchas opciones!
Por el momento, pocos navegadores soportan este tipo de campo, excepto Opera.

Buscar

Así puedes crear un campo de búsqueda como este:

<input type="search" ></code>

Entonces, el navegador decide cómo muestra el campo de búsqueda. Por consiguiente, puede añadir una pequeña lupa que indica que es un campo de búsqueda y posiblemente para almacenar las últimas búsquedas realizadas por el visitante.

Opciones

HTML incluye un montón de opciones que pueden usarse en el formulario. Son elementos que requieren que el visitante elija a partir de una lista de posibilidades. Vamos a repasar:

  • casillas de verificación;

  • campos de opciones;

  • listas desplegables.

Casillas de verificación

¿Cómo se crea una casilla de verificación? ¡No podría ser más fácil! Vamos a utilizar la etiqueta <input />, pero esta vez especificando el tipo checkbox:

<input type="checkbox" name="opciones" ></code>

¡Añade <label> en la posición correcta, ¡y ya lo tienes!

<form method="post" action="tratamiento.php">
   <p>
       Marca las comidas que te gustan:<br/ >
       <input type="checkbox" name="patatas fritas" id="patatas fritas" /> <label for="patatas fritas">Patatas fritas</label><br />
       <input type="checkbox" name="hamburguesa" id="hamburguesa" /> <label for="hamburguesa">Hamburguesa</label><br />
       <input type="checkbox" name="espinacas" id="espinacas" /> <label for="espinacas">Espinacas</label><br />
       <input type="checkbox" name="ostras" id="ostras" /> <label for="ostras">Ostras</label>
   </p>
</form>

La siguiente imagen muestra el resultado.

Casillas de verificación
Casillas de verificación

No olvides dar un nombre diferente a cada casilla de verificación. Más tarde, te permitirá identificar las que ha seleccionado el visitante.

Por último, recuerda que puedes tener una casilla marcada por defecto con el atributo checked:

<input type="checkbox" name="opciones" checked ></code>

Campos de opciones.

Los campos de opciones te permiten elegir una (y solamente una) opción de una lista de posibilidades. De alguna manera, parecen casillas de verificación pero hay una ligera dificultad adicional: tienen que estar organizadas como grupos. Aunque las opciones en el mismo grupo tienen el mismo (nombre), cada opción tienen que tener un (valor) diferente.

La etiqueta que se utiliza siempre es <input />, esta vez con el valor radio en el atributo type.

El siguiente ejemplo lo aclarará:

<form method="post" action="tratamiento.php">
   <p>
       Indica el grupo de edad al que perteneces:<br />
       <input type="radio" name="edad" value="menos15" id="menos15" /> <label for="menos15">Menos de 15 años</label><br />
       <input type="radio" name="edad" value="entre15-25" id="entre15-25" /> <label for="entre15-25">Entre 15 y 25 años</label><br />
       <input type="radio" name="edad" value="entre25-40" id="entre25-40" /> <label for="entre25-40">Entre 25 y 40 años</label><br />
       <input type="radio" name="edad" value="mas40" id="mas40" /> <label for="mas40">Incluso mayor que eso?</label>
   </p>
</form>

Lo que nos da el resultado de la siguiente imagen.

Botones de radio
Botones de radio

¿Por qué pusiste el mismo nombre para cada opción? Solo para que el navegador sepa a qué «grupo» pertenece el botón.
Intenta eliminar los atributos name y verás que entonces puedes seleccionar todas las opciones. Sin embargo, no es lo que queremos, por esa razón los «enlazamos» al darles el mismo nombre.

Si tienes dos campos de opciones diferentes, tienes que dar un name único a cada grupo, de esta manera:

<form method="post" action="tratamiento.php">
   <p>
       Indica el grupo de edad al que perteneces:<br />
       <input type="radio" name="edad" value="menos15" id="menos15" /> <label for="menos15">Menos de 15 años</label><br />
       <input type="radio" name="edad" value="entre15-25" id="entre15-25" /> <label for="entre15-25">Entre 15 y 25 años</label><br />
       <input type="radio" name="edad" value="entre25-40" id="entre25-40" /> <label for="entre25-40">Entre 25 y 40 años</label><br />
       <input type="radio" name="edad" value="mas40" id="mas40" /> <label for="mas40">¿Incluso mayor?</label>
   </p>
   <p>
       ¿En qué continente vives?<br />
       <input type="radio" name="continente" value="europa" id="europa" /> <label for="europa">Europa</label><br />
       <input type="radio" name="continente" value="africa" id="africa" /> <label for="africa">África</label><br />
       <input type="radio" name="continente" value="asia" id="asia" /> <label for="asia">Asia</label><br />
       <input type="radio" name="continente" value="america" id="america" /> <label for="america">América</label><br />
       <input type="radio" name="continente" value="australia" id="australia" /> <label for="australia">Australia</label>
   </p>
</form>

Listas desplegables

Las listas desplegables son otra manera elegante de seleccionar una opción a partir de varias posibilidades. Funcionan de una manera ligeramente distinta. Vamos a utilizar la etiqueta <select> </select>, que especifica el comienzo y el final de la lista desplegable. Añadimos el atributo name a la etiqueta para darle un nombre a la lista.

Después, dentro de la etiqueta <select> </select>, vamos a insertar varias etiquetas <option> </option> (una para cada opción posible). Añadimos un atributo value a cada uno de ellas para identificar lo que el visitante ha elegido.

Aquí podéis ver un ejemplo de uso:

<form method="post" action="tratamiento.php">
   <p>
       <label for="pais">¿En qué país vives?</label><br />
       <select name="pais" id="pais">
           <option value="estadosunidos">Estados Unidos</option>
           <option value="canada">Canadá</option>
           <option value="reinounido">Reino Unido</option>
           <option value="francia">Francia</option>
           <option value="espana">España</option>
           <option value="italia">Italia</option>
           <option value="china">China</option>
           <option value="japon">Japón</option>
       </select>
   </p>
</form>

El resultado se muestra en la siguiente imagen.

Una lista desplegable

Si quieres que una opción esté seleccionada por defecto, esta vez utiliza el atributo selected:

<option value="canada" selected>Canadá</option>

También puedes agrupar las opciones con la etiqueta <optgroup> </optgroup>. En nuestro ejemplo, ¿por qué no separas países según su continente?

<form method="post" action="tratamiento.php">
   <p>
       <label for="pais">¿En qué país vives?</label><br />
       <select name="pais" id="pais">
           <optgroup label="Europa">
               <option value="reinounido">Reino Unido</option>
               <option value="francia">Francia</option>
               <option value="espana">España</option>
               <option value="italia">Italia</option>
           </optgroup>
           <optgroup label="América">
               <option value="estadosunidos">Estados Unidos</option>
               <option value="canada">Canadá</option>
           </optgroup>
           <optgroup label="Asia">
               <option value="china">China</option>
               <option value="japon">Japón</option>
           </optgroup>
       </select>
   </p>
</form>

El resultado se muestra en la siguiente imagen.

Opciones agrupadas por continente

Finalizar y enviar el formulario

Casi hemos terminado. Solo nos queda decorar nuestro formulario con algunas funciones finales (por ejemplo, confirmación), y entonces añadir el botón de envío del formulario.

Agrupar campos

Si el formulario ha crecido y tiene un montón de campos, puede que sea útil agruparlos entre varias etiquetas <fieldset>. Cada <fieldset> puede contener un título con la etiqueta <legend>. Veamos este ejemplo:

<form method="post" action="tratamiento.php">
 
   <fieldset>
       <legend>Tus datos de contacto</legend> <!-- Título del conjunto de campos --> 

       <label for="apellidos">¿Cuáles son tus apellidos?</label></br>
       <input type="text" name="apellido" id="apellido" /></br>

       <label for="nombre">¿Cuál es tu nombre?</label></br>
       <input type="text" name="nombre" id="nombre" /></br>
 
       <label for="email">¿Cuál es tu dirección de correo electrónico?</label></br>
       <input type="email" name="email" id="email" /></br>

   </fieldset>
 
   <fieldset>
       <legend>Tu deseo</legend> <!-- Título del conjunto de campos -->
 
       <p>
           Pide un deseo que quieres que se haga realidad:</br>

           <input type="radio" name="deseo" value="rico" id="rico" /> <label for="rico">Ser rico</label></br>
           <input type="radio" name="deseo" value="famoso" id="famoso" /> <label for="famoso">Ser famoso</label></br>
           <input type="radio" name="deseo" value="inteligente" id="inteligente" /> <label for="inteligente">Ser <strong>aún más</strong> inteligente</label></br>
           <input type="radio" name="deseo" value="otro" id="otro" /> <label for="otro">Otro...</label></br>
       </p>
 
       <p>
           <label for="specs">Si has elegido «Otro», especifica cuál:</label></br>
           <textarea name="specs" id="specs" cols="40" rows="4"></textarea>
       </p>
   </fieldset>
</form>

El resultado se muestra en la siguiente imagen.

Los campos están agrupados

Seleccionar un campo automáticamente

Puedes situar el cursor automáticamente en uno de los campos del formulario con el atributo autofocus. Una vez que el visitante cargue la página, el cursor aparece en este campo.

Por ejemplo, para situar el cursor por defecto en el campo name:

<input type="text" name="nombre" id="nombre" autofocus ></code>

Hacer un campo obligatorio

Puedes hacer un campo obligatorio al asignarle el atributo required.

<input type="text" name="nombre" id="nombre" required ></code>

Entonces el navegador le indicará al usuario, si el campo está vacío cuando el formulario sea enviado, que necesita completarlo.

:required
{
    background-color: red;
}

El botón de envío

Así que ahora lo que nos queda por hacer es crear el botón de envío. De nuevo, la etiqueta <input /> viene a nuestro rescate. Hay cuatro versiones:

  • type="submit": el botón de envío principal del formulario. Este es el que usarás más a menudo. El usuario será redireccionado a la página especificada en el atributo action del formulario.

  • type="reset": restablece el formulario

  • type="image": equivalente al botón submit, pero esta vez mostrado como una imagen. Añade el atributo src para especificar la URL de la imagen.

  • type="button": botón genérico, que no tendrá efecto alguno (por defecto). En general, este botón se maneja en JavaScript para desarrollar acciones en la página. No lo utilizaremos aquí.

Para crear un botón de envío, entonces escribimos, por ejemplo:

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

Lo que nos da el resultado de la siguiente imagen.

Un botón de envío
Un botón de envío

Cuando haces clic en el botón «Enviar», entonces el formulario te lleva a la página especificada en el atributo action. Recuerda, imaginamos una página ficticia: tratamiento.php.

El problema es que no puedes crear esta página exclusivamente en HTML. Tienes que aprender un nuevo lenguaje, como PHP, para ser capaz de «recuperar» la información introducida y decidir lo que hacer con ella. Sin ir más lejos, ¡también estoy escribiendo un curso sobre lenguaje PHP para cualquiera que esté interesado! El curso se publicará dentro de poco.

En resumen

  • Un formulario es una zona interactiva en la página, donde los visitantes pueden introducir información.

  • Un formulario está encasillado con la etiqueta <form> a la que deben añadirse dos atributos: method (método de envío de datos) y action (página a la que el visitante se redirige después de enviar el formulario y que procesa la información).

  • Muchos de los elementos del formulario pueden insertarse con la etiqueta <input />. El valor de su atributo type especifica el tipo de campo que va a insertarse:

    • text: campo de texto;

    • password: campo de texto para contraseña;

    • tel: número de teléfono;

    • checkbox: casilla de verificación;

    • ...

  • La etiqueta <label> se utiliza para introducir una etiqueta. Está asociada con un campo de formulario mediante el atributo for, que debe tener el mismo valor que el campo de formulario id.

  • Puedes hacer un campo obligatorio con el atributo required, asegúrate de que está seleccionado por defecto usando autofocus, y especifica un indicador en el campo mediante placeholder...

  • Para recuperar lo que los visitantes han escrito, no es suficiente con el lenguaje HTML. Tienes que utilizar un lenguaje de «servidor», como el PHP... Si quieres seguir, ¡vas a tener que aprender un nuevo lenguaje!

Example of certificate of achievement
Example of certificate of achievement