Formularios
Un formulario es un elemento que permite recoger datos introducidos por el usuario.
Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.
Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta <form> tiene los siguientes atributos:
El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.
El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el método mediante el que se transferirán las variables del formulario. Su valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos.
El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.
Se recomienda utilizar el valor post.
La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método indicado en el atributo METHOD.
Observe el vídeo y tome apuntes si es necesario, recuerde que usted puede pausar el vídeo donde lo requiera.
Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.
Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta <form> tiene los siguientes atributos:
El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.
El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el método mediante el que se transferirán las variables del formulario. Su valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos.
El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.
Se recomienda utilizar el valor post.
La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método indicado en el atributo METHOD.
Observe el vídeo y tome apuntes si es necesario, recuerde que usted puede pausar el vídeo donde lo requiera.
formularios-html-236-k8u3gi.pdf | |
File Size: | 54 kb |
File Type: |
Ejemplos :
<form action="pagina1.html">
method (GET or POST)
<form action="pagina1.html" method="GET">
or:
<form action="pagina1.html" method="POST">
Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero los elementos interactivos son los más interesantes. Estos elementos interactivos son:
<html>
<head>
<title>Ejemplo de formulario sencillo</title>
</head>
<body>
<h3>Formulario muy sencillo</h3>
<form action="http://www.librosweb.es/maneja_formulario.php" method="post">
Escribe tu nombre: <input type="text" name="nombre" value="" /> <br/>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
Cree un archivo html llamado formulario.html y copie el ejemplo, note que esta con colores los diferentes tipos de elementos que creamos en el formulario
<html>
<head>
<title>Ejemplo de formulario sencillo</title>
</head>
<body>
<h3>Formulario </h3>
<FORM method=post action="cgi-bin/script.pl">
Registro de un usuario
<TABLE BORDER=0>
<TR> <TD>Apellido</TD>
<TD> <INPUT name="apellido"> </TD>
</TR>
<TR> <TD>Nombre</TD>
<TD> <INPUT name="nombre"> </TD>
</TR>
<TR> <TD>Género</TD>
<TD>Hombre: Mujer: <INPUT name="género" value="M"> <br>
Mujer: <INPUT name="género" value="F">
</TD>
</TR>
<TR> <TD>Ocupación</TD>
<TD> <SELECT name="ocupación">
<OPTION VALUE="profesor">Profesor</OPTION>
<OPTION VALUE="estudiante">Estudiante</OPTION>
<OPTION VALUE="ingeniero">Ingeniero</OPTION>
<OPTION VALUE="jubilado">Jubilado</OPTION>
<OPTION VALUE="otro">Otro</OPTION>
</SELECT>
</TD>
</TR>
<TR> <TD>Comentarios</TD>
<TD> <TEXTAREA rows="3" name="comentarios">Escriba aquí sus comentarios</TEXTAREA>
Enviar
</TD>
</TR>
<TR> <TD COLSPAN=2> <INPUT value="Enviar"> </TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
Ingrese a la pagina y observe la estructura de los Formularios , analice y realice un ejemplo.
http://usuaris.tinet.cat/acl/html_web/manual/formularios/formularios_1.html
Observe el vídeo atentamente, tome apuntes si es necesario
<form action="pagina1.html">
method (GET or POST)
<form action="pagina1.html" method="GET">
or:
<form action="pagina1.html" method="POST">
Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero los elementos interactivos son los más interesantes. Estos elementos interactivos son:
- La etiqueta INPUT: Todos los botones y casillas de texto
- La etiqueta TEXTAREA: una casilla de texto
- La etiqueta SELECT: una lista de opciones múltiples
<form id="contact_form" action="#" method="POST" enc>
<div > <label for="name">Tu nombre:</label><br />
<input id="name" name="name" value="" size="30" /><br /> </div>
<div > <label for="email">Tu email:</label><br />
<input id="email" name="email" value="" size="30" />br /> </div>
<div > <label for="message">Tu mensaje:</label><br />
<textarea id="message" name="message" rows="7" cols="30"></textarea><br /> </div>
<input id="submit_button" value="Enviar email" />
</form>
<html>
<head>
<title>Ejemplo de formulario sencillo</title>
</head>
<body>
<h3>Formulario muy sencillo</h3>
<form action="http://www.librosweb.es/maneja_formulario.php" method="post">
Escribe tu nombre: <input type="text" name="nombre" value="" /> <br/>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
Cree un archivo html llamado formulario.html y copie el ejemplo, note que esta con colores los diferentes tipos de elementos que creamos en el formulario
<html>
<head>
<title>Ejemplo de formulario sencillo</title>
</head>
<body>
<h3>Formulario </h3>
<FORM method=post action="cgi-bin/script.pl">
Registro de un usuario
<TABLE BORDER=0>
<TR> <TD>Apellido</TD>
<TD> <INPUT name="apellido"> </TD>
</TR>
<TR> <TD>Nombre</TD>
<TD> <INPUT name="nombre"> </TD>
</TR>
<TR> <TD>Género</TD>
<TD>Hombre: Mujer: <INPUT name="género" value="M"> <br>
Mujer: <INPUT name="género" value="F">
</TD>
</TR>
<TR> <TD>Ocupación</TD>
<TD> <SELECT name="ocupación">
<OPTION VALUE="profesor">Profesor</OPTION>
<OPTION VALUE="estudiante">Estudiante</OPTION>
<OPTION VALUE="ingeniero">Ingeniero</OPTION>
<OPTION VALUE="jubilado">Jubilado</OPTION>
<OPTION VALUE="otro">Otro</OPTION>
</SELECT>
</TD>
</TR>
<TR> <TD>Comentarios</TD>
<TD> <TEXTAREA rows="3" name="comentarios">Escriba aquí sus comentarios</TEXTAREA>
Enviar
</TD>
</TR>
<TR> <TD COLSPAN=2> <INPUT value="Enviar"> </TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
Ingrese a la pagina y observe la estructura de los Formularios , analice y realice un ejemplo.
http://usuaris.tinet.cat/acl/html_web/manual/formularios/formularios_1.html
Observe el vídeo atentamente, tome apuntes si es necesario