Bootstrap 4 - Formularios
Descripción
El elemento de formulario se utiliza para recopilar información del usuario mediante el uso de campos como casillas de verificación, botones de radio o campos de texto, etc.
Forma básica
Puede envolver etiquetas y controles en un elemento <div> con la clase .form-group y agregar una clase de .form-control a todos los elementos textuales <input>, <textarea> y <select>.
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Form</h2>
<form>
<div class = "form-group">
<label for = "exampleInputEmail1">Email</label>
<input type = "email" class = "form-control"
id = "exampleInputEmail1" aria-describedby = "emailHelp"
placeholder = "Enter your email">
</div>
<div class = "form-group">
<label for = "exampleInputPassword1">Password</label>
<input type = "password" class = "form-control"
id = "exampleInputPassword1" placeholder = "Enter your password">
</div>
<div class = "form-group form-check">
<label class = "form-check-label" for = "exampleCheck1">
<input type = "checkbox" class = "form-check-input"
id = "exampleCheck1">Remember me
</label>
</div>
<button type = "submit" class = "btn btn-primary">Sign In</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Controles de formulario
Bootstrap admite de forma nativa los controles de formulario más comunes, como entrada , área de texto y selección .
El siguiente ejemplo demuestra los controles de formulario admitidos anteriormente especificados con la clase .form-control -
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h4>Example Input</h4>
<div class = "form-group">
<input type = "email" class = "form-control"
id = "exampleFormControlInput1" placeholder = "Enter your email">
</div>
<h4>Example Select</h4>
<div class = "form-group">
<select class = "form-control" id = "exampleFormControlSelect1">
<option>Select Option #1</option>
<option>Select Option #2</option>
<option>Select Option #3</option>
<option>Select Option #4</option>
<option>Select Option #5</option>
</select>
</div>
<h4>Example Multiple Select</h4>
<div class = "form-group">
<select multiple class = "form-control" id = "exampleFormControlSelect2">
<option>Multiple Select #1</option>
<option>Multiple Select #2</option>
<option>Multiple Select #3</option>
<option>Multiple Select #4</option>
<option>Multiple Select #5</option>
</select>
</div>
<h4>Example Textarea</h4>
<div class = "form-group">
<textarea class = "form-control" id = "exampleFormControlTextarea1" rows = "3"></textarea>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Entradas de tamaño, solo lectura y rango
El campo de entrada se puede mostrar en tamaños grandes y pequeños utilizando las clases .form-control-lg y .form-control-sm respectivamente. El atributo readonly es un atributo booleano, que hace que el campo de entrada sea de solo lectura y no se puede modificar. Puede poner rango para las entradas usando la clase .form-control-range .
El siguiente ejemplo demuestra los tipos anteriores:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Sizing</h2>
<input class = "form-control form-control-lg" type = "text"
placeholder = "Large Input">
<br>
<input class = "form-control" type = "text"
placeholder = "Default Input">
<br>
<input class = "form-control form-control-sm" type = "text"
placeholder = "Small Input">
<br>
<br>
<h2>Readonly</h2>
<input class = "form-control" type = "text"
placeholder = "This is readonly text" readonly>
<br>
<br>
<h2>Range Inputs</h2>
<div class = "form-group">
<input type = "range" class = "form-control-range"
id = "formControlRange">
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Formulario de cuadrícula usando Form Row
Puede crear formularios complejos que requieran varias columnas utilizando la clase .form-row que especifica el diseño compacto de la columna. El siguiente ejemplo demuestra esto:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Form Row</h2>
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputEmail4">First Name</label>
<input type = "text" class =" form-control"
id = "inputEmail4" placeholder = "First Name">
</div>
<div class = "form-group col-md-6">
<label for = "inputPassword4">Last Name</label>
<input type = "text" class = "form-control"
id = "inputPassword4" placeholder = "Last Name">
</div>
</div>
<div class = "form-group">
<label for = "inputAddress">Address</label>
<input type = "text" class = "form-control" id = "inputAddress"
placeholder = "Address">
</div>
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputCity">City</label>
<input type = "text" class = "form-control" placeholder = "City"
id = "inputCity">
</div>
<div class = "form-group col-md-4">
<label for = "inputState">State</label>
<select id = "inputState" class = "form-control">
<option selected disabled>Select State</option>
<option>State 1</option>
<option>State 1</option>
</select>
</div>
<div class = "form-group col-md-2">
<label for = "inputZip">Pin Code</label>
<input type = "text" class = "form-control" id = "inputZip"
placeholder = "Pin Code">
</div>
</div>
<div class = "form-group">
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" id = "gridCheck" >
<label class = "form-check-label" for = "gridCheck">
I Agree To Terms and Conditions
</label>
</div>
</div>
<button type = "submit" class = "btn btn-primary">Submit</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Formas horizontales
Cree formas horizontales agregando la clase .row para formar grupos. El ancho de las etiquetas y los controles se puede especificar usando las clases .col - * - * y agregue la clase .col-form-label a su <label>, para que pueda colocar controles de formulario centrados verticalmente.
El siguiente ejemplo demuestra esto:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Horizontal Forms</h2>
<div class = "form-group row">
<label for = "inputEmail3" class = "col-sm-2 col-form-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputEmail3"
placeholder = "First Name">
</div>
</div>
<div class = "form-group row">
<label for = "inputPassword3" class = "col-sm-2 col-form-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputPassword3"
placeholder = "Last Name">
</div>
</div>
<fieldset class = "form-group">
<div class = "row">
<legend class = "col-form-label col-sm-2 pt-0">Radios</legend>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios1" value = "option1" checked>
<label class = "form-check-label" for = "gridRadios1">
Option 1
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios2" value = "option2">
<label class = "form-check-label" for = "gridRadios2">
Option 2
</label>
</div>
<div class = "form-check disabled">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios3" value =" option3" disabled>
<label class = "form-check-label" for = "gridRadios3">
Option 3 (disabled)
</label>
</div>
</div>
</div>
</fieldset>
<div class = "form-group row">
<div class = "col-sm-2">Checkbox</div>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "checkbox"
id = "gridCheck1">
<label class = "form-check-label" for = "gridCheck1">
Option 1
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" id = "gridCheck2">
<label class = "form-check-label" for = "gridCheck1">
Option 2
</label>
</div>
</div>
</div>
<div class = "form-group row">
<div class = "col-sm-10">
<button type = "submit" class = "btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Formulario en línea
Puede crear un formulario donde todos los elementos están en línea, alineados a la izquierda y las etiquetas están al lado, agregando la clase .form-inline a la etiqueta <form>.
El siguiente ejemplo demuestra la visualización de controles de formulario en una sola fila horizontal:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Inline Forms</h2>
<form class = "form-inline" action = "/action_page.php">
<label for = "email">Email :
<input type = "email" class = "form-control" id = "email"
placeholder = "Enter email" name =" email"></label>
<label for = "pwd">Password :
<input type = "password" class = "form-control" id = "pwd"
placeholder = "Enter password" name = "pswd"></label>
<button type = "submit" class = "btn btn-primary">Sign In</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Formulario deshabilitado y texto de ayuda
Utilice el atributo disabled para deshabilitar los controles de formulario (bloquea las interacciones del usuario en una entrada). Puede ingresar texto en los campos relacionados usando la clase .form-text . El siguiente ejemplo demuestra esto:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Disabled Form</h2>
<form>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput">Name</label>
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Name">
</div>
<div class = "form-group">
<label for = "disabledSelect">Select your option</label>
<select id = "disabledSelect" class = "form-control">
<option>Select</option>
</select>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox"
id = "disabledFieldsetCheck" disabled>
<label class = "form-check-label" for="disabledFieldsetCheck">
Remember Me
</label>
</div>
<button type = "submit" class = " btn btn-primary">Submit</button>
<br>
<br>
<h2>Help Text</h2>
<label for = "inputPassword5">Password</label>
<input type = "password" id = "inputPassword5" class = "form-control"
aria-describedby = "passwordHelpBlock">
<small id = "passwordHelpBlock" class = "form-text text-muted">
Your password must be 6-10 characters long (This is help text).
</small>
</fieldset>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado: