Después de darle unas cuantas vueltas he decidido dividir en tres partes el tema de los formularios ya que es un poco extenso y puede resultar pesado. Los formularios sirven para enviar información al servidor para que posteriormente sea tratada dentro de una base de datos, en HTML no se puede tratar dicha información, solo enviarla al servidor, para ello luego existen otros lenguajes de programación como PHP o ASP. Existen muchas opciones para hacer los formularios en HTML y os voy a mostrar todas en tres partes para que no resulte demasiado pesado. Os voy a dejar una pagina web con una etiqueta de titulo y un formulario muy sencillo pidiéndonos nuestro nombre para posteriormente enviarlo al servidor, aunque yo solo voy a poner el código HTML del formulario, dejaremos el envío de información para el curso de PHP:
<html> <head></head> <body> <form> Ingrese su nombre: <input type="text" name="nombre" size="20"><br> <input type="submit" value="enviar"> </form> </body> </html>
123456789101112 <html> <head></head> <body> <form> Ingrese su nombre:<input type="text"name="nombre"size="20"><br> <input type="submit"value="enviar"> </form></body> </html>
Con la etiqueta “<form>” iniciamos el formulario. Luego ponemos el texto que queremos como mensaje antes del recuadro en el cual introduciremos la información correspondiente. El parámetro “size” es el tamaño en caracteres que podrá tener como máximo la información de introduzcamos. Luego hay un salto de linea. Luego, en la siguiente linea nos encontramos con un botón en el cual pone el texto “enviar”, para que una vez hayamos introducido la información la enviemos al servidor. Si ejecutamos el código en el navegador veremos lo siguiente:
En el código de la pagina web que he puesto antes si substituimos “<form>” por lo siguiente:
<form action="/guardardatos.php" method="post">
1 <form action="/guardardatos.php"method="post">
Entonces estriamos enviando la información del formulario, en este caso el nombre que hayamos introducido, al servidor con el método de envió “post” y al archivo “guardardatos.php”, es decir el archivo recogería la información y haría con ella lo que tuviese indicado. Vamos con otra pagina, os dejo el código y después os lo explico:
<html> <head></head> <body> <form> Ingrese su nombre:<input type="text" name="nombre" size="20"><br> Ingrese su clave:<input type="password" name="clave" size="12"><br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </form> </body> </html>
1234567891011121314 <html> <head></head> <body> <form> Ingrese su nombre:<input type="text"name="nombre"size="20"><br> Ingrese su clave:<input type="password"name="clave"size="12"><br> <input type="submit"value="enviar"> <input type="reset"value="borrar"> </form></body> </html>
Con este código mostraremos en el navegador web una pagina que nos pida el nombre y contraseña. Al poner en el “type” igual a “password” cuando tecleemos algo se mostrara un circulo por cada carácter introducido, al estilo de las contraseñas. Debajo hay dos botones, el primer “input” es un botón que tendrá como texto “enviar” y que servirá para enviar la información una vez que la hayamos tecleado, y debajo de este habrá otro botón que sirve, si hacemos click en el, para borrar lo que hayamos escrito en el caso de que nos confundamos al teclearlo. Si lo ejecutamos en el navegador web veremos lo siguiente:
Puede que también queramos poner un campo para que los usuarios dejen un comentario o información un poco mas amplia sobre algo. Para esto tenemos “textarea” como os muestro en el siguiente código:
<html> <head></head> <body> <form> Ingrese su nombre:<input type="text" name="nombre" size="20"><br> Ingrese su clave:<input type="password" name="clave" size="12"><br> Comentarios:<br> <textarea name="comentarios" rows="10" cols="100"></textarea> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </form> </body> </html>
12345678910111213141516 <html> <head></head> <body> <form> Ingrese su nombre:<input type="text"name="nombre"size="20"><br> Ingrese su clave:<input type="password"name="clave"size="12"><br> Comentarios:<br> <textarea name="comentarios"rows="10"cols="100"></textarea> <input type="submit"value="enviar"> <input type="reset"value="borrar"> </form></body> </html>
Como podéis ver si ejecutáis este código en un navegador os aparecerá un cuadro en el cual podremos poner información. En el código, donde pone “textarea” le ponemos un nombre con “name” y luego pone primero el numero de filas con “rows” y el numero de columnas con “cols”, esto es el tamaña mínimo, en el caso de las columnas son 100 y esto quiere decir que tendrá como tamaño mínimo el que ocuparían 100 letras o números y las filas son saltos de linea, por decirlo de alguna manera. Este recuadro de texto en el navegador de puede modificar de tamaño, en los valores anteriores le estamos indicando el tamaño mínimo que tendrá. Si ejecutamos este código en el navegador os debería salir algo como lo siguiente:
Vamos con otra opción para los formularios, la ultima de este articulo, y es el tipo “checkbox”, esto nos permitirá poner una serie de opciones para marcar o desmarcar. Os muestro el código de una pagina de ejemplo y luego la explico:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form> Ingrese su nombre:<input type="text" name="nombre" size="30"><br> Seleccione los lenguajes que conoce:<br> <input type="checkbox" name="java">Java<br> <input type="checkbox" name="cmasmas">C++<br> <input type="checkbox" name="c">C<br> <input type="checkbox" name="csharp">C#<br> <input type="submit" value="Enviar"> </form> </body> </html>
12345678910111213141516171819 <html> <head> <title>Prueba de formulario</title></head> <body> <form> Ingrese su nombre:<input type="text"name="nombre"size="30"><br> Seleccione los lenguajes que conoce:<br> <input type="checkbox"name="java">Java<br> <input type="checkbox"name="cmasmas">C++<br> <input type="checkbox"name="c">C<br> <input type="checkbox"name="csharp">C#<br> <input type="submit"value="Enviar"> </form></body> </html>
En esta pagina nos aparecerá en el navegador un texto pidiéndonos nuestro nombre y nos mostrara una lista con lenguajes de programación para que seleccionemos los que conocemos. Esto se consigue poniendo “checkbox” al “type” como veis en el código HTML. Podemos marcar cuantas opciones queramos. Si ejecutáis en el navegador debería salir lo siguiente:
Creo que con esto es suficiente para esta parte del Tema 12 del curso HTML, ya que habrá otras dos partes relativas a los formularios. Si tenéis alguna duda dejad un comentarios o podéis mandarme un email a mi dirección de contacto.
Si te ha gustado el contenido o te ha servido para algo compártelo en las redes sociales y así puede que le sirva también a otra persona, muchas gracias.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure