Original article: HTML Form – Input Type and Submit Button Example
Los formularios son una de las partes más importantes de la web. Sin ellos, no habría una manera fácil de recopilar datos, buscar recursos o registrarse para recibir información valiosa.
Puede incrustar formularios en sitios web con el elemento HTML form. Dentro del elemento de formulario, se anidan varias entradas. Estas entradas también se conocen como controles de formulario.
En este tutorial, exploraremos el elemento HTML form, los diversos tipos de entrada que toma y cómo crear un botón de envío con el que se envían los datos.
Al final, sabrá cómo funcionan los formularios y podrá crearlos con confianza.
Sintaxis básica del formulario HTML
<form action="mipaginaweb.com" method="POST">
<!--La entrada de cualquier tipo y áreas de texto entra aquí-->
</form>
Tipos de entrada de formularios HTML
Usas la etiqueta <input> para crear varios controles en HTML. Es un elemento en línea y toma atributos como type, name, minlength, maxlength, placeholder, y así. Cada uno de estos tiene valores específicos que toman.
El atributo placeholder es importante, ya que ayuda al usuario a comprender el propósito del input antes de escribir algo.
Hay 20 tipos inputs diferentes, y los veremos uno por uno.
Type text
Este tipo de input toma un valor de "texto", por lo que crea una sola línea de entrada de texto.
<input type="text" placeholder="Introduce nombre" />
Un input con el type="text" se parece a la siguiente captura de pantalla:
Type Password
Como su nombre lo indica, una entrada con un tipo de contraseña crea una contraseña. Es automáticamente invisible para el usuario, a menos que sea manipulado por JavaScript.
<input type="password" placeholder="Enter your password" />
Type Email
Cualquier entrada con el tipo de correo electrónico define un campo para ingresar una dirección de correo electrónico.
<input type="email" placeholder="Enter your email" />
Type Number
Este tipo de entrada permite al usuario insertar solo números.
<input type="number" placeholder="Enter a number" />
Type Radio
A veces, los usuarios tendrán que elegir una de las numerosas opciones. Un campo de entrada con sus atributos de tipo establecidos en "radio" le permite hacer esto.
<input type="radio" />
Type Checkbox
Por lo tanto, con un tipo de entrada de radio, los usuarios podrán elegir una de numerosas opciones. ¿Qué pasa si quieres que elijan tantas opciones como sea posible? Eso es lo que una entrada con un atributo de tipo establecido en checkbox hace.
<input type="checkbox" />
Type Submit
Utilice este tipo para agregar un botón de envío a los formularios. Cuando un usuario hace clic en él, envía automáticamente el formulario. Toma un atributo de valor, que define el texto que aparece dentro del botón.
<input type="submit" value="Enter to Win" />
Type Button
Una entrada con un tipo establecido en button crea un botón, que puede ser manipulado por el tipo de detector de eventos onClick de JavaScript. Crea un botón como un tipo de entrada de envío, pero con la excepción de que el valor está vacío de forma predeterminada, por lo que debe especificarse.
<input type="button" value="Submit" />
Type File
Esto define un campo para el envío de archivos. Cuando un usuario hace clic en él, se le solicita que inserte el tipo de archivo deseado, que puede ser una imagen, un PDF, un archivo de documento, etc.
<input type="file" />
El resultado de un input con el type="file" se ve así:
Type Color
Este es un tipo de entrada elegante introducido por HTML5. Con él, el usuario puede enviar su color favorito, por ejemplo. El negro (#000000) es el valor predeterminado, pero se puede anular configurando el valor en el color deseado.
Muchos desarrolladores lo han utilizado como truco para llegar a seleccionar diferentes tonos de color disponibles en formatos RGB, HSL y alfanuméricos.
<input type="color" />
Este es el resultado de un tipo de entrada de color:
Type Search
La entrada con el tipo de búsqueda define un campo de texto como un tipo de entrada de texto. Pero esta vez tiene el único propósito de buscar información. Se diferencia de escribir texto en que aparece un botón de cancelar una vez que el usuario comienza a escribir.
<input type="search" />
Type URL
Cuando el atributo de tipo de una etiqueta de entrada se establece en URL, muestra un campo donde los usuarios pueden ingresar una URL.
<input type="url" />
Type Tel
Un tipo de entrada de tel le permite recopilar números de teléfono de los usuarios.
<input type="tel" />
Type Date
Es posible que se haya registrado en un sitio web donde solicitó la fecha de un evento determinado. La web probablemente usó una entrada con el valor de tipo establecido "date" para lograr esto.
<input type="date" />
Así es como se ve una entrada con tipo de fecha:
Type Datetime-local
Esto funciona como el tipo de entrada fecha, pero también le permite al usuario elegir una fecha con una hora en particular.
<input type="datetime-local" />
Type Week
El tipo de entrada de semana permite al usuario seleccionar una semana específica.
<input type="week" />
Type Month
La entrada con el tipo de mes completa los meses para que el usuario elija cuando se hace clic.
<input type="month" />
Textarea
Hay ocasiones en las que un usuario necesitará completar varias líneas de texto que no serían adecuadas en un tipo de entrada de texto(ya que especifica un campo de texto de una línea).
textarea permite al usuario hacer esto porque define múltiples líneas de entrada de texto. Toma sus propios atributos, tales como cols – para el número de columnas, y rows para el número de filas.
<textarea cols="50" rows="20"></textarea>
Multiple Select Box
Esto es como un botón de radio y una casilla de verificación en un solo paquete. Está incrustado en la página con dos elementos: un elemento select y option, que siempre está anidado dentro de select.
De forma predeterminada, el usuario solo puede elegir una de las opciones. Pero con múltiples atributos, puede permitir que el usuario seleccione más de una de las opciones.
<select>
<option value="HTML">Select a Language</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="React">React</option>
</select>
Cómo etiquetar entradas HTML
Es importante asignar etiquetas a los controles de formulario. Cuando están correctamente conectados al campo de entrada a través de su atributo for y el atributo id, es más fácil de usar para el usuario, ya que simplemente puede hacer clic en la etiqueta para acceder a la entrada.
<label for="name">Name</label>
<input type="text" id="name" /> <br />
<label for="check">Agree with terms</label>
<input type="checkbox" id="check" />
Cómo funcionan los formularios HTML
Cuando un usuario completa un formulario y lo envía con el botón Enviar, los datos en los controles del formulario se envían al servidor a través de métodos de solicitud HTTP GET o POST.
Entonces, ¿cómo se indica el servidor? El elemento de formulario toma un atributo de acción, que debe tener su valor especificado en la URL del servidor. También toma un atributo de método, donde se especifica el método HTTP que utiliza para transmitir los valores al servidor.
Este método podría ser GET o POST. Con el método GET, los valores ingresados por el usuario son visibles en la URL cuando se envían los datos. Pero con POST, los valores se envían en encabezados HTTP, por lo que esos valores no son visibles en la URL.
Si no se usa un atributo de método en el formulario, se asume automáticamente que el usuario quiere usar el método GET, porque es el predeterminado.
Entonces, ¿cuándo debería usar los métodos GET o POST? Usa el método GET para enviar datos no confidenciales o recuperar datos de un servidor (por ejemplo, durante búsquedas). Utilizar el POST al enviar archivos o datos confidenciales.
Mini Proyecto: Crea un formulario de contacto básico
Tomemos lo que hemos aprendido sobre los formularios y usémoslo para hacer un formulario de contacto simple. También presentaré algunos conceptos nuevos a medida que avanzamos.
El HTML:
<form action=servidor-ejemplo.com">
<fieldset>
<legend>Contacto</legend>
<div class="form-control">
<label for="name">Nombre</label>
<input type="name" id="name" placeholder="Introduce tu nombre" required />
</div>
<div class="form-control">
<label for="email">Email</label>
<input
type="email"
id="email"
placeholder="Introduce tu Email"
required
/>
</div>
<div class="form-control">
<label for="message">Mensaje</label>
<textarea
id="message"
cols="30"
rows="10"
placeholder="Introduce tu mensaje"
required
></textarea>
</div>
<input type="submit" value="Enviar" class="submit-btn" />
</fieldset>
</form>
¿Qué está pasando en este código HTML?
Primero, un elemento form está envolviendo todos los demás elementos. Tiene una acción establecida para “servidor-ejemplo.com”, un servidor ficticio donde se recibirán los datos del formulario.
Después del elemento de forma, todos los demás elementos también están rodeados por un elemento fieldset con la etiqueta legend debajo.
Usamos el elemento fieldset para agrupar las entradas relacionadas, y la etiqueta legend contiene un título que transmite de qué se trata el formulario.
Los campos name, email, y textarea están todos en un elemento div con la clase asignada "form-control". Por lo tanto, se comportan como un elemento de bloque para facilitar el estilo con CSS.
También están validados con el atributo required, en consecuencia, el formulario no se envía cuando esos campos están vacíos o cuando el usuario no ingresa los valores en el formato apropiado.
Después de todo eso, tendremos el resultado en la siguiente captura de pantalla:
¿Qué tan feo es eso? ¡Necesitamos aplicar algo de estilo!
El CSS:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: cursive;
}
input,
textarea {
width: 100%;
padding: 5px;
outline: none;
}
label {
line-height: 1.9rem;
}
input[type="submit"] {
transform: translate(2.2%);
padding: 3px;
margin-top: 0.6rem;
font-family: cursive;
font-weight: bold;
}
fieldset {
padding: 20px 40px;
}
¿Qué hace el código CSS aquí?
Centramos todo en el cuerpo horizontalmente con Flexbox y verticalmente con una altura de ventana del 100 %. Usamos una familia tipográfica de cursiva.
Le dimos a las entradas y a textarea un ancho del 100% para que tomen todo el ancho del contenedor padre. Las etiquetas tienen una altura de línea mínima de 1,9 rem (30,4 px), por lo que no se quedan demasiado cerca de sus respectivas entradas.
Diseñamos específicamente el botón (botón de tipo de entrada) con la propiedad de transformación para empujarlo hacia el centro, ya que estaba un poco descentrado. Le dimos un relleno de 3px para tener más espacio alrededor. Luego seleccionamos una familia de fuentes cursiva para él con un peso de negrita.
Porque el botón estaba demasiado cerca del textarea, establecemos un margen superior de 0,6 rem para empujarlo un poco hacia abajo.
Le dimos a nuestro elemento fieldset un relleno de 20 px en la parte superior e inferior, con 40 px a la izquierda y a la derecha para separar el borde que crea alrededor de los elementos de formulario en los que está envuelto.
Al final de todo, tenemos el hermoso formulario de la imagen:
Conclusión
Espero que este tutorial te haya ayudado a comprender cómo funcionan los formularios. Ahora debe tener el conocimiento que necesita para integrar formularios en sus sitios web para que pueda comenzar a recopilar datos.
Gracias por leer, y sigue picando código.