FORMULARIOS
Los formularios son los principales elementos que permiten que el visitante interactúe con nuestra pagina.Los formularios son programas que están escritos en lenguajes de programación como: C, Perl, Java, Visual Basic, a este tipo de programas se les suele denominar como CGI (Common Gateway Interface). Los formularios son plantillas en las cuales el usuario introduce los datos o selecciona una opción y la envía a un servidor o a nuestra dirección de correo electrónico, (la cual utiliza lo que en programación se conoce con el nombre de "Código Transportable"). Un formulario trabaja básicamente así: el visitante selecciona diferentes datos (campos) cada uno de los cuales quedará asociado a una variable. La principal aplicabilidad de los formularios es la posibilidad de crear cuestionarios, encuestas, páginas de comentarios o cualquier documento en la que se desee una interacción por parte del usuario.
La etiqueta utilizada para crear un formulario es <FORM>...<FORM>.
Para que esta etiqueta pueda funcionar debe tener unos atributos.
Cajas de texto
Existen tres formas de insertar un texto en un formulario.
La primera es <INPUT TYPE="TEXT" name=nombre>
EJEMPLO:
El valor TYPE="TEXT" indica que el tipo de dato que se va a introducir es un texto.
La segunda forma de insertar un texto es una variacion de la primera en vez de colocar TYPE=TEXT se coloca TYPE=PASSWORD.
EJEMPLO:
El valor TYPE="PASSWORD" indica que lo que se va a introducir es una clave o una contraseña.
A simple vista no se puede diferenciar la una de la otra, la variacion se da a el momento que la persona introduce los datos. En el primero aparece el texto normal, en el segundo aparecen una estrellitas(esto es por razones de seguridad).
El tamaño de la caja tambien se puede variar esto se hace a traves del valor SIZE. Su valor por defecto es de 20.
Existe otro atributo que es MAXLENGTH el cual define el número máximo de caracteres que puede introducir el usuario.
Por ultimo esta VALUE que indica el texto por defecto que contendrá la caja.
EJEMPLO
Por favor, introduce tu nombre:<br>
<form>
<input type="password" name="Nombre" size="10" maxlength="10">
</form>
El cual se veria asi:
Por favor, introduce tu nombre:
La tercera forma de introducir un texto es a traves de la etiqueta <TEXTAREA> ...</TEXTAREA>
EJEMPLO:
Al igual que el anterior tambien se puede modificar su tamaño:
ROWS define el numero de filas que ocupará la caja de texto.
COLS Columnas que ocupará la caja de texto
EJEMPLO:
<form>
Introduce la opinión que se merece este tutorial:<br>
<textarea name="comentario" rows="8" cols="60">
</textarea>
</form>
El cual se veria asi:
Elementos de Menú
Estos elementos le permitirán a nuestro visitante elegir entre varias opciones, que han sido predeterminadas por nosotros. Esto lo podemos hacer de dos maneras. La primera es:
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">mal
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">bien
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="nada">nada
El cual se veria asi:
mal
bien
nada
Para asociar varios botones de radio a una misma variable les pondremos a todos ellos el mismo NAME. Aparte de esto acepta los siguientes parámetros:
VALUE Este es el valor que asignará a la variable.
CHECKED Si lo indicamos en una de las opciones esta será la que se active por defecto.
La segunda forma es por medio de listas de selección. Para emplearlas deberemos utilizar dos etiquetas, SELECT y OPTION. Veamos un ejemplo:
<SELECT NAME="Colores">
<OPTION>Rojo
<OPTION>Azul
<OPTION>Verde
<OPTION>Otros
</SELECT>
El cual se veria asi:
Explicacion:
<select name="Colores"> Aquí definimos el nombre de la variable que contendrá la información.
option Con esta etiqueta definimos cuantas opciones consideremos necesarias.
</select> Esta cierra la definición de este elemento del formulario.
Atributos de SELECT
SIZE Indica el número de opciones que podremos ver. Si es mayor que 1 veremos una lista de selección y, si no, veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir más de una opción.
Atributos de OPTION
VALUE Este es el valor que asignará a la variable
SELECTED Si lo indicamos en una de las opciones esta será la seleccionada por defécto.Este atributo es utilizado cuando no queremos que aparezca la primera opción selecionada.
Elementos de confirmación
Puede que yo solamente necesito que el usuario sencillamente me confirme o niegue algo. Lo podremos conseguir por medio de controles de confirmación:
<input type="checkbox" name="nombre-variable">
Ejemplo:
<input type="checkbox" name="feo"&eres feo
El Cual se veria asi:
eres feo
Por defecto esa casilla siempre va a aparecer desactiva si queremos activarla desde el principio utilizamos el valor checked
Ejemplo:
<input type="checkbox" name="feo" checked>eres feo
El Cual se veria asi:
eres feo
Botones
Existen dos tipos de botones : uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya rellenado el usuario en caso tal de que se equivoque.
Ejemplo:
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
El cual se veria asi:
Estos botones por si solo no cumplen ninguna funcion, habria que especificarles la URL a la cual queremos que lleguen esos datos. Supongamos que seria para nuestro correo electronico. Seria asi:
Explicacion:
ACTION=URL
Contiene la URL del programa CGI encargado de interpretar la entrada del suario y generar los resultados oportunos.
METHOD= GET / POST Tiene un significado. En principio puede tomar como valor cualquiera de los métodos de transferencia de datos reconocidos por HTTP, pero en la práctica sólo se emplean 2:
GET. Añande los argumento del formulario al URL que se especifica en ACTION (usando como separador el símbolo ?), lo que da lugar a que el programa los reciba como párametros de entrada.
POST. Envía los datos como parte de la entrada estándar.
Otros elementos
TYPE=“hidden”
Es simplemente un almacenamiento interno de datos. El visualizador no muestra el contenido, recogido en el atributo VALUE, pero sí se lo pasa al programa CGI. Resulta un componente muy adecuado para guardar información que se mantiene estable en la página (como un determinado valor que nos indica que los datos que provienen de esta página son los correctos y no otros de otra página distinta). Por ejemplo, si en un documento dado ha leido el nombre de usuarios, éste puede pasar de una página a otra a través de ete tipo de entrada, en vez de agrandar la lista de parámetros añadidos al URL.
<INPUT TYPE=“hidden” NAME=“browser” VALUE=“Arena”>
Este ejemplo, toma un valor oculto (hidden) en la variable browser, como valor “Arena”, que es un tipo de navegador que reconoce el HTML 3.0.
TYPE=“image”
Hace que el visualizador presente una imagen que es sensible al ratón. Lo que el formulario envía al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parámetros .x=n .y=n donde n son los números de las coordenas x y del punto en el que estaba el ratón en el momento del envío. Para presentar la imagen se utiliza el atributo SRC del elemento IMG. Este sería un ejemplo de respuesta:
imagen.x=99&imagen.y=15
Se escribe:
<FORM METHOD="POST" ACTION="cgi-bin/mail.pl">
>INPUT TYPE=IMAGE NAME="imagen" SRC="mail.gif">
</FORM>
Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen.
Mi ultima extensión para el navegador Crhome Javascript en estado puro
Deposito de rutinas Javascript para paginas web acompañado de manuales para implementarlas en sus páginas web de forma fácil y sencilla y unas cuantas utilidades para diseñadores de páginas web, este deposito renueva sus rutinas periódicamente con lo ultimo que sale. La forma de usarlo es sencilla se pulsa sobre el lógo de la extensión en la barra del navegador Crhome y al pulsar sobre el botón Javascript se despliega el deposito que tiene forma de palm y se escoge la rutina que mejor nos venga para lo que queremos hacer.
Pulsa el boton Javascript para que veas el funcionamiento
Canomazo Design