Bootstrap 5 Formularios Clases | Explicado
En este artículo obtienes un conocimiento detallado sobre
- Cómo crear una forma básica
- Tipos de formularios de arranque
- Componentes de formularios de arranque
Cómo crear un formulario
Para crear un formulario de uso Etiqueta, dentro de este formulario Uso de la etiqueta Etiqueta con la clase .etiqueta de forma Para el título de un campo de texto y luego use Etiqueta para crear diferentes campos de formulario como requisito. Los campos de formulario son especificados por el tipo = "*" atributo con la clase .control de forma Para aplicar la configuración de formulario predeterminada desde Bootstrap.
- Texto
- Contraseña
- Fecha
- Fecha y hora
- Archivo
- Correo electrónico
- Número
- Radio
- Caja
- Entregar
- Reiniciar
- Rango
Reemplace uno de estos con * para crear diferentes campos.
Código
Así es como se crea una forma simple.
Tipos
Hay tres tipos de formas en bootstrap.
- Formas verticales
- Formas horizontales
- Formularios en línea
Formas verticales
En este tipo de formularios, la etiqueta y los campos de texto se apilan verticalmente.
Código
Así es como se crean las formas verticales.
Formas horizontales
En este tipo de formularios, la etiqueta y los campos de texto se apilan horizontalmente.
Código
Así es como se crean las formas horizontales.
Formularios en línea
En este tipo de formas, cada campo de forma se apila horizontalmente en una fila. Estas formas son útiles donde el espacio es limitado o donde desea hacer que las cosas sean compactas.
Código
Así es como se crean los formularios en línea.
Componentes
Los siguientes son los componentes que se utilizan en un formulario. Estos componentes solo funcionan correctamente dentro de un etiqueta.
Campos de texto
El campo de texto es donde escribe alguna información como nombre, contraseña, correo electrónico, número, dirección.
Código
Los campos de texto se crean usando etiqueta y establece su tipo atribuir a "texto" con la clase .control de forma. Usar .forma-control-lg clase para campo de texto de gran tamaño, .control de forma clase para el campo de texto predeterminado y .formulario-control-SM Para un pequeño campo de texto. Una cosa más que quiero mencionar aquí es que para crear un uso de campo de texto solo de lectura .formulario-control-oyente clase con una palabra clave solo lectura en un etiqueta.
Botones de radio
Los botones de radio son los botones redondeados que se utilizan donde debe seleccionar entre dos o tres opciones.
Código
Radio-Buttons se crean utilizando etiqueta, luego establece su tipo atribuir a "radio" con la clase .formación de forma de entrada y dar el mismo valor de nombre atributo a cada botón de radio. Si desea activar cualquier botón de forma predeterminada, use comprobado palabra clave o si desea deshabilitar cualquier botón, entonces use desactivado Palabra clave en la etiqueta de entrada.
Caja
Las casillas son casillas pequeñas que se utilizan donde debe seleccionar entre varias opciones.
Código
Las casillas de verificación se crean usando etiqueta, luego establece su tipo atribuir a "caja" con la clase .formación de forma de entrada. Si desea activar cualquier botón de forma predeterminada, use comprobado palabra clave o si desea deshabilitar cualquier botón, entonces use desactivado Palabra clave en la etiqueta de entrada.
Textea
Textarea es donde escribe información descriptiva como mensaje, comentarios.
Código
TextAREA se crea utilizando el Etiqueta con la clase .control de forma.
Menú de selección
Los menús de selección se utilizan donde desea que su usuario seleccione una opción desde un menú desplegable.
El menú de selección se crea utilizando Etiqueta con la clase .control de forma y envolviéndolo etiquetas. Usar .forma-control-lg Clase para el menú de selección de tamaño grande, .control de forma clase para el menú de selección de tamaño predeterminado y .formulario-control-SM Para un menú de selección de tamaño pequeño.
Lablones flotantes
Las etiquetas flotantes son la combinación de marcadores de posición y etiquetas
Código
Las etiquetas flotantes se crean envolviendo y Etiqueta dentro de un div con la clase .flotación de forma Y lo importante es que las etiquetas flotantes funcionen correctamente, el marcador de posición y la etiqueta son obligatorios.
Conclusión
Para crear una etiqueta de uso de formulario, la etiqueta de formulario interior para crear un campo de texto para usar, para crear un uso de casilla de verificación, para crear el uso de botones de radio, para crear textAREA Usar la etiqueta y para crear el menú de selección usa la etiqueta y la envuelve alrededor de la etiqueta. En el artículo anterior se cubre todo lo importante sobre la forma de arranque.