Ejemplos de Cómo Crear Un Formulario En HTML
Los formularios sirven para recoger datos de los usuarios, como información de contacto, o para permitir a los usuarios interactuar con el sitio web, como publicar comentarios o realizar búsquedas. En este artículo, aprenderemos cómo crear un formulario básico utilizando HTML.
Contenido del artículo
Estructura de un Formulario HTML
Un formulario en HTML se crea utilizando la etiqueta <form>
. Dentro de esta etiqueta, puedes tener una variedad de diferentes elementos de entrada, como campos de texto, botones, casillas de verificación, botones de opción y más.
<form>
<!-- Elementos de entrada van aquí -->
</form>
Elementos de Entrada
Campos de Texto
Los campos de texto se crean usando la etiqueta <input>
con el atributo type
establecido en "text"
. Por ejemplo:
<form>
<label for="fname">Nombre:</label><br>
<input type="text" id="fname" name="fname"><br>
</form>
Teléfono
El elemento <input type="tel">
se utiliza para campos de entrada de números de teléfono.
<label for="phone">Teléfono:</label><br>
<input type="tel" id="phone" name="phone">
Fecha
El elemento <input type="date">
se utiliza para seleccionar una fecha.
<label for="dob">Fecha de nacimiento:</label><br>
<input type="date" id="dob" name="dob">
Contraseña
El elemento <input type="password">
se utiliza para campos de entrada de contraseña. El texto ingresado en este campo se muestra como puntos para ocultar la contraseña.
<label for="password">Contraseña:</label><br>
<input type="password" id="password" name="password">
Archivo
El elemento <input type="file">
se utiliza para permitir al usuario seleccionar un archivo de su sistema de archivos local.
<label for="file">Subir archivo:</label><br>
<input type="file" id="file" name="file">
Checkbox
El elemento <input type="checkbox">
se utiliza para campos de entrada que permiten al usuario seleccionar ninguna, una o varias opciones.
<label for="terms">Acepto los términos y condiciones</label>
<input type="checkbox" id="terms" name="terms">
Radio
El elemento <input type="radio">
se utiliza para campos de entrada que permiten al usuario seleccionar una opción de un conjunto de opciones.
<label for="gender">Género:</label><br>
<input type="radio" id="male" name="gender" value="male"> Hombre<br>
<input type="radio" id="female" name="gender" value="female"> Mujer
Número
El elemento <input type="number">
se utiliza para campos de entrada numéricos.
<label for="quantity">Cantidad:</label><br>
<input type="number" id="quantity" name="quantity">
Rango
El elemento <input type="range">
se utiliza para campos de entrada que deben contener un valor de una gama de valores.
<label for="volume">Volumen:</label><br>
<input type="range" id="volume" name="volume" min="0" max="10"><br>
Botones
Los botones se crean usando la etiqueta <input>
con el atributo type
establecido en "submit"
. Este botón, cuando se presiona, enviará los datos del formulario. Por ejemplo:
<form>
<label for="fname">Nombre:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Enviar">
</form>
Manejo de la Entrada del Formulario
Cuando se presiona el botón de envío, los datos del formulario se envían para ser procesados. Esto se hace a través de uno de dos métodos: GET o POST, que se especifican utilizando el atributo method
en la etiqueta <form>
.
Método GET
El método GET envía los datos del formulario como parte de la URL. Es útil para cosas como las búsquedas, donde los datos del formulario no son sensibles. Sin embargo, este método tiene limitaciones en términos de la longitud de los datos que se pueden enviar.
<form action="mi_script_de.php" method="get">
<!-- Elementos de entrada van aquí -->
</form>
Método POST
El método POST envía los datos del formulario separados de la URL. Esto es más seguro y puede manejar una cantidad mucho mayor de datos, por lo que se utiliza para cosas como el envío de formularios de contacto o de inicio de sesión.
<form action="mi_script_de.php" method="post">
<!-- Elementos de entrada van aquí -->
</form>
En ambos casos, el atributo action
se utiliza para especificar la URL del script del lado del servidor que procesará los datos del formulario.
Ejemplo de formulario en HTML con todos los elementos
A continuación un formulario que utiliza todos los elementos que revisamos en este artículo:
<!DOCTYPE html>
<html>
<body>
<h2>Formulario de Registro</h2>
<form action="/submit_form">
<label for="fname">Nombre:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Apellido:</label><br>
<input type="text" id="lname" name="lname"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Teléfono:</label><br>
<input type="tel" id="phone" name="phone"><br>
<label for="dob">Fecha de nacimiento:</label><br>
<input type="date" id="dob" name="dob"><br>
<label for="password">Contraseña:</label><br>
<input type="password" id="password" name="password"><br>
<label for="file">Subir archivo:</label><br>
<input type="file" id="file" name="file"><br>
<label for="terms">Acepto los términos y condiciones</label>
<input type="checkbox" id="terms" name="terms"><br>
<label for="gender">Género:</label><br>
<input type="radio" id="male" name="gender" value="male"> Hombre<br>
<input type="radio" id="female" name="gender" value="female"> Mujer<br>
<label for="quantity">Cantidad:</label><br>
<input type="number" id="quantity" name="quantity" min="1" max="10"><br>
<label for="volume">Volumen:</label><br>
<input type="range" id="volume" name="volume" min="0" max="10"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Este formulario tiene campos para nombre, apellido, correo electrónico, teléfono, fecha de nacimiento, contraseña, un campo para subir un archivo, un checkbox para términos y condiciones, radios para elegir género, y campos de número y rango para cantidad y volumen, respectivamente.
El botón "Submit" al final es el que se encargaría de enviar el formulario a la URL especificada en el atributo action
de la etiqueta form
(en este caso, "/submit_form"). Para que este formulario funcione en un sitio web real, necesitarías tener un servidor configurado para recibir y procesar la información de este formulario en la ruta "/submit_form".
¿Cómo citar? & Del Moral, M. (s.f.). Ejemplos de Cómo Crear Un Formulario En HTML.Ejemplo de. Recuperado el 13 de Junio de 2024 de https://www.ejemplode.com/17-html/22-ejemplo_de_como_crear_un_formulario_en_html.html
Últimos 10 comentarios