Los formularios se utilizan en casi todos los sitios web que visita. Generalmente se utiliza para recopilar datos de los usuarios. Consiste en varios controles interactivos que permiten a los usuarios ingresar los datos. Estos controles están envueltos en la etiqueta <form> y también se pueden diseñar o diseñar de acuerdo con la necesidad configurando diferentes atributos de los controles, en diferentes valores.
Algunos de los principales controles de formulario son:
- Campos de texto: son campos de una sola línea, permiten ingresar texto de una sola línea.
- Campos de contraseña: son campos de texto especiales, que representan caracteres especiales como un asterisco o una viñeta, en lugar de lo que escribe el usuario.
- Textarea: Son campos de varias líneas, permiten ingresar texto de varias líneas.
- Casillas de verificación: las casillas de verificación permiten seleccionar varias opciones entre varias opciones.
- Botones de radio: Los botones de radio también se utilizan para seleccionar entre varias opciones, pero aquí, solo se puede seleccionar un botón a la vez.
- Botones de envío: es un botón utilizado para el envío de los datos del formulario, ingresados por el usuario.
Se pueden integrar en los formularios según los requisitos.
Bootstrap proporciona los siguientes 3 tipos de diseño de formulario:
- Formularios verticales (predeterminado)
- Formas Horizontales
- Formularios en línea
En este artículo, aprenderemos a crear las formas verticales básicas.
¿Cómo crear una forma vertical o básica en bootstrap?
- Para incluir este formulario en su sitio web haciendo uso de bootstrap, solo necesita incluir las siguientes bibliotecas jquery y bootstrap, como scripts en su código HTML.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com /bootstrap/3.4.0/js/bootstrap.min.js”></secuencia de comandos>
- Incluya el siguiente enlace de la hoja de estilo de bootstrap en el encabezado del documento HTML, lo que nos permitirá usar varias clases de bootstrap para diseñar el formulario y sus controles.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css”>
- Incluya la etiqueta <form> en el cuerpo del código para crear el formulario y para envolver todos los controles de formulario que desea incluir en su formulario.
<form>
<div class="form-group">
<label>User Name</label>
<input class="form-control"
type="text"
placeholder="Enter your User Name">
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control"
type="password"
placeholder="Enter your password">
</div>
</form>
Aquí,
- La etiqueta <label> se usa para incluir el control de formulario de la etiqueta.
- class=”form-group” se utiliza para ajustar el espacio entre los distintos controles de formulario.
- class=”form-control” se usa para diseñar los controles de formulario, como su apariencia.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Vertical forms Example</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container" style="color:green"> <h1>GeeksforGeeks</h1> </div> <div class="container"> <h4>Vertical Form -> Example:1</h4> <form> <div class="form-group"> <label>User Name</label> <input class="form-control" type="text" placeholder="Enter your User Name"> </div> <div class="form-group"> <label>Password</label> <input class="form-control" type="password" placeholder="Enter your password"> </div> <div class="container"> <button type="button" class="btn btn-success"> Login </button> <button type="button" class="btn btn-secondary"> Register </button> </div> </form> </div> </body> </html>
Producción:
Como puede ver en el resultado , se crea un formulario básico que tiene controles de formulario interactivos, es decir, dos etiquetas, un campo de texto y un campo de contraseña para ingresar los datos, es decir, nombre y contraseña, y 2 botones, es decir, iniciar sesión y registrarse.
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Vertical forms Example</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container" style="color:green"> <h1>GeeksforGeeks</h1> </div> <div class="container"> <h4>Vertical Form -> Example:2</h4> <form> <div class="form-group"> <label>Name</label> <input class="form-control" type="text" placeholder="Enter your Name"> </div> <div class="form-group"> <label>Gender</label> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked> <label class="form-check-label" for="exampleRadios1"> Male </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked> <label class="form-check-label" for="exampleRadios1"> Female </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked> <label class="form-check-label" for="exampleRadios1"> Others </label> </div> </div> <div class="form-group"> <label>Skills</label> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Web Development </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Android Development </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> DSA </label> </div> </div> <div class="container"> <button type="button" class="btn btn-success"> Submit </button> <button type="button" class="btn btn-secondary"> Clear </button> </div> </form> </div> </body> </html>
Producción:
En este formulario de salida, se incluyen botones de radio , que permiten u obligan al usuario a elegir solo una opción de género de la lista y también se introducen casillas de verificación , lo que permite al usuario seleccionar múltiples habilidades y eso también en forma vertical (predeterminado).
Publicación traducida automáticamente
Artículo escrito por bhawnaatrish y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA