Como crear un formulario de o 6a5f

En este tutorial mostraremos la manera de crear un formulario de o, es decir un formulario HTML, incluido el diseño de un formulario simple, implementarlo utilizando los elementos HTML correctos, agregar un estilo muy simple a través de CSS y cómo se envían los datos a un servidor y a nuestro email.

¿Qué son los formularios? 6e6j1o

Los formularios son unos de los principales puntos de interacción entre un y un sitio web o aplicación. Permiten a los s enviar datos al sitio web. La mayoría de las veces los datos se envían al servidor web, pero la página web también puede interceptarlos para usarlos por su cuenta.

Un formulario está compuesto por uno o más widgets. Esos widgets pueden ser campos de texto (línea simple o multilínea), cuadros de selección, botones, casillas de verificación o botones de opción. La mayoría de las veces esos widgets están emparejados con una etiqueta que describe su propósito: las etiquetas implementadas adecuadamente pueden instruir claramente a los s videntes y ciegos sobre qué ingresar en una entrada de formulario. La principal diferencia entre un formulario HTML y un documento HTML normal es que la mayoría de las veces, los datos recopilados por el formulario se envían a un servidor web. En ese caso, debe configurar un servidor web para recibir y procesar los datos.

Diseñando tu formulario 6p6m3g

No necesitas nada más que lo que se requiere para trabajar con HTML: un editor de texto y un web browser. Antes de comenzar a codificar, siempre es mejor dar un paso atrás y tomarse el tiempo para pensar en su formulario. Diseñar una maqueta rápida lo ayudará a definir el conjunto correcto de datos que desea preguntar a su . Desde el punto de vista de la experiencia del , es importante recordar que cuanto más grande sea su forma, más se arriesga a perder s. Manténgalo simple y manténgase enfocado: solicite solo los datos que absolutamente necesita.

En este tutoriales, crearemos un formulario de o simple. Hagamos un bosquejo aproximado.

MDN Web Docs

Nuestro formulario contendrá tres campos de texto y un botón. Le pedimos al su nombre, su correo electrónico y el mensaje que desea enviar. Al presionar el botón se enviarán sus datos a un servidor web.

Ahora estamos listos para ir a HTML y codificar nuestro formulario. Para construir nuestro formulario de o, utilizaremos los siguientes elementos HTML: <form>, <label>, <input>, <textarea>, y <button>.

Antes de continuar, haga una copia local de nuestra plantilla HTML simple: ingresará su formulario HTML en el archivo descargado.

El elemento <form> 3w5s5

Todos los formularios HTML comienzan con el elemento <form> de la siguiente forma:

<form action="enviar.php" method="post">

</form>

Este elemento define formalmente un formulario. Es un contenedor como lo son <div> o <p>, pero también soporta algunos atributos específicos para configurar la forma en que el formulario se comporta. Todos sus atributos son opcionales pero se considera una buena práctica que siempre al menos el los atributos action y method se encuentren presentes.

El atributo action define la locación (una URL) desde donde la información recolectada por el formulario debería enviarse.
El atributo method define con que método HTTP se enviará la información (puede ser "get" o "post").

Agrega widgets con los elementos <label>, <input>, y <textarea> k3k5w

Nuestro formulario de o es muy simple y contiene tres campos de texto, cada uno con un label. El campo de texto para el nombre será de linea simple; el del e-mail también será de linea simple que aceptará solamente una dirección de correo electrónico; el campo de texto para el mensaje será multilínea.

En términos de código HTML vamos a tener algo como lo siguiente:

<form action="/enviar.php" method="post">
    <div>
        <label for="name">Nombre:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">Email:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Mensaje:</label>
        <textarea id="msg"></textarea>
    </div>
</form>

Los elementos <div> están allí para estructurar nuestro código de forma conveniente y poder darles estilos de una forma más sencilla (ver abajo). Puedes notar el uso de atributo for en todos los elementos <label>; es la forma correcta de unir un label a un widget en un formulario. Este atributo referencia el id del widget correspondiente. Hay algunos beneficios de hacer esto. El más obvio es permitir al hacer click en el label para activar el widget correspondiente. Si quieres aprender otros beneficios, tienes todo detallado en el artículo: Como estructurar un formulario HTML.

En el elemento <input>, el atributo más importante es type. Este atributo es sumamente importante porque define la forma en que el elemento <input> se comporta. Puede cambiar radicalmente el elemento, así que presta atención a esto. Si quieres saber más sobre esto, lee el artículo Widgets nativos de formularios. En nuestro ejemplo usamos únicamente el valor text - el valor por defecto de este atributo. Representa un campo de texto básico de una linea que acepta cualquier tipo de texto sin ningún control o validación.

