Como crear formularios para páginas web


1 Creando un formulario en HTML.

Continuando el artículo de introducción al HTML vamos a ampliar esa información en este artículo centrándonos en la estructura básica de un formulario. Veamos con un ejemplo como crear un formulario en HTML:
1<form id="formulario" action="enviado.php" method="post">
2    <fieldset>
3        <legend>Formulario de Ejemplo</legend>
4            <label>Nombre</label>
5                <input id="campo1" name="nombre" type="text" />
6            <label>Email</label>
7                <input id="campo2" name="email" type="text" />
8            <input id="campo3" name="enviar" type="submit" value="Enviar" />
9    </fieldset>
10</form>

A. Etiqueta form.

Esta etiqueta es la que define dentro de nuestra estructura HTML el inicio de un formulario y está compuesta por:
  • id: indica un nombre del formulario para que pueda ser personalizado mediante CSS.
  • action: define el destino a donde irán los datos del formulario en HTML. En nuestro ejemplo el destino será un archivo llamado “enviado.php”.
  • method: indica la forma en la que será enviado el formulario en HTML.

B. Etiqueta fieldset.

Esta etiqueta es de uso opcional y se utiliza para agrupar elementos en común dentro de un mismo formulario en HTML. Se suele utilizar junto a la etiqueta legend que le da un título al conjuntos de elementos definidos en el fieldset.

C. Etiqueta label.

Esta etiqueta se utiliza para definir el nombre visible de cada uno de los campos del formulario en HTML.

E. Etiqueta input.

Esta etiqueta corresponde a los campos del formulario que necesitamos para su funcionamiento. Esta está definida por:
  • id: indica un nombre único del campo para que pueda ser personalizado mediante CSS.
  • name: indica el nombre único del campo en el formulario en HTML y este nombre es el que nos permitirá realizar el envío de los datos de cada campo.
  • type: indica el tipo de campo y la acción que tendrá dentro del formulario en HTML. Existen varios tipos de campos input en un formulario:
    • text: para agregar una cadena de caracteres ya sean letras o números.
    • hidden: indica que será un campo oculto para el envío de datos que no será visible para el usuario.
    • password: se utiliza para los formularios de registro y los caracteres escritos serán mostrados en forma de asteriscos o puntos.
    • checkbox: casillas de verificación.
    • radio: botones de opción.
    • submit: este type se le asigna a un campo input para realizar el envío del formulario en HTML. También existe el type reset que es para borrar todos los campos del formulario sino se desea realizar el envío.

F. Otras etiquetas.

Además de las etiquetas anteriormente mencionadas para nuestro ejemplo existen otras etiquetas que se usan frecuentemente en los formularios. Los más comunes son:
  • select: este campo se configura con varias opciones para ser seleccionadas de una lista.
  • textarea: este campo es utilizado para escribir comentarios largos como el que utiliza WordPress en sus artículos.
Ahora vamos a crear un archivo nuevo y lo vamos a llamar “formulario.html” y lo guardaremos en la raíz de nuestro servidor con el siguiente código:
1<html>
2<head>
3<title>Formulario de Ejemplo</title>
4</head>
5
6<body>
7<form id="formulario" action="enviado.php" method="post">
8    <fieldset>
9        <legend>Formulario de Ejemplo</legend>
10            <label>Nombre</label>
11                <input id="campo1" name="nombre" type="text" />
12            <label>Email</label>
13                <input id="campo2" name="email" type="text" />
14            <input id="campo3" name="enviar" type="submit" value="Enviar" />
15    </fieldset>
16</form>
17</body>
18</html>
Si aún no dispones de un servidor para realizar estas pruebas puedes instalar un servidor local en tu ordenador para que puedas ir trabajando. Puedes leer el artículo de cómo instalar un servidor local el cual te ayudará a realizar tus prácticas sin tener que pagar.

2. Estilos CSS para un formulario en HTML.

Si ya tienes algo de conocimientos en CSS lo que viene ahora te será fácil de entender. Si no te invito a que leas antes el artículo hojas de estilo en cascada para que puedas comprender este apartado.
Continuando con nuestro formulario de ejemplo, vamos a personalizarlo un poco creando un archivo CSS utilizando el método externo. Comencemos a construir nuestro archivo:
1label { font-weight: bold; color: #444; font-size: 14px; }
2input { font-size: 14px; }
3input[type="text"] { margin: 10px 0; background: #fff; border: 1px solid #ccc; color: #777; display: block; max-width: 100%; outline: none; padding: 7px 8px; }
4input[type="submit"] { margin: 10px 0; background: #0088B2; color: #fff; padding: 8px 14px; font-weight: bold; display: inline-block; border: none; cursor: pointer; }
5input[type="submit"]:hover { background: #444; }
Vamos a crear un archivo nuevo y lo guardamos como “formulario.css” en la raíz de nuestro servidor. Ahora nos dirigimos a nuestro archivo “formulario.html” y agregamos la siguiente línea de código entre las etiquetas head:
1<link rel="stylesheet" type="text/css" href="formulario.css" media="all" />
quedándonos así:
1<html>
2<head>
3<title>Formulario de Ejemplo</title>
4<link rel="stylesheet" type="text/css" href="formulario.css" media="all" />
5</head>
6
7<body>
8<form id="formulario" action="enviado.php" method="post">
9    <fieldset>
10        <legend>Formulario de Ejemplo</legend>
11            <label>Nombre</label>
12                <input id="campo1" name="nombre" type="text" />
13            <label>Email</label>
14                <input id="campo2" name="email" type="text" />
15            <input id="campo3" name="enviar" type="submit" value="Enviar" />
16    </fieldset>
17</form>
18</body>
19</html>

3. Aplicando programación dinámica al formulario en HTML.

Siguiendo con nuestro ejemplo vamos a crear un archivo llamado “enviado.php” en el cual escribiremos el siguiente código:
1<?php
2if($_POST["nombre"] && $_POST["email"] != ""){
3    $de = $_POST["nombre"];
4    $destino = "tuemail";
5    $asunto = "FORMULARIO DE EJEMPLO";
6    $mensaje .= "FORMULARIO."."\n";
7    $mensaje .= "\n";
8    $mensaje .= "NOMBRE: " . utf8_decode($_POST["nombre"]) ."\n";
9    $mensaje .= "\n";
10    $mensaje .= "EMAIL: " . utf8_decode($_POST["email"]) ."\n";
11    $emailheader = "From: LO QUE TU QUIERAS <tuemail>\r\n";
12mail($destino, $asunto, $mensaje, $emailheader) or die ("Lo sentimos, tu solicitud no ha sido enviada.<br/>Intentelo de nuevo.");
13echo utf8_decode(utf8_encode('Tu consulta ha sido enviada correctamente.'));
14    } else {
15    if($_POST["nombre"] == ""){
16    echo utf8_encode ('Por favor, indica tu nombre.');
17    exit; }
18    if($_POST["email"] == ""){
19    echo utf8_encode ('Por favor, indica un email de contacto.');
20    exit; }
21}
22?>
Se puede observar que se ha llamado a este archivo “enviado.php” ya que es el que hemos declarado en nuestroformulario en HTML en la línea:
1<form id="formulario" action="enviado.php" method="post" enctype="text/plain">
y este será el archivo encargado de recibir los datos y enviarlos a un correo electrónico.
La programación en PHP para este formulario ha sido diseñada para que tanto el campo “Nombre” como el campo “Email” sean obligatorios por lo que al intentar enviar el formulario en HTML sino se rellenan estos campos aparecerá un mensaje donde indica que deben rellenarlos y no se enviará.
También se puede observar que en el código HTML de “formulario.html” hemos asignado como nombres de los input nombre y email y en el código PHP los hemos escrito exactamente igual ya que tienen que coincidir para que se pueda enviar en formulario con los datos introducidos.
En el código PHP hay una línea, $destino = “tuemail”; donde debes sustituir tuemail por el email al que quieres que te llegue el formulario. Hay otra línea, $emailheader = “From: LO QUE TU QUIERAS \r\n”;, donde debes cambiar LO QUE TU QUIERAS por un nombre cualquiera que se relacione con tu formulario y tuemail por el mismo email al que quieres que te llegue el formulario.
Algo que quisiera aclarar es que la creación de formularios en WordPress normalmente se puede realizar mediante plugins que ahorran mucho el trabajo pero la desventaja que tiene el instalar plugins en WordPress es que se agregan más líneas de código a la página y más archivos en el servidor por lo que a la larga la página web te irá más lenta.

No hay comentarios:

Publicar un comentario

Suscribirse a: Entradas (Atom)