Bootstrap 5 Forms Classes | Explicado
Neste artigo, você obtém um conhecimento detalhado
- Como criar um formulário básico
- Tipos de formulários de bootstrap
- Componentes de formulários de bootstrap
Como criar um formulário
Para criar um uso de formulário Tag, dentro deste formulário Uso de tag Tag com a classe .formulário Para o título de um campo de texto e depois use tag para criar diferentes campos de forma como sua exigência. Os campos de formulário são especificados pelo tipo = "*" atributo com a classe .Controle de forma Para aplicar a configuração de formulário padrão do bootstrap.
- Texto
- Senha
- Data
- Data hora
- Arquivo
- Número
- Rádio
- Caixa de seleção
- Enviar
- Reiniciar
- Faixa
Substitua um deles por * para criar diferentes campos.
Código
É assim que uma forma simples é criada.
Tipos
Existem três tipos de formas em bootstrap.
- Formas verticais
- Formas horizontais
- Formas em linha
Formas verticais
Nesses tipos de formas, a etiqueta e os campos de texto são empilhados verticalmente.
Código
É assim que as formas verticais são criadas.
Formas horizontais
Nesses tipos de formas, a etiqueta e os campos de texto são empilhados horizontalmente.
Código
É assim que as formas horizontais são criadas.
Formas em linha
Nesses tipos de formas, todo campo de formulários é empilhado horizontalmente consecutivo. Esses formulários são úteis onde o espaço é limitado ou onde você deseja fazer as coisas compactas.
Código
É assim que os formulários em linha são criados.
Componentes
A seguir estão os componentes que são usados em uma forma. Esses componentes funcionam apenas corretamente dentro de um marcação.
Campos de texto
Text-field é onde você digita algumas informações como nome, senha, email, número, endereço.
Código
Os campos de texto são criados usando tag e defina seu tipo atribuir a "texto" com a classe .Controle de forma. Usar .forma-controle-lg Classe para campo de texto de tamanho grande, .Controle de forma classe para campo de texto padrão e .formulário-control-sm Para um pequeno campo de texto. Mais uma coisa que quero mencionar aqui é a criação de um uso de campo de texto somente leitura .Formulário-control-plainntext classe com uma palavra -chave somente leitura em um marcação.
Botões do rádio
Os botões de rádio são os botões arredondados que são usados onde você deve selecionar de duas ou três opções.
Código
Radio-buttons são criados usando tag, então defina seu tipo atribuir a "rádio" com a classe .Entrada de formulário e dar o mesmo valor de nome atributo a cada botão de rádio. Se você deseja ativar qualquer botão por padrão, use verificado palavra -chave ou se você quiser desativar qualquer botão, use desabilitado palavra -chave na tag de entrada.
Caixa de seleção
Caixas de seleção são caixas pequenas que são usadas onde você deve selecionar de várias opções.
Código
As caixas de seleção são criadas usando tag, então defina seu tipo atribuir a "Caixa de seleção" com a classe .Entrada de formulário. Se você deseja ativar qualquer botão por padrão, use verificado palavra -chave ou se você quiser desativar qualquer botão, use desabilitado palavra -chave na tag de entrada.
Textarea
Textarea é onde você digita informações descritivas como mensagem, feedback.
Código
Textarea é criado usando o Tag com a classe .Controle de forma.
Menu de seleção
Menus de seleção são usados onde você deseja que seu usuário selecione uma opção em um menu suspenso.
O menu de seleção é criado usando Tag com a classe .Controle de forma e envolvendo -o Tag. Usar .forma-controle-lg classe para menu de seleção de tamanho grande, .Controle de forma classe para menu de seleção de tamanho padrão e .formulário-control-sm Para menu de seleção de tamanho pequeno.
Labas flutuantes
Etiquetas flutuantes são a combinação de espaço reservado e etiquetas
Código
Etiquetas flutuantes são criadas pela embalagem e Marque dentro de uma div com a classe .flutuando em forma E o importante é que os rótulos flutuantes funcionem corretamente, o espaço reservado e a etiqueta são obrigatórios.
Conclusão
Para criar uma tag de uso de formulário, tag de formulário interno para criar um uso de campo de texto, para criar um uso da caixa de seleção, para criar botões de rádio usar, criar textarea usar tag e criar menu de seleção Use tag e enrole -a em torno da tag. No artigo acima, tudo importante sobre o formulário de bootstrap é coberto.