Pular para o conteúdo

Programando Soluções

Como fazer um formulário com o BootstrapVue

formulario

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

https://youtu.be/f4lXrfQhY_Q

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.

Referências

https://bootstrap-vue.org/

Este conteúdo te ajudou de alguma forma?

Marcações:
Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok