Bootstrap es un marco front-end de código abierto para desarrollar sitios web estándar y decorativos o aplicaciones web que son rápidas y fáciles de usar. Bootstrap incluye plantillas basadas en HTML y CSS para tablas, formularios, botones, etc. Bootstrap también usa JavaScript y nos ayuda a crear diseños receptivos. Los formularios son un componente fundamental de cada sitio web. Bootstraps agrega estilo a los formularios que dan una apariencia estándar. Este artículo le dará una idea sobre cómo crear un formulario (Formulario vertical de Bootstrap) utilizando solo Bootstrap.
Reglas para el diseño del formulario.
- Para Ideal Spacing, ajuste las etiquetas y los controles de formulario en <div class=”form-group”> .
- Agregue la clase .form-control a todas las clases de .form-control textuales , como los elementos input>, <textarea> y <select> .
Antes de comenzar a codificar, debemos incluir la siguiente hoja de estilo en el archivo HTML para cargar todo el CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
HTML
<DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<style>
/* Add a background color and
some padding around the form */
.container {
/* Make width to 100% for
full screen size form*/
width: 50%;
border-radius: 5px;
background-color: #f2f2f2; /*rgb(242, 242, 242) hsl(0, 0%, 95%)*/
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input
type="text"
class="form-control"
id="InputName"
placeholder="Enter name"
/>
</div>
<div class="form-group">
<label for="InputEmail">Email</label>
<input
type="email"
class="form-control"
id="InputEmail"
placeholder="Enter email"
/>
</div>
<div class="form-group">
<label for="InputPhoneNumber">Phone Number</label>
<input
type="tel"
class="form-control"
id="InputPhoneNumber"
placeholder="Enter phone number"
/>
</div>
<div class="form-group">
<label for="InputPassword">Password</label>
<input
type="password"
class="form-control"
id="InputPassword"
placeholder="Enter password"
/>
</div>
<div class="form-group">
<label for="InputSubject">Subject</label>
<textarea
class="form-control"
id="InputSubject"
placeholder="Write something...."
style="height: 100px"
>
</textarea>
</div>
<button type="submit"
class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Salida: ahora, como puede ver en la salida , hemos creado un formulario hermosamente simple usando Bootstrap, que puede agregar a su sitio web y atraerá a los espectadores a la página web.
Publicación traducida automáticamente
Artículo escrito por guptaayushh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA