Bulma es un marco CSS gratuito y de código abierto que se utiliza para crear sitios web hermosos y receptivos utilizando los elementos y componentes prediseñados que vienen con Bulma.
En este artículo, aprenderemos sobre la clase de control Bulma Form . El control de formulario Bulma es un contenedor con su propiedad de visualización establecida en bloque . La clase de control Bulma se usa para un contenedor de bloques que mejora los controles de formulario único. El contenedor Bulma Form puede contener solo cuatro elementos, a saber, entrada, selección, botón, icono. El contenedor de control de Bulma es útil por las siguientes razones.
- Ayuda a mantener un espacio constante.
- Los controles se pueden combinar para formar grupos o listas.
- El contenedor de control ayuda a agregar un icono a un control de formulario.
Sintaxis:
Clase de control:
<div class="control"> .... </div>
Clase de control con elementos:
<div class="control">
<input class="input" type="email" placeholder="Email">
<div class="select">
<select>
<option>....</option>
<option>....</option>
</select>
</div>
<button class="button">....</button>
<span class="icon">...</span>
...
</div>
Ejemplo: El siguiente ejemplo muestra cómo usar el contenedor de control de Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Form Control</title>
<link rel='stylesheet'
href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
.head {
text-align: center;
}
form {
margin: 25px auto;
max-width: 400px;
text-align: center;
}
form>p{
margin-top: 25px;
font-weight: bold;
}
form>.control{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="head">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<p><b>Bulma Form Control</b></p>
</div>
<div class="container is-fluid">
<form>
<p>Form Control with a input and icon:</p>
<div class="control has-icons-left">
<input class="input" type="text"
placeholder="Enter some text">
<span class="icon is-left">
<i class="fas fa-user"></i>
</span>
</div>
<p>Form Control with a select element:</p>
<div class="control">
<div class="select">
<select>
<option selected>Select a topic</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>DBMS</option>
</select>
</div>
</div>
<p>Form Control with a button:</p>
<div class="control">
<button class="button is-link">
Button inside control container
</button>
</div>
</form>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/form/general/#form-control