Bulma es un framework CSS moderno basado en flexbox . Se envía con elementos y componentes prediseñados que se pueden usar juntos para crear hermosas interfaces. En este artículo, aprenderemos el campo de formulario de Bulma.
El campo de formulario de Bulma es un contenedor simple que contiene un elemento de etiqueta, un control de formulario de Bulma y un texto de ayuda opcional. El contenedor de campos mantiene un espacio constante entre los campos del formulario.
Clases de campo de formulario:
- etiqueta: esta clase se utiliza para establecer una etiqueta de texto para el contenedor de campo.
- control: esta clase se utiliza para establecer un control de formulario para el contenedor de campo.
- ayuda: esta clase se utiliza para establecer un texto de ayuda opcional para el contenedor de campo.
Sintaxis:
<div class="field">
<label class="label">...</label>
<div class="control">
...
</div>
<p class="help">...</p>
</div>
Ejemplo: El siguiente ejemplo muestra el contenedor de campo de un formulario.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.head{
text-align: center;
}
form{
margin-top: 25px;
}
</style>
</head>
<body>
<div class="head">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<p><b>Bulma Form Field</b></p>
</div>
<div class="container is-fluid">
<form>
<div class="field">
<label class="label">Field With Help text</label>
<div class="control">
<input class="input" type="text"
placeholder="Enter some text">
</div>
<p class="help">Some help text here</p>
</div>
<div class="field">
<label class="label">Field Without Help text</label>
<div class="control">
<input class="input" type="text"
placeholder="Enter some text">
</div>
</div>
</form>
</div>
</body>
</html>
Producción:
Campo de formulario de Bulma
Referencia: https://bulma.io/documentation/form/general/#form-field