Download - Formularios en html
![Page 1: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/1.jpg)
FORMULARIOS EN HTML
¿Qué son los formularios? ¿Cómo se hacen?
![Page 2: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/2.jpg)
¿Qué son formularios?
Una herramienta que hace posible obtener datos de algo en específico.
En internet los formularios recolectan información online con interacción del usuario para ejecutar una acción.
Que son que?
![Page 3: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/3.jpg)
¿Cómo se hacen los formularios? Para definir los elementos interactivos
hay cinco etiquetas que junto con atributos y modificadores indican como recolectar información y manejarla después de recolectada.
Cálmate! No es tan difícil una vez que lo entiendes y lo pones en práctica :D
![Page 4: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/4.jpg)
Etiqueta <FORM>
Todo formulario debe estar encerrado entre las etiquetas <FORM> y </FORM> que a su vez debe ubicarse entre el <BODY> y </BODY> del documento HTML. Esta etiqueta <FORM> presenta tres atributos posibles:Comando
Descripción
ACTION
El valor de este parámetro es la URL del programa o guión en el Servidor Web utilizado para procesar la información recolectada.
![Page 5: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/5.jpg)
Comando
Descripción
METHOD
Puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.
Etiqueta <FORM>
El valor GET:Todas las variables se enviarán por la dirección HTML. Ósea que los datos guardados aparecen en la barra de direcciones
NO PUEDO!!
![Page 6: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/6.jpg)
El valor POST:Básicamente envía las variables de forma “oculta” para que nadie pueda ver los datos que ha enviado al pulsar el botón de envío de formulario.
Etiqueta <FORM>
<form action=”url” method=”post”>…</form>
<form action=”url” method=”get”>…</form>
Qué es eso?
![Page 7: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/7.jpg)
Comando
Descripción
ENCTYPE
Éste atributo está reservado para que la información viaje en forma encriptado a través de Internet.
Etiqueta <FORM>
El atributo o parámetro ENCTYPE es optativo y no es realmente importante.
YEAH!!
![Page 8: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/8.jpg)
Etiqueta <INPUT> Se la puede definir como una etiqueta
multifunción, ya que con la misma podemos crear "push buttons", "radio buttons", "check boxes", y simples recuadros para ingresar texto.
Posee ocho posibles parámetros: ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE.
Que RAYOS!!
![Page 9: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/9.jpg)
Pero no se asusten! Los atributos cruciales para toda etiqueta <INPUT> son:
NAME: que asocia un nombre con cada variable ingresada.
TYPE: que puede asumir los valores TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, IMAGE y HIDDEN
Etiqueta <INPUT>
No te atragantes!!
![Page 10: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/10.jpg)
Todo de acuerdo al tipo de elemento que queramos representar.
Etiqueta <INPUT>
<form action=”url” method=”post”>
<INPUT NAME="nombre" MAXLENGTH="25" TYPE="TEXT" VALUE="">Ó<INPUT NAME="boton" TYPE="SUBMIT" VALUE="Enviar">
</form>
![Page 11: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/11.jpg)
Etiqueta <SELECT>
Este par de etiquetas define una lista de elementos de los cuales el usuario debe seleccionar uno o varios, de acuerdo a los atributos que especifiquemos.
![Page 12: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/12.jpg)
Etiqueta <OPTION>
Con esta etiqueta definimos cada elemento de las listas designadas con el par <SELECT> y </SELECT>.
![Page 13: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/13.jpg)
Etiqueta <TEXTAREA>
Este par de etiquetas nos permiten definir un area de dimensiones arbitrarias que funciona como una suerte de editor, donde el usuario puede ingresar texto.
Controlamos el tamaño del area de texto con los parámetros ROWS y COLS
![Page 14: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/14.jpg)
¿Cómo construir un formulario? Un formulario siempre debe llevar el
atributo NAME para poder identificar el nombre de la variable que se alojará.
<FORM><INPUT TYPE="text" NAME="nombre"></FORM>
También se le puede dar un valor predeterminado
<FORM><INPUT TYPE="text" NAME="nombre" VALUE="J.J. Lopez"></FORM>
![Page 15: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/15.jpg)
Los atributos SIZE se puede aplicar tamaño al formulario, si no se especifica por defecto se aplicara tamaño 20.
Con MAXLENGTH se aplica el limite de caracteres.
¿Cómo construir un formulario?
<FORM><INPUT TYPE="text" NAME="nombre" SIZE=30 MAXLENGTH=15></FORM>
![Page 16: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/16.jpg)
Radio Buttons y Check Boxes Los Radio Buttons le permiten al usuario
seleccionar una entre varias opciones. En cambio las Check Boxes le dan la posibilidad de elegir una o más opciones.
![Page 17: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/17.jpg)
Radio Buttons
<FORM><INPUT TYPE="radio" NAME="equipos" VALUE="cuervo">San Lorenzo<BR><INPUT TYPE="radio" NAME="equipos" VALUE="gallina">River Plate<BR><INPUT TYPE="radio" NAME="equipos" VALUE="bostero">Boca Juniors</FORM>
![Page 18: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/18.jpg)
Con el atributo CHECKED le indicamos al navegador cual de todas las opciones debe aparecer marcada por defecto.
Radio Buttons
<FORM> ¿Quién será el campeón del torneo argentino?<BR><BR><INPUT TYPE="radio" NAME="equipos" VALUE="cuervo" CHECKED>San Lorenzo…</FORM>
![Page 19: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/19.jpg)
Check Boxes
<FORM><INPUT TYPE="checkbox" NAME="cuervo" VALUE="YES">San Lorenzo…</FORM>
Es DEMACIADO!!
![Page 20: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/20.jpg)
Listas en Formularios
Utilizamos la etiqueta <SELECT> en lugar de la utilizada anteriormente <INPUT> que a diferencia debe ser cerrada con su para </SELECT>.
<FORM><SELECT NAME="equipos"> <OPTION VALUE="cuervo">San Lorenzo <OPTION VALUE="gallina">River Plate <OPTION VALUE="bostero">Boca Juniors<OPTION VALUE="rojo">Independiente <OPTION VALUE="academia">Racing Club</SELECT> </FORM>
![Page 21: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/21.jpg)
Botones SUBMIT y RESET
Este tipo de boton envía la información (SUBMIT). Mientras que el RESET lo que hace es borrar las modificaciones realizadas por el usuario y regresar todos los valores por defecto. Se puede cambiar el texto de los botones con VALUE.
<FORM> <INPUT TYPE="submit" VALUE="Enviar Datos"> <INPUT TYPE="reset" VALUE="Borrar Datos"> </FORM>
![Page 22: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/22.jpg)
No es difícil O SI?
![Page 23: Formularios en html](https://reader038.vdocuments.co/reader038/viewer/2022102706/557b70b4d8b42a0d578b557d/html5/thumbnails/23.jpg)
La buena noticia??
Terminamos!