1
resposta

Radio Buttons

Como trasnsformar o combobox da "classe de voo" para um widget com Radio Buttons?

1 resposta

Oii Josenildo, como você está?

Peço desculpas pela demora em obter um retorno.

Para transformar o combobox da classe de voo para um radiobutton, podemos utilizar no atributo widget da classe PassagemForms que está localizada no arquivo forms.py, a opção forms.RadioSelect(), como mostro abaixo:

widgets = {
            'data_ida': DatePicker(),
            'data_volta': DatePicker(),
            'classe_viagem': forms.RadioSelect()
}

E para que o frontend/estética do formulário não seja prejudicada após essa mudança, podemos adicionar uma condição no template index.html para que quando for a opção de classe do Vôo, utilizaremos classes auxiliares para que possa colocar o RadioButton em linha e de forma organizada:

<div class="form-group">
  <label for="{{field.id_for_label}}">{{field.label}}</label>
    {%if field.label == "Classe do Vôo" %} 
        {{ field | add_class:'form-control form-check form-check-inline pl-4'}} 
    {% else %} 
        {{ field | add_class:'form-control'}} 
    {% endif %}
</div>

Dessa forma, teremos o seguinte resultado:

Imagem com fundo branco, da tela de formulário do Django feita no curso. Nessa imagem, é mostrado três campos: data da pesquisa, informações e Classe do Voô. O campo de Classe do Voô está marcado de vermelho e é um Radio Button (com bolinhas para selecionar a opção certa: econômica, executiva ou primeira classe)

Um detalhe muito importante é que para os códigos exemplificados acima, foi utilizado como base o bootstrap 4.0.0, deixo abaixo o código a ser inserido no arquivo base.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Caso queira se aprofundar mais em relação a formulários no Django e estilização dos tipos de campos, recomendo o artigo abaixo que irá mostrar outras opções de widgets:

O artigo acima está em inglês, caso tenha dificuldade com o idioma, recomendo o uso do tradutor do navegador.

Qualquer dúvida fico à disposição.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!