O componente Input desempenha um papel fundamental na criação de páginas web. Com essa ferramenta, você pode adicionar uma caixa de entrada diretamente no seu template. Essa caixa de entrada permite que os usuários insiram dados, contribuindo para a interatividade e personalização das páginas. Seja para coletar informações específicas, realizar pesquisas ou interações diversas, a ferramenta Input oferece uma maneira direta e intuitiva para receber dados do usuário e integrá-los ao conteúdo da página de forma ágil e descomplicada.

Localização #

O componente Input se encontra dentro de WebCompoents conforme ilustrado abaixo:

Propriedades #

Basic #

As propriedades básicas do componente Input referem-se ao tipo da caixa de entrada, proporcionando a opção de escolher entre 19 tipos distintos. Essa seleção influencia a forma como o usuário interage com a página.

Email #

Ao optar pelo tipo “Email”, será gerada uma caixa de entrada projetada para receber um endereço de e-mail como entrada.

Password #

Ao optar pelo tipo “Password”, será gerada uma caixa de entrada projetada para receber uma senha como entrada, garantindo que a entrada seja ocultada, não sendo visível na caixa de entrada.

Reset #

Ao optar pelo tipo “Reset”, será gerada uma caixa de entrada projetada para redefinir algo desejado.

Tel #

Ao optar pelo tipo “Tel”, será gerada uma caixa de entrada projetada para receber um telefone como entrada.

Text #

Ao optar pelo tipo “Text”, será gerada uma caixa de entrada projetada para receber um texto como entrada.

Search #

Ao optar pelo tipo “Search”, será gerada uma caixa de entrada projetada para receber um parâmetro que será utilizado para realizar uma busca.

Url #

Ao optar pelo tipo “Url”, será gerada uma caixa de entrada projetada para receber uma Url como entrada.

Textarea #

Ao optar pelo tipo “Textarea”, será gerada uma área de texto projetada para receber texto como entrada. Além disso, é possível configurar manualmente o tamanho da área ao clicar no canto da caixa e arrastar, proporcionando maior flexibilidade de ajuste.

Date #

Ao selecionar o tipo “Date”, uma caixa de entrada é gerada especificamente para receber uma data como entrada. Além disso, os usuários têm a opção de escolher uma data diretamente do calendário, acessível no canto direito da caixa de entrada.

Datetime-local #

Ao selecionar o tipo “Date time-local”, uma caixa de entrada é gerada especificamente para receber uma data e horário como entrada. Além disso, os usuários têm a opção de escolher uma data e horário diretamente do calendário, acessível no canto direito da caixa de entrada.

time #

Ao selecionar o tipo “Time”, uma caixa de entrada é gerada especificamente para receber um horário como entrada. Além disso, os usuários têm a opção de escolher um horário diretamente do relógio, acessível no canto direito da caixa de entrada.

month #

Ao selecionar o tipo “Month”, uma caixa de entrada é gerada especificamente para receber um mês como entrada. Além disso, os usuários têm a opção de escolher um mês diretamente do calendário, acessível no canto direito da caixa de entrada.

Weel #

Ao selecionar o tipo “Weel”, uma caixa de entrada é gerada especificamente para receber uma semana como entrada. Além disso, os usuários têm a opção de escolher uma semana diretamente do calendário, acessível no canto direito da caixa de entrada.

Color #

Ao escolher o tipo “Color”, uma caixa de entrada é gerada especialmente para inserir uma cor. Além disso, ao abrir a caixa de cores, uma paleta de cores é exibida, permitindo selecionar ou criar a cor desejada.

File #

Ao escolher o tipo “File”, uma caixa de entrada é gerada especialmente para receber um arquivo.

Checkbox #

Ao selecionar o tipo “Checkbox”, é gerada uma caixa de entrada em formato quadrado, projetada especificamente para que o usuário possa marcá-la com um check.

radio #

Ao selecionar o tipo “Radio”, é gerada uma caixa de entrada em formato circular, projetada especificamente para que o usuário possa marcá-la.

Number #

Ao escolher o tipo “Number”, uma caixa de entrada é gerada para receber um número como entrada. Além disso, é possível ajustar o número usando os botões de incremento e decremento localizados no canto direito da caixa de entrada.

Range #

Ao selecionar o tipo “Range”, uma barra horizontal é gerada como caixa de entrada, permitindo a seleção de um valor numérico de 1 a 100. Isso é feito arrastando um círculo ao longo da barra, proporcionando um ajuste prático e visual.

Params #

As propriedades de parâmetros do componente Input abrangem o nome da caixa de entrada, sua classe e o tamanho correspondente que a caixa terá, proporcionando a flexibilidade de adicionar novos parâmetros conforme necessário.