Colecciones de formularios de interfaz de usuario semántica de ReactJS

La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza el lenguaje CSS, JQuery predefinido para incorporar en diferentes marcos.

En este artículo, sabremos cómo usar colecciones de formularios en ReactJS Semantic UI. El formulario se utiliza para mostrar un conjunto de campos de entrada de usuario relacionados.

Estados:

• Cargando: Este estado muestra si un formulario está en estado de carga.
• Éxito: este estado muestra si el formulario se envió correctamente.
• Error: este estado muestra si
• Advertencia: este estado muestra si
• Error de campo:
• Campo deshabilitado: este estado se usa si
• Campo de solo lectura: este estado se muestra si

Sintaxis:

<Form>
    <Form></Form>
</Form>

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, muévase a ella con el siguiente comando.

cd foldername

• Paso 3: instale la interfaz de usuario semántica en su directorio dado.

 npm install semantic-ui-react semantic-ui-css

Estructura del proyecto : Se verá como lo siguiente.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: en este ejemplo, veremos cómo crear un formulario básico usando botones, casillas de verificación y elementos de formulario usando las colecciones de formularios de IU semántica de ReactJS.

import React from 'react'
import {Button, Checkbox, Form} from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
  
document.head.appendChild(styleLink);
  
const Btt = () =>( 
   <Form>
    <Form.Field>
      <label>Enter your first name</label>
      <input placeholder='First Name' />
    </Form.Field>
    <Form.Field>
      <label>Enter your last name</label>
      <input placeholder='Last Name' />
    </Form.Field>
    <Form.Field>
      <Checkbox label='I agree to the Terms and Conditions' />
    </Form.Field>
    <Button type='submit'>Click to submit</Button>
  </Form>
)
  
export default Btt    

Producción: 

Ejemplo 2: En este ejemplo, veremos cómo crear un formulario usando el botón, la casilla de verificación y los elementos del formulario con el estado del formulario como cargando para mostrar el indicador de carga automáticamente usando las colecciones de formularios de IU semántica de ReactJS.

import React from 'react'
import {Button, Checkbox, Form} from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
  
document.head.appendChild(styleLink);
  
const Btt = () =>( 
   <Form loading>
    <Form.Field>
      <label>Enter your first name</label>
      <input placeholder='First Name' />
    </Form.Field>
    <Form.Field>
      <label>Enter your last name</label>
      <input placeholder='Last Name' />
    </Form.Field>
    <Form.Field>
      <Checkbox label='I agree to the Terms and Conditions' />
    </Form.Field>
    <Button type='submit'>Click to submit</Button>
  </Form>
)
  
export default Btt    

Producción:

Referencia: https://react.semantic-ui.com/collections/form