Curso de HTML para principiantes, parte V

legamos a la última entrega de HTML para principiantes. Ya hemos cubierto todos los conceptos básicos, y en nuestra entrega anterior avanzamos un poco más y revelamos los detalles de las tablas, además de hablar sobre la forma correcta de subir archivos de imágenes a la web  y la creación de listas. En el día de hoy, abarcaremos uno de los temas más complicados pero también útiles: los formularios.

Hace algunas semanas también les compartimos una lista sobre cómo hacer formularios online sin necesidad de saber de código. Estas opciones también son válidas, pero en ese caso, les recomendamos dejar de leer aquí mismo.

Dentro de HTML tenemos la posibilidad de crear una especie de aplicación web muy básica con código, estos serían los formularios. Generalmente se los usa para eso: formularios de contacto, de consulta, de sugerencias, etc. Su uso está muy abarcado porque ha ido reemplazando al atributo mailto del que les hablamos en el apartado sobre enlaces, dado que varios bots usaban estas direcciones de correo detectándolas en el código para enviar spam.

Tenemos dos tipos de formularios: los formularios simples y los formularios avanzados. Comenzaremos por los simples.

Formularios simples

Se crean usando nada más que dos etiquetas, <form> e <input>. <form>, por supuesto, será la etiqueta que le indique al navegador que está por comenzar un formulario. Y es imperativo que la cerremos cuando termine. Dentro de <form> encerraremos todos los campos que queramos que estén incluidos en el formulario. Con <input>, como veremos a continuación, vamos a poder definir dichos elementos, y son bastantes.

Antes de pasar a estos elementos, deberíamos repasar los atributos que se le pueden sumar al formulario:

• action: con este atributo vamos a indicar la URL donde queremos que se procesen los formularios. Generalmente tendrá la extensión .php.
• method: aquí tendremos dos opciones de atributo, post o get. Dependerá del tipo de método que se use para enviar el formulario. Generalmente, para los formularios de contacto, se usa post, porque permite el envío de mucha más información. Además, los datos enviados por get luego se pueden ver en la barra del navegador, como por ejemplo sucede con Google que emplea este método.
• accept: con este atributo definimos cuáles son los formatos de archivos aceptados por el formulario.

Existen otros atributos, pero estos son los más populares. De hecho, los más usados son action y method.

Elementos de un formulario

Ahora pasaremos a repasar los diferentes elementos que pueden estar incluidos dentro de la etiqueta <input>. Esta es la etiqueta fundamental para crear elementos, con algunas excepciones, así que es importante no olvidarlo. Primero comenzaremos detallando los atributos que puede tener <input> para luego hablar bien de los elementos.

Estos atributos son:

• type: aquí vamos a ingresar qué tipo de elemento queremos. Es el atributo más importante. Con text, passwork, checkbox, submit, reset, y más, podemos armar un formulario simple de contacto.
• name: este atributo le asigna un nombre al elemento, y también es fundamental.
• value: cuando ingresamos este atributo, es para poner un valor inicial dentro del elemento. Por ejemplo, si tenemos una lista del 1 al 10 y queremos que comience con uno, el atributo deberá decir value=”1”.
• size: aquí delimitaremos el tamaño de caracteres que debe tener el campo, en el caso de texto y contraseña, y el tamaño de píxeles que debe tener el cuadro en el resto.
• maxlenght: la cantidad máxima de caracteres permitida en un campo.
• checked: cuando estamos usando checkboxes, este atributo permite predeterminar cuál estará seleccionada de antemano.
• disabled: nos permite deshabilitar un elemento del formulario.
• readonly: permite que creemos un elemento que sea sólo lectura.
• src: nos permite crear botones con imágenes, se usa para el botón del formulario y tiene que estar acompañado por una URL.
• alt: como sucede con este atributo, podemos agregar un texto descriptivo.

Ahora que ya conocemos los atributos, podemos avanzar con los tipos de elemento de formulario que definimos en el código a través del atributo type.

