> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/es/aplicaciones/components/inputs/form.md).

# Formulario

Cree formularios en aplicaciones de PowerShell Universal que recopilen, validen y envíen datos desde cuadros de texto, casillas de verificación, selectores y otros controles de entrada.

{% embed url="<https://youtu.be/o8Bl1NsCc2Y>" %}

Los formularios ofrecen una forma de recopilar datos de los usuarios.

Los formularios pueden incluir cualquier tipo de control que desee. Esto le permite personalizar el aspecto y utilizar cualquier control de entrada.

Los datos introducidos mediante los controles de entrada se enviarán de vuelta al bloque de script `OnSubmit` cuando se envíe el formulario. Dentro del controlador de eventos `OnSubmit`, tendrá acceso a la variable `$EventData`, que contendrá propiedades para cada uno de los campos del formulario.

Por ejemplo, si tiene dos campos, tendrá dos propiedades en `$EventData`.

```powershell
New-UDForm -Content {
    New-UDTextbox -Id 'txtTextField'
    New-UDCheckbox -Id 'chkCheckbox'
} -OnSubmit {
    Show-UDToast -Message $EventData.txtTextField
    Show-UDToast -Message $EventData.chkCheckbox
}
```

## Controles compatibles

Los siguientes controles de entrada se integran automáticamente con un formulario. Los valores establecidos en estos controles se enviarán durante la validación y en el controlador de eventos `OnSubmit`.

* [Autocomplete](/powershell-universal/es/aplicaciones/components/inputs/automcomplete.md)
* [Checkbox](/powershell-universal/es/aplicaciones/components/inputs/checkbox.md)
* [Date Picker](/powershell-universal/es/aplicaciones/components/inputs/date-picker.md)
* [Radio](/powershell-universal/es/aplicaciones/components/inputs/radio.md)
* [Select](/powershell-universal/es/aplicaciones/components/inputs/select.md)
* [Slider](/powershell-universal/es/aplicaciones/components/inputs/slider.md)
* [Switch](/powershell-universal/es/aplicaciones/components/inputs/switch.md)
* [Textbox](/powershell-universal/es/aplicaciones/components/inputs/textbox.md)
* [Time Picker](/powershell-universal/es/aplicaciones/components/inputs/time-picker.md)
* [Transfer List](/powershell-universal/es/aplicaciones/components/inputs/transfer-list.md)
* [Upload](/powershell-universal/es/aplicaciones/components/inputs/upload.md)

## Formulario simple

Los formularios simples pueden utilizar entradas como cuadros de texto y casillas de verificación.

```powershell
New-UDForm -Content {
    New-UDTextbox -Id 'txtTextfield'
    New-UDCheckbox -Id 'chkCheckbox'
} -OnSubmit {
    Show-UDToast -Message $EventData.txtTextfield
    Show-UDToast -Message $EventData.chkCheckbox
}
```

## Dar formato a un formulario

Dado que los formularios pueden utilizar cualquier componente, puede usar componentes de formato estándar dentro del formulario.

```powershell
New-UDForm -Content {

    New-UDRow -Columns {
        New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
            New-UDTextbox -Id 'txtFirstName' -Label 'First Name' 
        }
        New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
            New-UDTextbox -Id 'txtLastName' -Label 'Last Name'
        }
    }

    New-UDTextbox -Id 'txtAddress' -Label 'Address'

    New-UDRow -Columns {
        New-UDColumn -SmallSize 6 -LargeSize 6  -Content {
            New-UDTextbox -Id 'txtState' -Label 'State'
        }
        New-UDColumn -SmallSize 6 -LargeSize 6  -Content {
            New-UDTextbox -Id 'txtZipCode' -Label 'ZIP Code'
        }
    }

} -OnSubmit {
    Show-UDToast -Message $EventData.txtFirstName
    Show-UDToast -Message $EventData.txtLastName
}
```

## Devolver componentes

Cuando se envía un formulario, puede devolver opcionalmente otro componente para reemplazar el formulario en la página. Puede devolver cualquier componente de Universal Dashboard. Todo lo que necesita hacer es asegurarse de que el componente se escriba en la canalización dentro del controlador de eventos `OnSubmit`.

```powershell
New-UDForm -Content {
    New-UDTextbox -Id 'txtTextfield'
} -OnSubmit {
    New-UDTypography -Text $EventData.txtTextfield
}
```

## Validar un formulario

La validación de formularios se puede realizar utilizando el parámetro de bloque de script OnValidate.

```powershell
New-UDForm -Content {
    New-UDTextbox -Id 'txtValidateForm'
} -OnValidate {
    $FormContent = $EventData

    if ($FormContent.txtValidateForm -eq $null -or $FormContent.txtValidateForm -eq '') {
        New-UDFormValidationResult -ValidationError "txtValidateForm is required"
    } else {
        New-UDFormValidationResult -Valid
    }
} -OnSubmit {
    Show-UDToast -Message $Body
}
```

