Curso de creación de sitios web - Lección 6 - Página 1
Creación de formularios en HTML
Controles de formularios
Controles text y password
Creación de Formularios
Formularios en HTML - Introducción
Una de las características más útiles para lograr una comunicación interactiva entre el sitio web que estamos creando y los usuarios que lo visitan es la implementación de formularios.
Conocemos por formulario una parte de un sitio web que contiene unos campos como cajas de texto, botones etc, que el visitante puede manipular e insertar información.
Seguramente no nos costará mucho encontrar páginas que contengan algún tipo de formulario; sin ir más lejos, cualquier buscador tiene en su sitio web principal una caja simple y un botón, donde podemos introducir la palabra o frase a buscar. Al pulsar el botón el sistema nos devolverá el restultado en base a nuestro criterio de búsqueda, lo que logra una interactividad entre la página y el usuario. En MundoPC.NET como puedes observar, tenemos incluido en la parte superior un buscador de Internet o local, que usa la tecnología de Google.
De igual modo, existen formularios relativamente complicados con numerosos campos que nos servirán para enviar mucha más información. Este es el caso por ejemplo, de nuestra página de Freeware que usaremos para recomendar programas.
Estos son dos casos en los que el uso de un formulario puede ayudarnos mucho, pero hay muchos más que pueden llegar a ser muy completos, como un foro o un libro de visitas.
Formularios mediante código HTML
Nociones básicas
Como es habitual, comenzaremos aprendiendo como se crea un formulario basándonos en las etiquetas HTML necesarias. En este caso como en muchos otros, tenemos una etiqueta de apertura "<form", y una etiqueta de cierre "</form>", entre las que deberemos insertar todo el código necesario para la confección de nuestro formulario a medida.
Pongamos un ejemplo:
<HTML>
<HEAD>
<TITLE>Formulario de ejemplo</TITLE>
</HEAD>
<BODY>
<H1>FORMULARIO DE EJEMPLO</H1>
<FORM>
Escribe tu nombre: <INPUT TYPE="Text">
</FORM>
</BODY>
</HTML>
En realidad, de todo lo que hemos visto en el código de ejemplo anterior, únicamente tiene que ver con el formulario lo que está marcado en "negrita". El resto, como ya sabes, se trata de un código básico de una página HTML.
Si copiamos ese código y lo guardamos con extensión "htm" o "html", veremos en el navegador el resultado:
No es nada complicado de interpretar; en el formulario, mediante la etiqueta INPUT, le estamos indicando que queremos una caja de del tipo ("Type") texto ("Text").
Puede ocurrir no obstante, que la ausencia de un botón de envío nos confunda e interpretemos que no nos es posible enviar la información. En este caso, como el formulario consta únicamente de un sólo campo, una simple pulsación de "Enter" permitirá procesar lo que hemos escrito.
Veamos ahora como añadir un botón para que nuestro formulario quede más "curioso".
Si al código anterior, le añadimos lo siguiente:
<FORM>
Escribe tu nombre: <INPUT TYPE="Text">
<INPUT TYPE="Submit">
</FORM>
nos aparecerá un botón después de la caja de texto:
NOTA: Aunque pulsemos el botón no se enviará ningún tipo de información porque aún no hemos estudiado como especificarlo en las características del formulario.
Gracias a Submit, tenemos nuestro botón. El texto que aparece es el predeterminado y dependiendo del navegador, puede ser "Enviar Consulta" u otro similar. Si quisiéramos que apareciera un texto diferente, es decir, añadir un nuevo valor a ese botón, tendríamos que especificarlo así:
<INPUT TYPE="Submit" VALUE="Enviar">
Este es el resultado:
Ahora, lógicamente el texto que aparece es "Enviar" porque le hemos asignado ese valor.
Controles de formularios
En el apartado anterior hemos visto como crear de forma sencilla una caja de texto y un botón para enviar la información. Pero la "cosa" puede complicarse bastante y existen también otros controles que repasaremos a continuación.
Hemos aprendido también, que estos controles se añaden gracias a la etiqueta INPUT, definiendo a continuación el tipo de control que queríamos, con Type. Lo controles más usados son los siguientes:
- text: Nos mostraría una caja de texto (como hemos visto en el ejemplo anterior).
- password: Nos mostraría una caja de texto, de tipo contraseña, donde en vez de ver el texto que escribimos, se verían asteriscos o puntos, ocultando la información.
- radio: Muestra un círculo que nos permite seleccionar de entre varias posibilidades, solamente una de ellas.
- checkbox: Muestra una caja, que nos permite seleccionar de entre varias posibilidades una o varias de ellas.
- submit: Nos muestra un botón de envío.
- image: No permite definir una imagen dentro del formulario, para por ejemplo, cambiar el clásico botón por lo que queramos.
- reset: Nos mostrará un botón que borrará todos los datos introducidos en el formulario.
- file: Muestra un campo del tipo fichero, con un botón para seleccionar un archivo de nuestro disco duro.
- hidden: Campos ocultos, donde se definen las características de nuestro formulario.
Controles de TEXT y PASSWORD
Dentro de <INPUT TYPE="Text">, podemos agregar atributos que permitan extender las características del tipo "Text":
- Size: Define el tamaño de la caja de texto.
- Maxlength: Define el número de caracteres que pueden escribirse en la caja de texto.
- Value: Texto por defecto que aparecerá en la caja.
- Align: (left, top, middle, bottom, right). Define la posición de la caja de texto en nuestra página html. Left, alinea la caja a la izquierda, top alinea la caja con la parte superior de la línea donde lo estamos insertando, middle intanta alinear al centro de la línea, bottom alinea con la parte inferior de la línea y right a la derecha de la línea.
Ejemplo de código:
<FORM>
Escribe tu nombre: <INPUT TYPE="Text" SIZE="40" MAXLENGTH="50" VALUE="Caja de texto" ALIGN="middle">
<INPUT TYPE="Submit" VALUE="Enviar">
</FORM>
Resultado:
Animamos a nuestros lectores y alumnos del curso de Webmasters de MundoPC.NET, a probar y modificar estos códigos con el fin de quedarnos mejor con todos los conceptos que vamos estudiando.
Si queremos añadir una caja de texto de tipo Password, podemos hacerlo así:
<FORM>
Escribe tu contraseña: <INPUT TYPE="Password" SIZE="40" MAXLENGTH="50" VALUE="Caja de texto">
<INPUT TYPE="Submit" VALUE="Enviar">
</FORM>
Resultado:
En este caso, los caracteres ocultos corresponden a "Caja de texto", que es el valor por defecto que tiene asignada esta caja.
Índice
Capítulo 1:
1
1A
1B
Capítulo 2:
2
2A
2B
Capítulo 3:
3
Capítulo 4:
4
4A
4B
Capítulo 5:
5
5A
5B
Capítulo 6:
6
6A
6B
6C
6D
6E
Capítulo 7:
7
7A
|
|
Estás en: