Introducción al diseño de formulario Bootstrap

HTML y CSS son los lenguajes básicos para el diseño de formularios de sitios web. Todas las plantillas básicas están hechas por HTML, pero tenemos que diseñar y crear un archivo CSS único que luego se necesita por separado. Este método es complicado debido a las referencias de clase e id. Para superar todos los problemas en los archivos HTML y CSS viene bootstrap. Bootstrap es una técnica avanzada para el diseño web. Para la validación y el formato de formulario requerido, bootstrap tiene su propia clase para Textarea, input y otros controles como control de formulario, input-group, etc. Usando el diseño de bootstrap podemos decidir el formato del formulario. Podemos hacer fácilmente formatos de forma vertical, horizontal e inline usando bootstrap.

Tipos de diseño de formulario Bootstrap

El diseño del formulario Bootstrap crea un tipo diferente de formulario. realiza diseño y validación sin archivos CSS y JavaScript. Debido al diseño del formulario, reduzca más codificación y complicaciones. Bootstrap tiene su propia clase para superar todos los códigos complejos de CSS y JavaScript.

Bootstrap tiene tres tipos de diseño de formulario.

  • Forma vertical
  • Forma horizontal
  • Forma en línea

Veamos estos tres tipos en detalle:

1. Forma vertical

En el diseño de formulario vertical, la etiqueta y los elementos de texto son verticales y cada grupo de formularios es vertical. La forma vertical es la forma predeterminada en bootstrap. No hay una regla adicional para el formato de formulario vertical.

2. Forma horizontal

En el diseño de formulario horizontal, la etiqueta y los elementos de texto son horizontales, pero cada grupo de formularios es vertical . Agregue dos clases principales para la forma horizontal.

Agregue la clase en el elemento de formulario.

Agregue la clase en los elementos de la etiqueta.

3. Formulario en línea

En forma en línea, la etiqueta y los elementos están en línea y alineados a la izquierda. La ventana gráfica tiene al menos 768 px de ancho. Agregue una clase para el formulario en línea.

Agregue la clase a los elementos del formulario.

El diseño del formulario Bootstrap tiene alguna clase predeterminada para la convención de formulario mencionada a continuación:

  • .form-group: esta clase se utiliza para el espaciado de formularios y enlazar la etiqueta. Es flexible para enlazar los mensajes de validación del formulario y más para el formulario.
  • . control de forma: esta clase se usa para todos los elementos textuales y el espacio para la forma, etc. Se usa para todos los estilos como tamaño, enfoque.
  • .form-control-lg y .form-control-sm se usan para el tamaño de elemento de entrada grande y pequeño, respectivamente.

Elemento admitido y clase

Algunos elementos y clases admitidos para la validación de formulario Bootstrap sin JavaScript. Facilita y supera mucha codificación de validación del lado del servidor.

1) .form-control-file: esta clase se usa para agregar un archivo como pdf, Docx, etc. en lugar de usar el control de formulario de clase, en los datos de archivo que esta clase está usando.

Ejemplo:

2) Solo lectura: este es un atributo booleano utilizado para los elementos de entrada. En este atributo, el usuario no puede modificar el valor y deshabilitar el cursor para escribir.

Ejemplo:

3) .form-control-plaintext: esta clase funciona como solo lectura pero viene con margen y relleno correctos.

Ejemplo:

Ejemplo de diseño de formulario Bootstrap

Los ejemplos dados se dan a continuación:

1. Ejemplo de forma vertical (forma predeterminada)


Name:

Email:

  • La forma vertical es simple y la forma predeterminada en bootstrap.
  • El ejemplo anterior tiene dos campos de entrada y un botón de inicio de sesión verticalmente con la etiqueta.
  • Usando solo class form-group y class form-control, se creó la forma vertical.
  • Puede modificar el tamaño de los elementos de entrada sin ajustar el tamaño del archivo CSS. El usuario solo necesita una clase que sea .form-control-lg y .form-control-sm para tamaños grande y pequeño, respectivamente.

2. Ejemplo de forma horizontal

class=”form-horizontal”>
Name:


Email:


  • Usando la clase forma horizontal, el usuario crea una forma horizontal. La etiqueta y el elemento de entrada están en línea, pero el grupo de forma de clase es vertical. Clase "control-label col-sm-2" y = "col-sm-10" utilizada para la columna dividida. Asignación de dos columnas para etiqueta y asignación de diez columnas para elementos de entrada.
  • Clase "col-sm-offset-2 col-sm-10" utilizada para el botón Iniciar sesión. El desplazamiento utilizado para el espacio, col-sm-offset-2 utiliza espacios de dos columnas desde la izquierda en un formulario.
  • Vea el ejemplo de forma horizontal y su salida para comprender el diseño. Su nombre visto y el texto de entrada están en una línea, luego el correo electrónico y los elementos están en otra línea.
  • En la pantalla grande y mediana, la forma se ve en forma horizontal, pero en la pantalla pequeña (767 px y menos) la forma parece vertical.
  • La forma horizontal es complicada con el método tradicional, pero el diseño de arranque ayuda a facilitar el uso de control de clase y etiqueta.

3. Ejemplo de forma en línea

class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>
 class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>

  • En forma en línea, todas las etiquetas y elementos están en una fila. Todos los grupos de formularios están en una sola fila. La clase en línea es el valor predeterminado para este diseño. El usuario colocó esta clase en. El formulario en línea se usa más para botones de radio, botones de verificación, etc.
  • Este formulario funciona principalmente en al menos 576px viewport después de eso se muestra como formulario predeterminado. En la etiqueta, se usa la clase sr-only. Esta clase es un lector de pantalla, se usa para ocultar la etiqueta y muestra el único elemento.
  • Si el elemento de entrada en el formulario en línea, el usuario debe venir con un marcador de posición en un elemento de entrada para reconocer el elemento.

Conclusión: Bootstrap del diseño

Para comprender la tecnología Bootstrap, el usuario necesita saber sobre HTML, CSS y JavaScript. El formulario de arranque es la forma más fácil de trabajar en formato de formato estándar. Tiene clases propias para eliminar la codificación y no requiere un archivo diferente de CSS y JavaScript. Usando el formulario Bootstrap, el usuario obtiene velocidad para codificar y evitar el diseño y el estilo de la codificación de bloque. Bootstrap es un marco para el diseño web front-end que es ligero y auto implementado.

Artículos recomendados

Esta es una guía para el diseño del formulario Bootstrap. Aquí discutimos la introducción al diseño de formulario Bootstrap junto con los tipos y ejemplos. También puede consultar nuestros otros artículos sugeridos para obtener más información:

  1. Tipografía Bootstrap
  2. Diseño de Bootstrap
  3. Sistema de cuadrícula Bootstrap
  4. Componentes de Bootstrap

Categoría:

Desarrollo de software