Cómo hacer un formulario en HTML

Un formulario creado en HTML es la forma más sencillo de crear un formulario para lo que tú quieras. Realmente no es muy complicado crear un formulario en éste lenguaje de marcas, ya que con tener unos conocimientos básicos podremos crearlo.

Entre las utilidades más comunes de un formulario tenemos el almacenamiento de datos de manera sencilla e interactiva. Un buen ejemplo de formulario HTML es una encuesta, la cual tiene un montón de datos que se almacenan en un archivo PHP el cual es mostrado al creador de la misma.

HTML te permite añadir varios tipos de datos a un formulario. Puedes añadir textos cortos, textos largos, escoger una opción de entre muchas o escoger marcas varias opciones… Realmente es algo realmente útil y que no es nada complicado de realizar si tienes claras algunas cosillas.

La utilidad de crear tus propios formularios es bastante grande, ya que si tienes una página web, vas a poder crear tus propios formularios de contacto, encuestas y en definitiva un montón de opciones que los gestores de contenidos no permiten normalmente.

Desde doncomos.com, vamos a enseñarte paso a paso cómo hacer un formulario en HTML para que puedas construir un formulario totalmente personalizado.

¿Que necesitas para hacer un formulario en HTML?

  • Un editor de texto, como por ejemplo el bloc de notas.
  • Si quieres abrir archivos PHP, necesitarás un servidor como wamp server.

Instrucciones para hacer un formulario en HTML

  1. Hacer la base de HTML:
    Primero vamos a crear el archivo HTML, el cual debe estar creado correctamente para que nuestro navegador de Internet sea capaz de interpretarlo correctamente y de cargarlo. Para ello vamos a abrir un documento de texto, y vamos a copiar ésta estructura tal cual está
    <html>
    <head><title></title></head>
    <body>
    <form>
    </form>
    </body>
    </html>
    Seguro que estás algo liado, por tanto te voy a explicar lo que es cada cosa. Primero de todo cuando una etiqueta está así <>, es que empezamos algo y cuando está así </> es que acabamos algo.

    1. <html></html> delimitación de archivo html, todo lo que vaya entre estos archivos es html.
    2. <head></head>: Delimitación de encabezado del archivo, aquí pondremos cosas como el título o el estilo css si lo hubiera.
    3. <title></title>: Parte del encabezado donde podemos el título del documento.
    4. <body></body>: Éste es el cuerpo del archivo y donde pondremos básicamente todo lo que se ve en el documento como los textos y el propio formulario.
    5. <form></form>: Aquí pondremos el formulario, el cual explicaré después.
      Cómo hacer un formulario en HTML
  2. Guardar con extensión .HTML:
    Ahora vamos a ir al bloc de notas y vamos a pulsar en archivo/guardar como… . Vamos a nombrar al archivo formulario.html y vamos a darle a tipo todos los archivos, ya que si le damos a archivo .txt, se nos creará un archivo de texto que no va a funcionar. Ahora se nos creará un documento con el icono del navegador predeterminado y cuando le abras saldrá una página de internet completamente en blanco, la cual vamos a modificar para crear el formulario.
    Cómo hacer un formulario en HTML
  3. Crear el formulario:
    Vamos a crear un formulario muy sencillo, el cual solo va a tener un cambio donde pongas tu nombre y se envíe en un archivo php que también vamos a crear. Para ello vamos a añadir éstos cambios.

    1. En el title, vamos a escribir el título del archivo. Simplemente escribimos el título entre las etiquetas de title, tal que así.. <title>Doncomos.com formulario</title>
    2. En el body, vamos a crear un título h3 que nos muestre <h3>Formulario doncomos</h3>
    3. Importante, ahora en la etiqueta <form> vamos a escribir a continuación de form sin salir de los <> éstas palabras. <form action=»enviar.php» method=»post»> Con ésto le estamos diciendo que envíe los datos del formulario a un archivo php que se llama enviar.php, el cual crearemos después.
    4. Creación de los campos: Vamos solo a crear un campo name para poner nuestro nombre y un campo submit para enviarlo al archivo php.
      <p>cómo te llamas</p>
      <input type=»text» name=»nombre» value=»» /><br/><input type=»submit» value=»Enviar» />
      La primera etiqueta <p> está creada para que encima del primer campo, salgan las palabras cómo te llamás, después tendremos un campo text, un campo donde escribiremos nuestro nombre en un cuadro de texto. Luego pondremos <br/> para que haya un espacio en blanco y ponemos un cuadro submit que servirá para enviar lo que hemos escrito al archivo php.
      Cómo hacer un formulario en HTML
  4. Archivo PHP:
    Ahora para ir más allá, vamos a crear el archivo PHP, el cual te va a permitir que lo que mandas se quede almacenado en el mismo. Abre el bloc de notas y copia y pega ésto.
    <?php
    $nombre = $_POST[‘nombre’];echo $nombre;
    ?>
    Los <? delimitan el archivo php, luego crearemos la variable $nombre, la cual pondremos que es igual a la variable $_POSTnombre, o lo que es lo mismo, al campo nombre del formulario que hemos enviado. Abajo indicaremos con el comando echo que nos muestre el nombre que hemos escrito. Ahora daremos a archivo guardar como y lo guardaremos como enviar.php de la misma forma(es importante que se llame exactamente así, ya que sino no funcionará la conexión).Recuerda que para que funcione hay que instalar wamp server.Cómo hacer un formulario en HTML

Consejos para hacer un formulario en HTML

  • Formularios más complejos: Obviamente se pueden añadir muchos más campos, sin embargo, he preferido hacerlo sencillo para previamente aprender a hacerlo bien.
¿Te ha gustado?
188 usuarios han opinado y a un 53,72% le ha gustado.
4 Comentarios
  1. Juan miranda dice

    Estimados su ayuda por favor estoy intentando incluir a mi pagina web un formulario para dejar comentarios de la misma manera que estoy haciendo por este medio…
    gracias

  2. Florencia Cazzola dice

    y como se configura a que correo llega????????????????

    1. alberto dice

      estaba muy bien al inicio la explicación pero… y luego???????????

  3. Armando Sanchez dice

    Oye amigo esta muy buena tu explicasion solo k hay cosas en las k ne rebuel vez
    Pero el punto es k lo k yo kiero saber si esk hay una forma k los comentaeios te lleguen a tu correo
    O algo asi por el estilo

Deja un comentario

Tu dirección de email no será publicada.