FORMULARIO DE CONTACTO HTML

Comencemos con nuestro formulario web de contacto, veremos su estructura, explicaremos las etiquetas que contiene y después comenzaremos a darle funcionalidad y estilo.

Formulario de Contacto I

Formulario de Contacto I

Ahora bien explicaremos cada una de las etiquetas presentes en nuestro formulario web

Definición de la etiqueta

Etiqueta HTML utilizada para crear formularios

Atributos Necesarios

action=”” indicar a que URL mandamos el contenido de un formulario

method=”” indicar por que método pasaremos los campos acepta dos: post (recomendado) y get (pasa el valor de los campos por URL)

name=”” Nombre del formulario, si usamos dreamweaver e insertamos el formulario de forma automática por default le pone form1, en nuestro caso lo crearemos escribiendo directamente el código HTML .*

id=”” Identificador único para el elemento o formulario .*

* Estos dos atributos son opcionales, en lo personal los uso como necesarios, más adelante veremos el porque de tomarlos así.

Standard

Estos atributos tienen que ver practicamente con el estilo y el tipo de datos que se van a enviar por medio del formulario, comentaremos los necesarios para que funcionen correctamente.

class=”” Especificar la clase CSS que usaremos para dar estilo a todo el contenido del formulario.

style=”” Podemos crear estilos CSS directamente, muchas veces necesitamos una característica especial y no deseamos incluirla en nuestro CSS general.

De Evento

La etiqueta

soporta atributos de evento como: onClick, ondblclick, onmouseover, etc., no los detallaremos a fondo pues en este ejemplo no los usaremos, sin en cambio, por medio de otros métodos daremos efectos y acciones dinámicas a los elementos de nuestro formulario, se comieza a poner buena la cosa no?

Definición de la etiqueta input

Esta etiqueta nos servirá para obtener la información del usuario mediante varios tipos de input o campo.

Atributos necesarios

type=”” Atributo que indica el tipo de input que queremos se presente en el formulario: button, checkbox, file, hidden, image, password, radio, reset, submit, text.

name=”” Nombre del input, por medio de este nombre podremos procesar mas adelante los datos en nuestros scripts php, es inportante siempre revisar que todos y cada uno de los inputs cuenten con un nombre. *

id=”” Identificador único para el input, este nos servira entre otras cosas para identificar los inputs de forma única .*

value=”” Asigna un valor inicial. **

* Estos dos atributos son opcionales, en lo personal los uso como necesarios, más adelante veremos el porque de tomarlos así.

** Este es de uso opcional, depende de las caracteristicas y el uso que se le vaya a dar al formulario.

Atributos Standard

Estos atributos tiene que ver principalmente con el comportamiento y el estilo del <input>.

class=”” Especificar la clase CSS que usaremos para dar estilo al <input>.

style=”” Podemos crear estilos CSS directamente, muchas veces necesitamos una característica especial y no deseamos incluirla en nuestro CSS general.

tabindex=”” Indica el orden de tabulación para cada <input>.

Definición de la etiqueta textarea

Define un campo de texto multi-línea

Atributos necesarios

name=”” Nombre del input, por medio de este nombre podremos procesar mas adelante los datos en nuestros scripts php. *

id=”” Identificador único para el input, este nos servira entre otras cosas para identificar los inputs de forma única .*

* Estos dos atributos son opcionales, en lo personal los uso como necesarios, más adelante veremos el porque de tomarlos así.

A diferencia de la etiqueta input, cuando queremos asignar un valor, no se hace con el atributo value=”” sino que se escribe de la siguiente forma:

Atributos Standard

Estos atributos tiene que ver principalmente con el comportamiento y el estilo del textarea.

class=”” Especificar la clase CSS que usaremos para dar estilo al textarea.

style=”” Podemos crear estilos CSS directamente, muchas veces necesitamos una característica especial y no deseamos incluirla en nuestro CSS general.

Definición de la etiqueta select

Con esta etiqueta creamos listas desplegables, que aunque para algunas situaciones no son lo mas recomendable, son de bastante uso.

Atributos necesarios

name=”” Nombre del input, por medio de este nombre podremos procesar mas adelante los datos en nuestros scripts php. *

id=”” Identificador único para el input, este nos servira entre otras cosas para identificar los inputs de forma única .*

* Estos dos atributos son opcionales, en lo personal los uso como necesarios, más adelante veremos el porque de tomarlos así.

Además cuenta con un atributo multiple que permite se puedan seleccionar varios elementos y el atributo size que establece cuantos elementos se mostrarán en el cuadro de lista.

Atributos Standard

Estos atributos tiene que ver principalmente con el comportamiento y el estilo del select.

class=”” Especificar la clase CSS que usaremos para dar estilo al select.

style=”” Podemos crear estilos CSS directamente, muchas veces necesitamos una característica especial y no deseamos incluirla en nuestro CSS general.

En conjunto con la etiqueta input, textarea, select se recomienda usar la etiqueta label, esta no afecta en nada la vista del campo, sin embargo es de mucha ayuda ya que cuando se hace clic sobre ellas, automáticamente se toma o deja el foco en cada elemento para el cual esta definida.

Soporta los mismos atributos standar que la etiqueta input más el opcional for=”” que sirve para indicar a que campo pertenece basandonos en el valor del atributo name=””.

Existen un par de etiquetas que se recomienda usar sobre todo para escribir de forma ordenada nuestros formularios, son las etiquetas fieldset y legend las cuales se usan en conjunto, la primera agrupa un conjunto de inputs o campos y la otra sirve para asignar un título a este conjunto.

La etiqueta fieldset dibuja un recuadro que abarca todos los elementos que se encuentren dentro de ella, ademas de soportar los atributos id, class y style entre otros.

Si bien esta explicación esta un poco extensa, creo que es de mucha importancia, muchas veces sucede que creamos formularios web sin tener el conocimeinto de lo que hace cada cosa, lo digo con conocimiento de causa pues en mis inicios asi me pasaba.

En la próxima entrega de Formularios Web nos dedicaremos a darle estilo mediante CSS (cascade Style Sheets).