Formulario 1ª Parte

En este tutorial os enseñaré las partes básicas para diseñar un formulario de contacto, así como sus propiedades. Veremos de pasada otros atributos de formulario que nos pueden servir para crear formularios más complejos. Cuando veamos los “spry” veremos que el diseño web de nuestro formulario puede quedar mucho más atractivo y completo.

Para empezar, veremos el panel en “insertar” de formularios, desde el que trabajaremos en todo el tutorial. Tan solo veremos la parte básica como dije anteriormente y en otro tutorial crearemos el formulario con “spry”.

AsmapOnline | Diseño Web, Marketing Online

Para crear un formulario, lo primero es crear un área, llamémoslo así, ya que al crear el formulario lo bordea con una línea discontinua roja.

Veámoslo en el ejemplo siguiente:

Para crear el formulario o área de formulario pulsamos en el botón que vemos a continuación.

AsmapOnline | Diseño Web, Marketing Online

Como vemos en la siguiente imagen se forma el área que dije anteriormente, donde pondremos todos los elementos que deseemos para dicho formulario.

AsmapOnline | Diseño Web, Marketing Online

Para crear una caja de texto pulsaremos en el siguiente botón.

AsmapOnline | Diseño Web, Marketing Online

AsmapOnline | Diseño Web, Marketing Online

Nos aparece la siguiente ventana donde pondremos en ID en nombre de la caja de texto para poder administrar la información recogida en el formulario, en ETIQUETA pondremos el mismo nombre y nos aparecerá un label con el nombre que hemos puesto en etiqueta.

AsmapOnline | Diseño Web, Marketing Online

Pulsamos ACEPTAR y vemos el resultado.

AsmapOnline | Diseño Web, Marketing Online

Para crear un botón pulsamos en el siguiente botón.

AsmapOnline | Diseño Web, Marketing Online

Al igual que en la caja de texto nos aparece la misma ventana para indicar el ID del elemento y su ETIQUETA que en este caso no pondremos nada, porque no queremos que se nos cree un label al lado del botón con el nombre.

A continuación veremos las diferentes propiedades de las cajas de texto y de los botones.

Para ver la ventana de propiedades del elemento, tan solo tenemos que seleccionarlo y ver debajo que en la ventana de propiedades nos aparecen las propiedades del elemento seleccionado.

AsmapOnline | Diseño Web, Marketing Online

Ahora pasamos a describir los atributos de propiedades que vemos en la imagen de arriba perteneciente a la caja de texto.

El primero es Ancho car se refiere al ancho en caracteres de la caja de texto, personalmente esto no lo utilizo, ya que es mucho más exacto aplicar un css dándole un ancho. En Car máx se indica el máximo número de caracteres admitidos, esto si es útil ya que podemos delimitar los caracteres a escribir en una caja de texto. Si poseemos información en un caja de texto como las condiciones de inscripción o de uso del sitio web, podemos poner que solo sea lectura, para que no pueda ser alterada la información. El campo desactivado solo lo pondremos cuando queramos que se active o desactive en un momento determinado, pero para esto hay que saber programación, difícil hacerlo si no se tienen nociones de ello. En TIPO vemos una parte muy interesante y útil, como es determinar si queremos que la caja de texto sea de una línea o de varias, indicando el número de líneas que queremos que sea o una contraseña, en ese caso, el texto se verá con símbolos para no identificar la contraseña que se esté introduciendo. En clase, esto es igual para todos los elementos, indicamos si tenemos creada una clase css para dichos elementos. Y en valor inicial, ponemos el texto que queremos que se vea de forma inicial cada vez que se inicie el formulario.

AsmapOnline | Diseño Web, Marketing Online

Un botón es mucho más simple ya que tan solo tenemos que indicar si es un botón para enviar un formulario, para restablecer el formulario, lo que hace es borrar toda la información escrita y dejar con los valores iniciales.

Los siguientes botones de formulario los veremos en el siguiente tutorial, espero que os animéis cada vez más a realizar vuestro diseño web.

Deja un comentario

*
WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera