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

Esta etiqueta consta de una instrucción de inicio, <FORM>, y una instrucción de fin, </FORM>, entre las cuales podremos insertar todos los controles que deseemos. Uno de los controles más 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& 1otón de en45o El lenguaje HTML consta de Una etiqueta, '*PUT, permite insertar 4arios tipos de controles, entre los que se encuentra el )otón 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 )otón 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 usándose: "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 código <INPUT TYPE="submit"> podemos insertar un )otón 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 )otón. 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 )otón de en45o. / continuación aprenderemos a insertar los distintos tipos de controles e!istentes y crearemos formularios más complejos que 9asta a9ora, por esta ra(ón de)eremos usar */ME en cada uno de los controles. >uando se pulse el )otón 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 )otón de en45o "'*PUT T+PE,-6u)mit- */ME,-*om)re- </LUE,-Te!to del )otón-& >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. /demás del atri)uto T+PE, esta etiqueta consta de algunos más cuya función 4ariará del tipo de control estemos insertando, es

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

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