Componente de formulario React-Bootstrap

React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. El componente de formulario proporciona una forma de crear un formulario y tomar la entrada del usuario y luego enviarlo al servidor para un mayor procesamiento de datos. Podemos usar el siguiente enfoque en ReactJS para usar el componente de formulario react-bootstrap.

Accesorios de formulario:

• ref: se utiliza para reenviar el formulario-ref al elemento subyacente.
• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• en línea: Se utiliza para mostrar la serie de etiquetas, botones, etc. en una sola fila horizontal.
• validado: Se utiliza para marcar un formulario como validado con valor verdadero/falso.
• bsPrefix: es una vía de escape para trabajar con CSS de arranque altamente personalizado.

Accesorios para formularios y etiquetas:

• ref: se utiliza para reenviar el formulario-ref al elemento subyacente.
• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• columna: se utiliza para representar FormLabel como un componente <Col>.
• htmlFor: se usa para Usa controlId de <FormGroup> si no se especifica explícitamente.
• srOnly: Se utiliza para ocultar visualmente la etiqueta.
• bsPrefix: es una vía de escape para trabajar con CSS de arranque altamente personalizado.

Apoyos de Form.Group:

• ref: se utiliza para reenviar el formulario-ref al elemento subyacente.
• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• controlId: Se utiliza para establecer el id en <FormControl> y htmlFor en el componente <FormGroup.Label>.
• bsPrefix: es una vía de escape para trabajar con CSS de arranque altamente personalizado.

Forma.Accesorios de fila:

• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• bsPrefix: es una vía de escape para trabajar con CSS de arranque altamente personalizado.

Forma.Accesorios de texto:

• ref: se utiliza para reenviar la referencia formText al elemento subyacente.
• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• muted: Se utiliza para agregarle la clase text-muted.
• bsPrefix: es una vía de escape para trabajar con CSS de arranque altamente personalizado.

Formulario.Comprobar accesorios:

• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• id: Es el atributo id de HTML normal utilizado para la identificación.
• isInvalid: se utiliza para establecer manualmente el estilo de la entrada como no válido.
• isStatic: Se usa para agregarle el estilo position-static .
• isValid: se utiliza para establecer manualmente el estilo de la entrada como válido.
• type: Se utiliza para los tipos comprobables.
• bsPrefix: es una vía de escape para trabajar con CSS de arranque altamente personalizado.
• bsCustomPrefix: para controles personalizados, se usa como un bsPrefix separado.

Accesorios de control de formulario:

• ref: se utiliza para reenviar el formulario-ref al elemento subyacente.
• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• personalizado: se utiliza para hacer uso de los elementos de formulario personalizados de Bootstrap.
• disabled: Se utiliza para deshabilitar el control.
• htmlSize: para el elemento subyacente, se utiliza para su atributo de tamaño.
• id: Se utiliza para hacer uso de controlId de <FormGroup>
• isInvalid: para el control, se usa para agregar estilos de validación no válidos.
• isValid: Para el control, se usa para agregar estilos de validación válidos.
• onChange: Es una función de devolución de llamada que se activa en un cambio de valor.
• texto sin formato: se utiliza para representar la entrada como texto sin formato.
• readOnly: Se utiliza para poner el control en estado de solo lectura.
• tamaño: se utiliza para indicar el tamaño de entrada.
• tipo: se utiliza para indicar el tipo de entrada HTML para la entrada.
• valor: para la entrada subyacente, se utiliza para su atributo de valor.
• bsPrefix: es una vía de escape para trabajar con CSS de arranque altamente personalizado.
• bsCustomPrefix: para controles personalizados, es un bsPrefix separado.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install react-bootstrap 
npm install bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

Aplicación.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

export default function App() {
  return (
    <div style={{ display: 'block', 
                  width: 700, 
                  padding: 30 }}>
      <h4>React-Bootstrap Form Component</h4>
      <Form>
      <Form.Group>
          <Form.Label>Enter your full name:</Form.Label>
          <Form.Control type="text" 
                        placeholder="Enter your full name" />
        </Form.Group>
        <Form.Group>
          <Form.Label>Enter your email address:</Form.Label>
          <Form.Control type="email" 
                        placeholder="Enter your your email address" />
        </Form.Group>
        <Form.Group>
          <Form.Label>Enter your age:</Form.Label>
          <Form.Control type="number" placeholder="Enter your age" />
        </Form.Group>
        <Button variant="primary" type="submit">
           Click here to submit form
        </Button>
      </Form>
    </div>
  );
}