El primero de estos tipos es el campo de texto, el elemento más usado en los formularios. Nos permite crear un cuadro de texto vacío para que, por ejemplo, el usuario pueda insertar su nombre de usuario. En el código, veremos algo así –digo algo así porque falta agregar párrafos y texto; este código es simplemente para ver cómo funcionan las etiquetas y cómo deben ser ordenadas, si lo llevamos a un navegador no funcionará y se verá horrible:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”nombre” />
</form>

</body>
</html>

Aquí vemos cómo quedaría el resultado, pasado al navegador:

Dentro del mismo sentido, casi sin variaciones excepto con el atributo, tenemos a las contraseñas. Estas se deben crear claramente usando el atributo password, y el código no se diferencia demasiado del de texto. Aquí vemos el ejemplo anterior, con el agregado de una contraseña:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<p>Nombre
<input type=”text” name=”nombre” /></p>
<input type=”passwork” name=”Contraseña” />
</form>

</body>
</html>

Ahora avanzamos con las checkboxes, otro clásico de internet, que en realidad no son para nada difíciles de crear. Como pueden intuir, tenemos que usar el atributo checkbox, y luego ir enumerando cada uno de los elementos que queremos que tenga. Es algo engorroso porque hay que usar la etiqueta cada vez que queremos agregar una opción. Para que no sean separados con demasiado espacio, tenemos que añadir además la etiqueta <br />. Siguiendo con nuestro ejemplo:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3
</form>

</body>
</html>

Similares a las checkboxes, tenemos a los radiobuttons, que a diferencia de los anteriores son mutuamente excluyentes. Esto quiere decir que no podemos elegir múltiples opciones, sino únicamente una sola. El tipo de atributo que usamos es radio, y el código nos estaría quedando de esta manera:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3
<input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre
<input type=”radio” name=”sexo” value=”mujer” />Mujer
</form>

</body>
</html>

Ahora podemos avanzar a los botones. Tenemos dos, submit y reset. Uno de ellos nos permitirá enviar la información del formulario, y el otro nos permitirá borrar todos los valores para volver a una instancia original. La diferencia reside en cómo completemos el atributo type. Si es con submit, enviaremos, y si es con reset, borraremos. Antiguamente se usaban los dos botones pero hoy en día se ha perfeccionado y casi nadie usa reset, sobre todo porque los formularios no se crean únicamente con HTML sino que están apoyados por PHP y JavaScript. Igualmente, aquí está el ejemplo:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3
<input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre
<input type=”radio” name=”sexo” value=”mujer” checked=”checked” />Mujer
<input type=”submit” name=”enviar” value=”Enviar” />
</form>

</body>
</html>

También se pueden agregar otros botones usando el tipo de atributo button, pero este tipo de botones únicamente son útiles si los combinamos con JavaScript. Con este código podemos programar para que el botón haga lo que necesitemos que haga.

Formularios avanzados

Ahora pasaremos a los formularios un poco más avanzados. Para poder avanzar necesitamos conocer más etiquetas, una de las más importantes es <fieldset>. Con esta etiqueta podemos agrupar partes del formulario y sumar la etiqueta <legend> para darles un título. Dentro del abanico de posibilidades también encontramos los menús desplegables y las cajas de texto.

Para crear un menú, tenemos que usar no la etiqueta <input> sino la etiqueta <select> y para crear un cuadro de texto, no nos confundamos con <text>, ahora tenemos que usar <textarea>. Dentro de nuestro código anterior, estas nuevas adiciones se verían así:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1 <br />
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2 <br />
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3 <br />
<input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre
<input type=”radio” name=”sexo” value=”mujer” checked=”checked” />Mujer
<input type=”submit” name=”enviar” value=”Enviar” />
<select name=”pais>
<option value=”España”>España</option>
<option value=”Argentina”>Argentina</option>
<option value=”Portugal”>Portugal</option>
<option value=”Chile”>Chile</option>
<textarea name=”comentarios” value=”Deje sus comentarios” cols=”10” rows=”5”></textarea></form>

</body>
</html>

Con esto ya podemos crear un formulario completísimo.