You are on page 1of 3

Formularios en HTML Para crear un formulario el lenguaje HTML proporciona la etiqueta FORM.

Esta etiqueta consta de una instruccin de inicio, <FORM>, y una instruccin de fin, </FORM>, entre las cuales podremos insertar todos los controles que deseemos. Uno de los controles ms usados La caja de te!to. "#$%M& 'ntrodu(ca su nom)re "'*PUT T+PE,-Te!t-& ".#$%M& Ejemplo completo "HTML& "HE/0& "T'TLE&#ormulario de ejemplo".T'TLE& ".HE/0& "1$0+& "H2&#$%MUL/%'$ 0E E3EMPL$".H2& "#$%M& 'ntrodu(ca su nom)re "'*PUT T+PE,-Te!t-& ".#$%M& ".1$0+& ".HTML& 1otn de en45o El lenguaje HTML consta de Una etiqueta, '*PUT, permite insertar 4arios tipos de controles, entre los que se encuentra el )otn de en45o. El atri)uto TYPE. 6e usa para indicar el tipo de control que queremos insertar. T+PE,-su)mit- Usado para crear el )otn de en45o. Por tanto si en el ejemplo anterior queremos insertar uno, de)emos a7adir esta etiqueta 8de a9ora en adelante omitiremos las etiquetas HTML, HE/0 y 1$0+, pero por supuesto de)e seguir usndose: "H2&#$%MUL/%'$ 0E E3EMPL$".H2& "#$%M& "P&'ntrodu(ca su nom)re "'*PUT T+PE,-Te!t-& "P&"'*PUT T+PE,-6u)mit-& ".#$%M& Usando el cdigo <INPUT TYPE="submit"> podemos insertar un )otn de en45o de manera que al pulsar so)re ;l se en45an los datos del formulario. "P&"'*PUT T+PE,-6u)mit- </LUE,-En45eme-& /tri)uto, */ME, El lenguaje HTML permite la posi)ilidad de incluir 4arios )otones para dar un nom)re a cada uno que permita al ser4idor diferenciar cual se 9a pulsado. Este nom)re ser en4iado junto con los datos cuando se pulse so)re el )otn. 0e esta forma es posi)le reali(ar acciones diferentes dependiendo de s5 se pulsa uno u otro. Por ejemplo pod5an incluirse )otones que simulasen distintas direcciones a las que acceder tras introducir los datos "'*PUT T+PE,-6u)mit- </LUE,-/rri)a- */ME,-arri)a-& "'*PUT T+PE,-6u)mit- </LUE,-'(quierda- */ME,-i(quierda-& "'*PUT T+PE,-6u)mit- </LUE,-0erec9a- */ME,-derec9a-& "'*PUT T+PE,-6u)mit- </LUE,-/)ajo- */ME,-a)ajo-& Es importante indicar que el atri)uto */ME no de)e usarse =nicamente para el )otn de en45o. / continuacin aprenderemos a insertar los distintos tipos de controles e!istentes y crearemos formularios ms complejos que 9asta a9ora, por esta ra(n de)eremos usar */ME en cada uno de los controles. >uando se pulse el )otn de en45o se en4iar los datos de cada control junto con el nom)re especificado con este atri)uto. 0e esta forma el ser4idor podr sa)er el control en que se 9a insertado cada dato. %ecordemos )re4emente todos los atri)utos de la etiqueta '*PUT cuando la usamos para insertar el )otn de en45o "'*PUT T+PE,-6u)mit- */ME,-*om)re- </LUE,-Te!to del )otn-& >ontroles de #ormularios.

Para empe(ar 4amos a 4er una serie de controles todos los cuales se crean con la etiqueta '*PUT. Para diferenciar entre unos controles y otros se 9ar uso del atri)uto T+PE que puede tomar los siguientes 4alores te!t, pass?ord, radio, c9ec@)o!, su)mit, image, reset, file y 9idden. /dems del atri)uto T+PE, esta etiqueta consta de algunos ms cuya funcin 4ariar del tipo de control estemos insertando, es

decir, en funcin del 4alor del atri)uto T+PE. Uno com=n a todos es */ME, ya mencionado, con el que damos un nom)re al control, y que es recomenda)le usarlo siempre. $tro tam)i;n com=n a todos ser /L'A*, que e!plicaremos con las cajas de te!to. Una 4e( 9ec9o este comentario, podemos empe(ar a estudiar cada uno de los tipos de control uno a uno. Cajas de texto. recordaremos que para insertar este tipo de control en una pgina Be) se usa la etiqueta '*PUT 8esta misma etiqueta ser la utili(ada para insertar la mayor5a de controles:, con T+PE,-te!t-. Es decir "#$%M& "'*PUT T+PE,-te!t-& ".#$%M& 6i nuestra intencin es insertar ms de un control ser con4eniente darle un nom)re a la caja de te!to. Para ello usaremos, tal y como 9ac5amos con el )otn de en45o, el atri)uto */ME "#$%M& "'*PUT T+PE,-te!t- */ME,-mite!to-& ".#$%M& 6'CE 0etermina la anc9ura de la caja de te!to. El 4alor por defecto de este atri)uto es DE caracteres, esta es la longitud. En ocasiones con4endr decrementar o incrementar este 4alor por defecto, pero en todo caso siempre ser con4eniente mantener un 4alor menor de FE caracteres de manera que la caja de te!to quepa en la mayor5a de pantallas. Un pro)lema adicional que dificulta una correcta eleccin del tama7o de la caja es que este tama7o ser considerado de distinta forma por los distintos na4egadores y ms a=n si estos son de distintos sistemas operati4os. El atri)uto SIZE nos permite 4ariar la longitud de la caja de te!to. 0e)emos tener en cuenta que en diferentes na4egadores un mismo 4alor no se corresponde a una misma longitud. "'*PUT T+PE,-te!t-& "'*PUT T+PE,-te!t- si(e,GE& "'*PUT T+PE,-te!t- si(e,FE& MAXLENGTH: >on este atri)uto limitamos el n=mero m!imo de caracteres que pueden ser escritos en una caja de te!to. El 4alor de este atri)uto puede ser mayor o menor que el especificado en 6'CE, y que es totalmente independiente. 6i es mayor cuando lleguemos al final de la caja de te!to los nue4os caracteres que insertemos irn despla(ando 9acia la i(quierda a los primeros, que dejarn de estar a la 4ista 8$3$, esto no quiere decir que sean )orrados:. "'*PUT T+PE,-te!t- 6'CE,-DE- M/HLE*ATH,-DE-& "'*PUT T+PE,-te!t- 6'CE,-DE- M/HLE*ATH,-F-& "'*PUT T+PE,-te!t- 6'CE,-DE- M/HLE*ATH,-IE-& Por =ltimo queda decir que si no usamos el atri)uto M/HLE*ATH el n=mero de caracteres que pueden introducirse en la caja de te!to no tendr l5mite VALUE: 6ir4e para especificar un te!to que de)e aparecer por defecto en la caja de te!to, antes de que el usuario escri)a nada. Este te!to suele ser, en general, o )ien instrucciones o )ien la respuesta ms pro)a)le. <eamos un ejemplo que ilustra estos dos casos "#$%M& "P&*om)re "'*PUT T+PE,-te!t- </LUE,-'ntrodu(ca aqu5 su nom)re-& "P&JLe gusta nuestro Be)K "'*PUT T+PE,-te!t- </LUE,-6i, muc95simo-& ".#$%M& /lineamiento de controles. /tri)uto ALIGN permitir seleccionar entre 4arios tipos de alineamiento. /L'A*,-top- /linea 4erticalmente el control con la parte superior de la l5nea en que es insertado. /L'A*,-)ottom- /linea 4erticalmente el control con la parte inferior de la l5nea. /L'A*,-middle- 6it=a el control a una altura media entre el resto de elementos de la l5nea. /L'A*,-left- En este caso estamos alineando el control 9ori(ontalmente a la i(quierda. /l contrario de lo que ocurr5a con las imgenes y con las ta)las, el te!to no )ordear el control por su derec9a, situndose ;ste en una l5nea propia. /L'A*,-rig9t- Este 4alor es id;ntico al anterior en funcionamiento, slo que a9ora el control se situar a la derec9a de la 4entana del na4egador.

Todos el atri)uto /L'A* y todos estos 4alores e!isten para todos los controles que 4eamos a partir de a9ora y que usen la etiqueta '*PUT. Para terminar con las cajas de te!to 4eamos un resumen de todos sus atri)utos y sus funciones "'*PUT T+PE,-te!t- */ME,-nom)re- </LUE,-4alor por defecto- 6'CE,-tama7o- M/HLE*ATH,-longitudLm!ima/L'A*,-alineamiento-& >ajas de te!to para cla4es. una caja de te!to modificada en la que al escri)ir se mostrarn =nicamente asteriscos. Para ello de)emos usar T+PE,-pass?ord- en la etiqueta '*PUT. Un ejemplo t5pico de uso de pass?ord es al pedir una identificacin, por ejemplo para entrar en algunas secciones de una pgina. Para crear este formulario podemos usar el siguiente cdigo HD&"#$*T >$L$%,-MNENE##-&#ormulario de autenticacin".#$*T&".HD& "#$%M& "P&'ntrodu(ca su nom)re "'*PUT T+PE,-te!t- */ME,-nom)re-& "P&'ntrodu(ca su cla4e "'*PUT T+PE,-pass?ord- */ME,-cla4e-& "P&"'*PUT T+PE,-su)mit- </LUE,-En4iar-& ".#$%M& Las cajas de te!to para cla4es tam)i;n tienen los atri)utos 6'CE, M/HLE*ATH, </LUE y /L'A* que 4imos en las cajas de te!to. /l igual que 9icimos con estas, 4eamos un resumen de todos los atri)utos de las cajas de te!to para cla4es "'*PUT T+PE,-pass?ord- */ME,-cla4e- 6'CE,-tama7o- M/HLE*ATH,-longitudLm!ima- </LUE,-cla4e por defecto/L'A*,-alineamiento-& 1otones de eleccin Estos controles reci)en tam)i;n el nom)re de )otones de radio, Para insertar un )otn de eleccin usaremos de nue4o la etiqueta '*PUT, pero esta 4e( el 4alor del atri)uto T+PE ser radio "#$%M& "'*PUT T+PE,-radio-& ".#$%M& Este tipo de controles tiene dos estados o posiciones seleccionado 8$*: o no seleccionado 8$##:, estando inicialmente todos en la posicin $##. Tam)i;n es posi)le especificar que un )otn determinado est; seleccionado inicialmente insertando el atri)uto >HE>OE0 en la etiqueta '*PUT de la siguiente manera "'*PUT T+PE,-radio- >HE>OE0& Los )otones de eleccin suelen ser insertados en los formularios en grupos, dando al usuario la posi)ilidad de elegir entre una serie de opciones. >uando pulsamos so)re un )otn de radio le pasamos a la posicin $* y permanecer en ese estado 9asta que pulsemos en otra opcin del mismo grupo. Esto es as5 porque entre los )otones de radio de un mismo grupo slo uno de ellos puede estar seleccionado, por tanto cuando seleccionamos uno, aquel que estu4iese seleccionado pre4iamente dejar de estarlo. <eamos un ejemplo 'ndique el tipo de m=sica que ms le guste "#$%M& "P&"'*PUT T+PE,-radio- */ME,-musica- </LUE,-3a((-&3a(( "P&"'*PUT T+PE,-radio- */ME,-musica- </LUE,-Pop-&Pop "P&"'*PUT T+PE,-radio- */ME,-musica- </LUE,-%oc@-&%oc@ "P&"'*PUT T+PE,-radio- */ME,-musica- </LUE,->ountry-&>ountry ".#$%M&