Loading...

Esse conteúdo foi desenvolvido para ser melhor visualizado em navegadores modernos.

Para um melhor aproveitamento, por favor atualize o seu navegador ou utilize o Chrome, Firefox ou Edge atualizado.

Itens de formulário

O Nova possui uma série de intens necessários no uso de formulários e questões de autoavaliação.

campos de entrada

<label for="campodetexto">campo de texto</label>
<input type="text" class="form-control" placeholder="Text input">
<label for="areadetexto">área de texto</label>
<textarea class="form-control" rows="3" maxlength="500"></textarea>

<div class="form-group">
<label for="exampleSelect">combobox ou select</label>
<select id="exampleSelect" class="form-control">
<option value="0">Primeiro</option>
<option value="1">Segundo</option>
<option value="2">Terceiro</option>
</select>
</div>

campos de entrada com máscara

<label for="campodetexto">número inteiro (sem casas decimais)</label>
<input type="text" class="form-control" placeholder="Text input" data-format="numeroInteiro">
<label for="campodetexto">número com 1 casa decimal</label>
<input type="text" class="form-control" placeholder="Text input" data-format="numeroDecimal">
<label for="campodetexto">número com 2 casas decimais</label>
<input type="text" class="form-control" placeholder="Text input" data-format="numeroCentesimal">
<label for="campodetexto">número com 3 casas decimais</label>
<input type="text" class="form-control" placeholder="Text input" data-format="numeroMilesimal">
<label for="campodetexto">percentual</label>
<input type="text" class="form-control" placeholder="Text input" data-format="percentual">
<label for="campodetexto">percentual com 1 casa decimal</label>
<input type="text" class="form-control" placeholder="Text input" data-format="percentualDecimal">
<label for="campodetexto">percentual com 2 casas decimais</label>
<input type="text" class="form-control" placeholder="Text input" data-format="percentualCentesimal">
<label for="campodetexto">dinheiro em Real</label>
<input type="text" class="form-control" placeholder="Text input" data-format="moedaReal">
Something may have gone wrong 
<label for="campodetexto">dinheiro em Dólar</label>
<input type="text" class="form-control" placeholder="Text input" data-format="moedaDolar">
Something may have gone wrong 
<label for="campodetexto">dinheiro genérico (com cifra)</label>
<input type="text" class="form-control" placeholder="Text input" data-format="moedaCifra">
Something may have gone wrong 
<label for="campodetexto">data curta</label>
<input type="text" class="form-control" placeholder="Text input" data-format="dataCurta">

Botões

Necessário usar somente <a> e <button> e repetir o texto do conteúdo no atributo title:

<a class="btn" href="#" role="button" title="link">Link</a>
<button class="btn" type="submit" title="Button">Button</button>
<a class="btn" href="#" role="button" title="link" disabled>Link</a>
<button class="btn btn-secondary" title="Button">Button</button>
Link Link

Checkbox & radio

<div class="checkbox">
<input id="check4" type="checkbox" name="check4" value="checkbox">
<label for="check4">Checkbox 1</label>
</div>
<div class="checkbox">
<input id="check5" type="checkbox" name="check5" value="checkbox">
<label for="check5">Checkbox 2</label>
</div>
<div class="checkbox disabled">
<input id="check6" type="checkbox" name="check6" value="checkbox" disabled>
<label for="check6">Checkbox 3 – desabilitado</label>
</div>
<div class="radio">
<input id="opcao4" type="radio" name="opc_radio_2" value="radio0" checked>
<label for="opcao4">Opção 1</label>
</div>
<div class="radio">
<input id="opcao5" type="radio" name="opc_radio_2" value="radio1">
<label for="opcao5">Opção 2</label>
</div>
<div class="radio disabled">
<input id="opcao6" type="radio" name="opc_radio_2" value="radio2" disabled>
<label for="opcao6">Opção 3</label>
</div>

Escolha o tipo de card para pré-visualizar os impactos gráficos e obter a classe correspondente.

SCORM (salvando)

Uma funcionalidade adicional aos formulários é o sistema que salva seus dados no LMS através do SCORM. Para ativá-la é necessário incluir o atributo data-active="scormform" na tag FORM e alterar o atributo type do botão de salvar para submit.

<form action="" data-active="scormform" >  
	<button class="btn" type="submit" title="Salvar">Salvar</button>
</form>

ATENÇÃO

Essa funcionalidade utiliza os recursos SCORM e portanto está sujeito à suas limitações.

Em especial, a soma de todos os dados salvos tem um tamanho máximo consideravelmente reduzido ( 4096 caracteres ) e portanto exige atenção redobrada.

Vídeo

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.