## Cancelar un formulario

Puede definir un controlador de eventos `-OnCancel` que se invoque cuando se pulse el botón de cancelar. Esto puede utilizarse para realizar acciones como cerrar una ventana modal.

```powershell
New-UDButton -Text 'On Form' -OnClick {
    Show-UDModal -Content {
        New-UDForm -Content {
            New-UDTextbox -Label 'Hello'
        } -OnSubmit {
            Show-UDToast -Message 'Submitted!'
            Hide-UDModal
        } -OnCancel {
            Hide-UDModal
        }
    }
}
```

## Mostrar la salida sin reemplazar el formulario

Aunque puede devolver componentes directamente desde un formulario, quizá desee conservar el formulario para que los usuarios puedan introducir datos de nuevo. Para ello, puede utilizar `Set-UDElement` y un elemento de marcador de posición cuyo contenido pueda establecer.

En este ejemplo, tenemos un formulario vacío que, al enviarse, actualizará el elemento `results` con un UDCard.

```powershell
New-UDForm -Content {

} -OnSubmit {
   Set-UDElement -Id 'results' -Content {
      New-UDCard -Content { "Hello " + (Get-Date) }
   }
}

New-UDElement -Id 'results' -Tag 'div'
```

## Formularios de esquema

En lugar de definir todo el diseño y la lógica de los formularios mediante cmdlets, también puede definir un formulario basado en una tabla hash de esquema. Esta versión de formularios se basa en [react-jsonschema-form](https://rjsf-team.github.io/react-jsonschema-form/docs/).

### Campos

Puede definir campos que acepten los tipos string, number, integer, enum y boolean. Esto cambia el tipo de entrada que se muestra.

```powershell
New-UDForm -Schema @{
   title = "Test Form"
   type = "object"
   properties = @{
       name = @{
           type = "string"
       }
       age = @{
           type = "number"
       }
   }
} -OnSubmit {
   # $EventData.name
   # $EventData.age
}
```

### Propiedades obligatorias

Puede utilizar la propiedad `required` para establecer una lista de propiedades obligatorias.

```powershell
New-UDForm -Schema @{
   title = "Test Form"
   type = "object"
   properties = @{
       name = @{
           type = "string"
       }
       age = @{
           type = "number"
       }
   }
   required = @('name')
} -OnSubmit {
   # $EventData.name
   # $EventData.age
}
```

{% hint style="warning" %}
Tenga en cuenta que las propiedades deben estar en minúsculas. Por ejemplo, debe asegurarse de que las claves de su tabla hash de propiedades estén en minúsculas y que la lista de propiedades obligatorias también esté en minúsculas.
{% endhint %}

### Ordenación

Puede utilizar la propiedad `schemaUI` para modificar el orden de los campos.

```powershell
New-UDForm -Schema @{
        title = "Test"
        type = "object"
        properties = @{
            hostname = @{
                title = "Hostname"
                type = "string"
                }
            ipaddress= @{
                title = "IP Address"
                type = "string"
                format = "ipv4"
                }
            description = @{
                title = "Server Description"
                type = "string"
                }
            servertype = @{
                title = "Server Type"
                type = "string"                            
                enum = "App","DB"
                }
            environment = @{
                title = "Environment"
                type = "string"
                enum = "Prod", "Dev" , "QA"
                }
            }
		required = @('hostname','ipaddress','description','servertype','environment')                    
	} -uiSchema @{
		"ui:order" = @('environment','hostname','ipaddress','description')
	} -OnSubmit {
		Show-UDModal -Content {                        
			New-UDTypography -Text $EventData
		} -Footer {
			New-UDButton -Text "Close" -OnClick {Hide-UDModal}
		} -Persistent
	}
```

### Matrices

Puede crear formularios que acepten de 0 a muchos objetos. El usuario podrá añadir y eliminar objetos del formulario.

```powershell
New-UDForm -Schema @{
   title = "Test Form"
   type = "array"
   items = @{
      type = "object" 
       properties = @{
           name = @{
               type = "string"
           }
           age = @{
               type = "number"
           }
       }
   }
} -OnSubmit {
   # $EventData[0].name
   # $EventData[0].age
}
```

## Formularios de script

Puede generar formularios automáticamente a partir de scripts de su entorno de PowerShell Universal. Los formularios de script generarán componentes de entrada basados en el bloque `param`. Los formularios de script admiten automáticamente progreso y comentarios.

Los formularios de script también admiten mostrar la salida como texto o como tabla.

```powershell
New-UDForm -Script "Script.ps1" -OutputType 'text'
```

## API

* [New-UDForm](/powershell-universal/es/comandos-de-powershell/new-udform.md)
* [New-UDFormValidationResult](/powershell-universal/es/comandos-de-powershell/new-udvalidationresult.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.devolutions.net/powershell-universal/es/aplicaciones/components/inputs/form.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.