T
Techno3D
Beta
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
[Tutorial] Creación de un formulario.
Hola amigos de Forobeta, en este tutorial les enseñaré a como crear un formulario para que nuestros amigos puedan enviarnos datos o para rellenarlos nosotros mismos, es mi primer tutorial, quería destacar muchas cosas pero empece con esto. Lo he puesto en esta sección ya que aunque juego con algunos códigos de php y mysql para hacer unas cosas, la base y el formulario en sí se hace vía HTML, 😉
Comenzamos:
1- Principio de la creación del formulario.
Bueno, primeramente, comenzaremos colocando la etiqueta de apertura en HTML de un párrafo llamada <p> y su etiqueta de cierre llamada </p> seguidamente, tendrán que saber que los formularios siempre empiezan y terminan con las etiquetas de <form> y </form>.
Ahora, dentro de esas etiquetas indicaremos unas cosas, las cuales son:
- action: esto indica la url en la que enviaremos los datos de nuestro formulario. O mejor dicho la página que tiene las instrucciones que nos dicen el qué hacer con los datos obtenidos desde el formulario.
- method: en este caso, usare los valores de post, pero también podemos usar los valores de get.
Ahora, tomando los datos que acabamos de ver, un ejemplo de formulario vacío seria:
Insertar CODE, HTML o PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tutorial de formulario para Forobeta</title>
</head>
<body>
<p>
<form method="post" action="formularioforobeta.php">
</form>
</p>
</body>
</html>2- Campos de datos en un formulario.
Dentro del formulario podemos pedirle al visitante, usuario o persona muchas cosas, entre ellas pueden ser textos, nombres, contraseñas, frases y también archivos, ahora veremos como hacer eso.
Acá esta el código, que para todos estos son muy similares:
Insertar CODE, HTML o PHP:
<input type="tiposdedatos" name="descripciondelcampo" value="Escriba Acá" size="20" maxlengh="30" />Explicación del código:
- Empezamos abriendo la etiqueta <imput.
- Seguidamente, indicamos el tipo del dato que queremos que escriban; el cual, en vez de "tiposdedatos" nosotros debemos de poner el tipo de dato que queremos que escriban, pero eso lo veremos un poco después.
- Después, indicamos la descripción o nombre del dato que queremos que escriban.
- Después, indicamos el valor que queremos que aparezca en el cuadro del formulario. Lo podemos dejar en blanco, la única diferencia es que al no escribir nada, no aparecerá nada por defecto en el cuadro del formulario.
- Después, indicamos el tamaño del cuadro donde escribirán la información o mejor dicho, el ancho del tamaño.
- Y por ultimo, la longitud máxima que podemos escribir en el recuadro. Yo por defecto puse 30, es decir, máximo 30 letras.
Finalmente, cerramos la etiqueta de imput con />.
Ahora, les explicaré cada uno de los campos que podemos crear en base al código que les acabo de dar. (Abrir spoiler para cada explicación).
Campo de texto.
Bueno, el campo de texto significa que solo podemos escribir un texto normal, esto no requiere tanta lógica.
Acá el código:
Como ven, es la misma estructura del código anterior, lo único que cambia es el tipo de campo, el cual en este caso, nosotros le llamamos "text".
Acá el código:
Insertar CODE, HTML o PHP:
<input type="text" name="descripciondelcampo" value="Escriba Acá" size="20" maxlength="30" >Como ven, es la misma estructura del código anterior, lo único que cambia es el tipo de campo, el cual en este caso, nosotros le llamamos "text".
Campo de contraseña.
Bueno, el campo de contraseña significa que el texto solo se vera con los famosos puntos negros. Esto simplemente es para evitar que alguien más vea lo que escribe nuestro visitante.
Acá el código:
Como ven, también es la misma estructura del código anterior, lo único que cambia es el tipo de campo, el cual en este caso, nosotros le llamamos "password".
Acá el código:
Insertar CODE, HTML o PHP:
<input type="password" name="descripciondelcampo" value="Escriba Acá" size="20" maxlengh="30" />Como ven, también es la misma estructura del código anterior, lo único que cambia es el tipo de campo, el cual en este caso, nosotros le llamamos "password".
Campo de botón de opción.
Bueno, el campo de botón de opción significa que nosotros le daremos la opción al visitante de elegir distintas opciones ya establecidas por nosotros.
Acá el código:
Bueno, en este caso veremos que el código es un poco diferente. Explicare lo que cambia de los anteriores.
Principalmente, tenemos el tipo de campo que en este caso es "radio", seguidamente, veremos que tenemos una palabra llamada "checked" en la primera línea del código, esto indica que es donde el botón de opción este marcado por defecto, ustedes pueden colocarlo en cualquier línea. (Claro, en el mismo orden...) dentro del value, nosotros pondremos el orden o el valor que queremos que tenga esa opción. Seguidamente, tenemos el texto que hay antes de <br> es el texto que aparece en el navegador, podemos escribir lo que queramos que el visitante vea como opción, pero el valor que se recogerá del formulario una vez que se envíe será el que hay dentro de value, no este. Y por ultimo tenemos la etiqueta Html <br> que como sabemos sirve para bajar una línea. La pongo para que no aparezcan todas las opciones pegadas una tras otra.
Acá el código:
Insertar CODE, HTML o PHP:
<INPUT type="radio" name="botondeopcion" checked value="1">Novato<br />
<INPUT type="radio" name="botondeopcion" value="2">Semi-Avanzado<br />
<INPUT type="radio" name="botondeopcion" value="3">Avanzado<br />
<INPUT type="radio" name="botondeopcion" value="4">Webmaster Profesional <br>Bueno, en este caso veremos que el código es un poco diferente. Explicare lo que cambia de los anteriores.
Principalmente, tenemos el tipo de campo que en este caso es "radio", seguidamente, veremos que tenemos una palabra llamada "checked" en la primera línea del código, esto indica que es donde el botón de opción este marcado por defecto, ustedes pueden colocarlo en cualquier línea. (Claro, en el mismo orden...) dentro del value, nosotros pondremos el orden o el valor que queremos que tenga esa opción. Seguidamente, tenemos el texto que hay antes de <br> es el texto que aparece en el navegador, podemos escribir lo que queramos que el visitante vea como opción, pero el valor que se recogerá del formulario una vez que se envíe será el que hay dentro de value, no este. Y por ultimo tenemos la etiqueta Html <br> que como sabemos sirve para bajar una línea. La pongo para que no aparezcan todas las opciones pegadas una tras otra.
Campo de Casilla de Verificación.
Como podremos ver, esto será muy parecido al campo de botón de opción, pero en estos casos podremos hacer múltiples elecciones de los campos. Lo único que cambiaremos sera el tipo de campo que en este caso será "checkbox".
Bueno, como dije anteriormente, este código solo cambia en cuanto al tipo de campo llamado "checkbox".
Insertar CODE, HTML o PHP:
<input type="checkbox" name="casilladeverificacion" checked value="1" />Novato<br />
<input type="checkbox" name="casilladeverificacion" value="2" />Semi-Avanzado<br />
<input type="checkbox" name="casilladeverificacion" value="3" />Avanzado<br />
<input type="checkbox" name="casilladeverificacion" checked value="4" />Webmaster Profesional<br />Bueno, como dije anteriormente, este código solo cambia en cuanto al tipo de campo llamado "checkbox".
Campo de Lista de Datos.
Bueno, en este caso se le mostrará al visitante una lista desplegable de distintos datos, la cual nosotros le podemos decir que aparezca sin desplegar o ya desplegada.
Bueno, también destacare que en este caso algunas cosas cambiaran de significado. Una de ellas es "size" que en este caso indicará el número de casillas que queremos que tenga la lista, entonces si ponemos 1 en "size, la lista será desplegable y si ponemos más de 1 la lista se mostrará ya desplegada con el número de casillas u opciones que nosotros le dimos. También usaremos una nueva palabra llamada "multiple", esto indicará si se podrá o no seleccionar varias opciones, pero si es una lista desplegable no la usaremos para nada. También, si queremos hacer que un valor ya este seleccionado, nosotros usaremos "selected", no usaremos "checked" como en los otros códigos.
Acá el código de ejemplo:
Explico: Bueno, primero abrimos la etiqueta de <select, seguidamente le damos un nombre o descripción a la lista. Y claro, después indicamos si queremos que la lista sea totalmente desplegable o con cuantas opciones ya desplegadas con "size". Y por ultimo, cerramos la etiqueta con >.
Bueno, ahora abrimos lo que es la etiqueta de <option, y comenzamos a darle un valor en cual yo puse "opcion1, opcion2 y opcion3. Seguidamente cerramos la etiqueta de <option con > Y escribimos lo que queremos que el visitante vea al desplegar la lista. Y por ultimo cerramos la etiqueta de <option> con </option>. Finalmente cerramos la etiqueta de <select> con </select>.
Bueno, también destacare que en este caso algunas cosas cambiaran de significado. Una de ellas es "size" que en este caso indicará el número de casillas que queremos que tenga la lista, entonces si ponemos 1 en "size, la lista será desplegable y si ponemos más de 1 la lista se mostrará ya desplegada con el número de casillas u opciones que nosotros le dimos. También usaremos una nueva palabra llamada "multiple", esto indicará si se podrá o no seleccionar varias opciones, pero si es una lista desplegable no la usaremos para nada. También, si queremos hacer que un valor ya este seleccionado, nosotros usaremos "selected", no usaremos "checked" como en los otros códigos.
Acá el código de ejemplo:
Insertar CODE, HTML o PHP:
<select name="Descripciondelalista" size=1>
<option value="opcion1">La opcion 1</option>
<option value="opcion2">La opcion 2</option>
<option value="opcion3">La opcion 3</option>
</select>Explico: Bueno, primero abrimos la etiqueta de <select, seguidamente le damos un nombre o descripción a la lista. Y claro, después indicamos si queremos que la lista sea totalmente desplegable o con cuantas opciones ya desplegadas con "size". Y por ultimo, cerramos la etiqueta con >.
Bueno, ahora abrimos lo que es la etiqueta de <option, y comenzamos a darle un valor en cual yo puse "opcion1, opcion2 y opcion3. Seguidamente cerramos la etiqueta de <option con > Y escribimos lo que queremos que el visitante vea al desplegar la lista. Y por ultimo cerramos la etiqueta de <option> con </option>. Finalmente cerramos la etiqueta de <select> con </select>.
Campos ocultos.
Bueno, esto funciona cuando nosotros al tener el formulario, queremos que por ejemplo al visitante se le guarde algún dato al hacer el formulario y enviarlo. Quizá puede ser la dirección IP para así saber que el usuario con la misma IP ha estado rellenando el formulario muchas veces, etcétera.
Acá el código:
Explico: Primero, al escribir "hidden" dentro de type, estamos indicando que el valor que se da allí es oculto. Seguidamente de indicar el nombre o la descripción del campo. Y por ultimo indicar el valor que queremos que nos llegue, ya que en este caso el visitante no escribirá nada. Eso lo hacemos con la variable $variable, la cual puede llegar a ser el nombre de usuario, la IP, etcétera.
Acá el código:
Insertar CODE, HTML o PHP:
<input type="hidden" name="valorqueestaoculto" value="$variable">Explico: Primero, al escribir "hidden" dentro de type, estamos indicando que el valor que se da allí es oculto. Seguidamente de indicar el nombre o la descripción del campo. Y por ultimo indicar el valor que queremos que nos llegue, ya que en este caso el visitante no escribirá nada. Eso lo hacemos con la variable $variable, la cual puede llegar a ser el nombre de usuario, la IP, etcétera.
3- Botón de envío de formulario.
Bueno, tenemos tres tipos de botones que podemos escoger, las cuales se definen indicando: submit, image ó buttom. Estas las colocamos dentro de las comillas de type en la linea de cada uno de los imput.
Así:
Insertar CODE, HTML o PHP:
<input type="submit"
<input type="image"
<input type="button"Bueno, el botón de "submit" es un simple botón de texto el cual se coloca mediante este código:
Insertar CODE, HTML o PHP:
<input type="submit" value="Botón de envio" name="Envio de información" />Bueno, el botón submit se define con name en el que le colocaremos un nombre para identificarlo y value donde escribiremos la acción que se llevará a cabo al hacer clic sobre él.
El botón de "image" es parecido al botón anterior, pero en este caso en vez de texto nosotros le podríamos añadir un botón con mayor elegancia hecho por nosotros.
El código de ejemplo seria este:
Insertar CODE, HTML o PHP:
<input type="image" value="Botón de envio" name="Envio de información" SRC="/objetos/imagendeboton.gif" />Dentro de las comillas de SRC tendremos que indicar la dirección de donde está la imagen que queremos colocar.
Bueno y por ultimo está el boton de "Button" en el cual, en este caso no hay ninguna cosa predeterminada que se vaya a hacer cuando se pulsa sobre él. Se tendrá que indicar qué debe ocurrir cuando ese botón sea pulsado. Esto se indica con líneas de JavaScript por ejemplo.
4- Uso de datos escritos en el formulario.
Tras pulsar el botón de envío, los valores se quedan guardados en una variable de cadena, es decir un valor detrás del otro.
Para ver la información en la pantalla tras pulsar el botón, crearemos un "echo" y claro, seguido de este código php:
Insertar CODE, HTML o PHP:
<?php
echo $_POST[NAME] ;
?>Si escribimos GET en vez de POST en la primera línea del formulario, solo cambiaremos lo que es la segunda línea y quedaria así:
Insertar CODE, HTML o PHP:
<?php
echo $_GET[NAME] ;
?>Bueno, en vez de "NAME" colocaremos el nombre de un campo del formulario, esto dependiendo de como le pusieron ustedes en el seguimiento del tutorial.
En caso de ser "NAME", se mostraría así:
Entonces, si escribimos "Forobeta" dentro del campo de NAME, se mostrara así como lo puse arriba, es decir el valor.
Si queremos que antes de los valores escritos salga un mensaje, ya sea de instrucción o de lo que ustedes deseen, solo colocamos otro "echo" antes del valor de la variable de NAME, es decir así:
Insertar CODE, HTML o PHP:
<?php
echo "Tutorial de Creación de un formulario." ;
echo $_POST[NAME] ;
?>Esta página se llama formularioforobeta.php y es la que aparece en la primera línea del código php del formularios de ejemplo. Es decir, que la página que pongamos allí será la que reciba los datos del formulario.
5- Guardar datos del formulario en una base de datos.
Bueno, lo que haremos en este momento sera el indicar al servidor que guarde los valores de la variable POST en una base de datos ya creada.
Bueno, para eso crearemos una nueva página php con el nombre insertarabasededatos.php (Ustedes pueden ponerle el nombre que deseen).
Para poder usar los datos de una base de datos, es necesario conectarse con ella. Nosotros tenemos ya preparados los datos en la variable post que vimos, pero antes de insertar esos datos en la base de datos necesitamos conectar con ella.
Bueno, primero se tendrá que crear una base de datos, si ya la tenemos creada, tendremos que saber estos datos:
Obviamente, ustedes tienen sus propios datos.
Acá esta el código php que usaremos para conectarnos con la base de datos:
Insertar CODE, HTML o PHP:
<?php
$server="localhost";
$database = "nombre_basededatos";
$db_user = "usuario_forobeta";
$db_pass = "noteladigo";
?>Explico: En$server, colocaremos el servidor de nuestra base de datos, en mi caso "localhost".
$database, significa el nombre de la base de datos, en mi caso es "nombre_basededatos".
$db_user, esto significa el nombre de usuario de la base de datos, en mi caso es "usuario_forobeta".
Por ultimo, tenemos $db_pass, esto obviamente significa la contraseña de la base de datos, en mi caso es "noteladigo".
Para no tener que estar escribiendo ese código cada vez que queramos conectar algo a la base de datos, guardaremos todo ese código en un archivo llamado config.php, entonces, llamaremos a ese archivo cada vez que queramos conectarnos a la base de datos.
Abriremos un block de notas y pegaremos ese código, una vez pegado, lo guardamos con la extensión .php
Bueno, ahora crearemos otra página php con el nombre de insertarentabla.php (Recuerden, ustedes pueden ponerle el que quieran).
Bueno, en esa página php comenzaremos escribiendo las etiquetas de apertura y cierre de los archivos php que son <?php y ?>.
Dentro de esas etiquetas, nosotros deberíamos escribir el código Php que habíamos guardado en el archivo config.php pero como lo tenemos en aquél archivo, basta con indicar que añada todo su contenido en esta otra página. Eso lo aremos escribiendo este include:
Insertar CODE, HTML o PHP:
<?php include("config.php") ; ?>Entonces, con esto el servidor leerá lo que hay en el archivo config.php cuando se encuentre con este código.
Ahora, indicaremos que se conecte con estas otras líneas:
Insertar CODE, HTML o PHP:
mysql_connect($server, $db_user, $db_pass) or die ("error1".mysql_error());
mysql_select_db($database) or die ("error2".mysql_error());En conclusión, todo el código de insertarentabla.php quedaría así:
Insertar CODE, HTML o PHP:
<?php
include("config.php") ;
mysql_connect($server, $db_user, $db_pass) or die ("error1".mysql_error());
mysql_select_db($database) or die ("error2".mysql_error());
?>Solo queda indicar al servidor que inserte los datos guardados en post en alguna tabla de nuestra base de datos mediante el siguiente código:
Insertar CODE, HTML o PHP:
mysql_query (" INSERT INTO basededatos.tabladondeseguardara (nombre de los campos creadors) values (datos correspondientes de los valores) ");Por si no entienden, yo les dejo un ejemplo con los datos creados por mí anteriormente.
Insertar CODE, HTML o PHP:
mysql_query ("INSERT INTO `nombre_basededatos`.`TABLA` (`NAME`, `EMAIL`, `WEB`, `TEXTO`) VALUES ('$_POST[NAME]', '$_POST[EMAIL]', '$_POST[WEB]', '$_POST[TEXTO]') ");Recuerden que anteriormente les hable sobre el $_POST[NAME], dependiendo de los campos agregados por ustedes, esos pondrán acá.
Y bueno, ustedes pueden hacer miles de cosas con todo esto. Pero un formulario sencillo es como se crea así, imagínense la longitud del post para un formulario sencillo, pero bueno, hasta acá termina este tutorial, recuerden que cualquier duda, una pregunta, etcétera. Pueden responder acá abajo. También decirles que de tanto escribir, pueda que tenga algún error, de no ser así pues, que bien; pero en caso de haber, por favor darlo a conocer para así resolverlo.
Saludos Forobeta.