Por último pero no menos importante, veamos la sintaxis del <input /> vs. <textarea></textarea>. Esta es una de las extrañezas del HTML. La etiqueta <input> se cierra a si misma, lo que significa que si quieres cerrar formalmente el elemento, tienes que agregar un " / " al final del mismo y no una etiqueta de cierre. Por el contrario, <textarea> no es un elemento que se cierre así mismo, por lo que tienes que cerrarlo con su etiqueta correspondiente. Esto tiene impacto sobre una característica específica de los formularios HTML: la forma en que defines el valor por defecto. Para definir el valor por defecto de un elemento <input> debes usar el atributo value de la siguiente forma:

<input type="text" value="por defecto este elemento se llena con este texto" />

Por el contrario, si quieres definir el valor por defecto de un <textarea>, solamente tienes que poner el valor por defecto entre el comienzo y el final de las etiquetas del elemento <textarea>, así:

<textarea>por defecto este elemento se llena con este texto</textarea>

Y un <button> para finalizar 4753h

Nuestro formulario está casi listo; tenemos que agregar un botón para permitir al enviar la información que llenó en el formulario. Esto se hace simplemente usando el elemento <button>:

<form action="/enviar.php" method="post">
    <div>
        <label for="name">Nombre:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">Email:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Mensaje:</label>
        <textarea id="msg"></textarea>
    </div>

    <div class="button">
        <button type="submit">Envía tu mensaje</button>
    </div>

</form>

Un botón puede ser de tres tipos: submit, reset, o button.

Un click en un botón submit envía la información del formulario a una página web definida por defecto en el atributo action del elemento <form>.
Un click en un botón reset reinicia inmediatamente todos los widgets del formulario a sus valores por defecto. Desde un punto de vista de UX(Experiencia de ), esto se considera una mala práctica.
Un click en un botón button... ¡no hace nada! Puede sonar tonto, pero es muy útil para construir botones customizados con jаvascript.

Puedes también usar el elemento <input> con el type correspondiente para producir un botón. La diferencia principal con el elemento <button> es que el elemento <input> únicamente permite texto plano como su label mientras que el elemento <button> permite contenido HTML en su label.

Hagámoslo un poco más bello con CSS 203p3q

{PAGEBREAK}
Ahora que tenemos nuestro formulario HTML, si lo miras en tu navegador favorito, verás que se ve medio feo.

Vamos a hacer un poco más lindo con la siguiente hoja de CSS. Vamos a empezar con el formulario en si mismo; vamos a centrarlo y hacerlo visible con un borde:

form {
    /* Sólo para centrar el formulario a la página */
    margin: 0 auto;
    width: 400px;
    /* Para ver el borde del formulario */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

Luego, agreguemos algo de espacio entre cada uno de los widgets del formulario:

form div + div {
    margin-top: 1em;
}

Ahora nos enfoquemos en los labels. Para hacer nuestro formulario más legible, se considera una buena práctica tener todos los labels en el mismo tamaño y alineados del mismo lado. En este caso, vamos a alinearlos a la derecha, pero en algunos casos alinearlos a la izquierda está bien también.

label {
    /* Para asegurarse que todos los labels tienen el mismo tamaño y están alineados correctamente */
    display: inline-block;
    width: 90px;
    text-align: right;
}

Una de las cosas más difíciles de hacer con formularios HTML es estilizar los widgets HTML. Los campos de texto son fáciles de estilizar, pero otros widgets no. Si deseas saber más sobre estilizar widgets de formularios HTML.

Aquí vamos a usar un par de trucos comunes: armonizar fuentes, tamaños y bordes:

input, textarea {
    /* Para asegurarse de que todos los campos de texto tienen las mismas propiedades de fuente
       Por defecto, las areas de texto tienen una fuente con monospace */
    font: 1em sans-serif;

    /* Para darle el mismo tamaño a todos los campos de texto */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Para armonizar el look&feel del borde en los campos de texto */
    border: 1px solid #999;
}

Los formularios HTML soportan muchas pseudo-clases para describir los estados de cada elemento. Como ejemplo, vamos a agregar un poco de destaque cuando un widget esté activo. Es una forma conveniente de ayudar al a mantener el seguimiento de donde está en el formulario.

input:focus, textarea:focus {
    /* Para dar un pequeño destaque en elementos activos*/
    border-color: #000;
}

Campos de texto con múltiples líneas necesitan algunos estilos personalizados para sí mismos. Por defecto, un elemento <textarea> es inline block alineado al fondo en su base. La mayoría de las veces, esto no es lo que queremos. En este caso, para alinearlo de forma amigable el label y el campo, tenemos que cambiar la propiedad vertical-align a top del <textarea>.

Nota: También el uso de la propiedad resize, la cual es una forma conveniente para dejar a los s cambiar el tamaño del <textarea>.

textarea {
    /* Para alinear campos de texto multilínea con sus labels */
    vertical-align: top;

    /* Para dar suficiente espacio para escribir texto */
    height: 5em;

    /* Para permitir a los s cambiar el tamaño de cualquier textarea verticalmente
        No funciona en todos los navegadores */
    resize: vertical;
}

Muchas veces, los botones necesitan también estilos especiales. Para ese fin, los pusimos dentro de un <div> con la clase button. Aquí, queremos que el botón esté alineado con los otros widgets. Para lograr eso, tenemos que suponer un elemento <label>. Esto se logra jugando con el padding y el margin.

.button {
    /* Para posicionar los botones a la misma posición que los campos de texto */
    padding-left: 90px; /* mismo tamaño a todos los elementos label */
}
button {
    /* Este margen extra representa aproximadamente el mismo espacio que el espacio
       entre los labels y sus campos de texto */
    margin-left: .5em;
}
button[type=submit] {
  border: 1px dotted #999;
  border-radius: 0;

  -webkit-appearance: none;
}

Ahora nuestro formulario se ve mucho más bello y presentable.

Incluso si quieres que el botón cambie de color cuando el se ubique en Envía tu mensaje:

button:after {
  content: " >>>";
}

button:hover,
button:focus {
  outline   : none;
  background: #000;
  color   : #FFF;
}

Enviando información a tu servidor 382e4

La última parte, y tal vez la más engañosa, es manejar la información del lado del servidor. Como dijimos, la mayor parte del tiempo, un formulario HTML es una forma conveniente de pedir al la información para enviarla a un servidor web.

En pocas palabras como lo que nos interesa que dicha información nos llegue a nuestro email.

El elemento <form> va a definir donde y como enviar la información gracias a los atributos action y method.

Pero esto no es suficiente. También necesitamos dar un nombre a nuestra información. Esos nombres son importantes en ambos lados; del lado del navegador, le dice cómo nombrar cada parte de la información, y del lado del servidor, le permite manejar cada parte de la información por nombre.

Entonces para nombrar tu información necesitas usar el atributo name en cada widget del formulario que va a recolectar una parte específica de esa información:

    <form action="/enviar.php" method="post">
    <div>
        <label for="name">Nombre:</label>
        <input type="text" id="name" name="name"/>
    </div>
    <div>
        <label for="mail">Email:</label>
        <input type="email" id="mail"name="email" />
    </div>
    <div>
        <label for="msg">Mensaje:</label>
        <textarea id="msg" name="message"></textarea>
    </div>

    <div class="button">
        <button type="submit">Envía tu mensaje</button>
    </div>

</form>

En nuestro ejemplo, el formulario enviará 3 partes de información, llamadas "_name", "_email" y "_message". La información se enviará a la URL "/enviar.php" con el método POST.

En el lado Servidor: la recuperación de los datos 12a1h

Sea cual sea el método HTTP que elija, el servidor recibe una cadena que será analizada con el fin de obtener los datos como una lista de pares clave / valor. La forma de acceder a esta lista depende de la plataforma de desarrollo que use y de las estructuras específicas que pueda estar usando con él. La tecnología se utiliza también determina cómo se manejan claves duplicadas; A menudo,se da prioridad al valor recibido más recientemente para una clave dada. Si quieres saber más sobre el PHP ofrece algunos objetos globales para acceder a los datos. Suponiendo que usted ha utilizado el métodoPOST, el siguiente ejemplo sólo toma los datos y lo muestra al . Por supuesto, lo que se hace con los datos depende de usted. Es posible visualizarlos, almacenarlos en una base de datos, enviarlos por correo electrónico, o procesarlos de alguna otra manera.

<?php
$remitente = $_POST['email'];
$destinatario = '@tutorialesenlinea.descargarjuegos.org'; // en esta línea va el mail del destinatario.
$asunto = 'Ejemplo del tutoriales en linea de formulario de o'; // acá se puede modificar el asunto del mail
if (!$_POST){
?>

<?php
}else{
     
    $cuerpo = "Nombre: " . $_POST["name"] . "\r\n"; 
    $cuerpo .= "Email: " . $_POST["email"] . "\r\n";
    $cuerpo .= "Mensaje: " . $_POST["message"] . "\r\n";
    //las líneas de arriba definen el contenido del mail. Las palabras que están dentro de $_POST[""] deben coincidir con el "name" de cada campo. 
    // Si se agrega un campo al formulario, hay que agregarlo acá.

    $headers  = "MIME-Version: 1.0\n";
    $headers .= "Content-type: text/plain; charset=utf-8\n";
    $headers .= "X-Priority: 3\n";
    $headers .= "X-MSMail-Priority: Normal\n";
    $headers .= "X-Mailer: php\n";
    $headers .= "From: \"".$_POST['nombre']." ".$_POST['apellido']."\" <".$remitente.">\n";

    mail($destinatario, $asunto, $cuerpo, $headers);
    
    include 'confirma.html'; //se debe crear un html que confirma el envío
}
">
           
           
           Descargar formulario de muestra de este Tutoriales en linea

Como crear un formulario de o 5s3b1j