Introdução
O formulário é um recurso amplamente utilizado em diversos sistemas web.
Pode ser utilizado para filtros, cadastros de dados e entre outros casos.
Nesse post você vai ver como fazer um formulário com algumas variações de campos e responsivo.
Projeto
Será preciso ter um projeto Vue com o BootstrapVue instalado.
Com isso, vamos implementar o form no App.vue. Se você já tiver algum outro projeto em andamento, pode utilizar no componente que preferir.
Formulário e Grid
O formulário do BootstrapVue é utilizado com a tag b-form.
Para fazer ficar responsivo, vou utilizar o grid system do BootstrapVue, com ele será possível configurar linhas e colunas com seus tamanhos para respectivas telas.
Para a linha é utilizada a tag b-row, e para a coluna b-col.
Para a b-col será passado a propriedade md e sm, md significa a quantidade de colunas que essa coluna irá utilizar em tela média ou maiores, já o sm é a quantidade para telas pequenas.
O grid utiliza no máximo 12 colunas, então você pode combinar a quantidade de colunas até dar 12. No caso das telas pequenas o campo ocupará a tela toda, e por isso o sm ficará sempre com 12.
Antes do formulário, coloquei um separador, só para ilustrar uma separação de bloco do formulário, o código inicial fica assim:
<template>
<div id="app" class="container mt-3">
<h3>Dados pessoais</h3>
<hr />
<b-form>
<b-row>
<b-col md="4" sm="12"></b-col>
<b-col md="5" sm="12"></b-col>
<b-col md="3" sm="12"></b-col>
</b-row>
</b-form>
Essas três primeiras colunas terão os campos de nome, e-mail e status.
Campo de texto
Dentro da primeira coluna, ficará o campo de nome, ele é um campo de texto comum.
Em volta do campo, fica um b-form-group, ele agrupa o campo e coloca algumas informações adicionais, como um nome acima do campo, que ajuda o usuário a saber o que precisa preencher.
O campo de texto em si, é a tag b-form-input, para ele pode ser passado um id, o v-model, que terá o valor digitado pelo usuário e um placeholder também de ajuda ao usuário.
O código dentro da primeira coluna fica assim:
<b-form-group label="Nome:" label-for="nome">
<b-form-input
id="nome"
v-model="form.nome"
placeholder="Ex: João Silva"
></b-form-input>
</b-form-group>
No v-model, foi declarado a variável form.nome para ter o valor digitado, essa variável precisa ser declarada no script, dentro do data, dessa forma:
<script>
export default {
data() {
return {
form: {
nome: "",
}
}
}
}
</script>
Agora este campo estará funcionando corretamente.
O campo de e-mail é igual ao campo de nome, mudando somente as variáveis, por isso, vou passar para os próximos campos e vou deixar o código completo no fim do post.
Campo tipo radio
A próxima implementação é o campo de status.
Esse campo é do tipo radio, onde o usuário pode selecionar entre uma opção e outra, sendo que só pode estar selecionado uma delas.
O campo também fica dentro de um b-form-group, porém, seguido do form vem a tag b-form-radio-group, que irá englobar todas as opções do radio. É nessa tag que fica o v-model.
As opções ficam na tag b-form-radio, tem o atributo value, que indica o valor a ser selecionado, dentro da tag é possível colocar uma descrição.
<b-form-group label="Status">
<b-form-radio-group id="status" v-model="form.status">
<b-form-radio value="active">Ativo</b-form-radio>
<b-form-radio value="inactive">Inativo</b-form-radio>
</b-form-radio-group>
</b-form-group>
Os campos de CPF e RG são campos iguais ao de nome.
Campo tipo data (datepicker)
O campo tipo data, também fica dentro de um b-form-group e a tag para aparecer o datepicker é b-form-datepicker, e aceita os mesmos parâmetros que um campo normal, v-model, id e placeholder.
<b-form-group
label="Data de nascimento:"
label-for="dataDeNascimento"
>
<b-form-datepicker
id="dataDeNascimento"
v-model="form.dataDeNascimento"
placeholder="dd/mm/yyyy"
></b-form-datepicker>
</b-form-group>
Com esse código, na tela já aparece um calendário para o usuário selecionar uma data.
Campo tipo select
O campo select possibilita o usuário selecionar entre as opções predefinidas.
Também fica dentro do b-form-group, e a tag dele é b-form-select, para ele é possível passar duas opções inicialmente, o v-model e o options.
O options contém todas as opções que o usuário poderá selecionar, este deverá ser declarado dentro do data e é um array de objetos, cada posição do objeto precisa ter um value e um text.
<b-form-group label="País:" label-for="pais">
<b-form-select
id="pais"
v-model="form.pais"
:options="paises"
></b-form-select>
</b-form-group>
paises: [
{ value: null, text: "Selecione uma opção" },
{ value: "BRA", text: "Brasil" },
{ value: "ARG", text: "Argentina" },
{ value: "COL", text: "Colômbia" },
],
Campo tipo file
Este campo permite selecionar uma imagem a partir do computador.
Ele não fica dentro de um b-form-group, e sua tag é b-form-file. Para ele, além do v-model e de um placeholder, também vou passar o evento de input.
Este evento significa basicamente que, ao selecionar uma imagem, execute algum método do Vue.
Na execução desse método é possível obter o arquivo que o usuário selecionou.
<b-form-file
@input="saveFile"
v-model="form.file"
placeholder="Selecione uma imagem ou arraste aqui"
></b-form-file>
methods: {
saveFile(event) {
console.log(event);
},
},
Nesse método que contém os dados do arquivo, você poderá manipular da forma que desejar, fazer o upload em um serviço de nuvem como AmazonS3 ou enviar junto com o formulário para salvar o arquivo.
Botões
Para os botões, eles ficarão dentro de uma div para agrupar eles.
<div class="mt-3">
<b-button type="reset" variant="warning" class="mr-3">Limpar</b-button>
<b-button type="submit" variant="primary">Salvar</b-button>
</div>
Conclusão
Todos os campos do formulário foram abordados, o ideal agora é organizar nas linhas e colunas e ele ficará responsivo.
Caso você queira ver o código fonte do formulário, ou um vídeo completo sobre ele, veja abaixo.
Vídeo
Código fonte
O código fonte está no meu CodeSandbox, neste link.
Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.