Skip to content
This repository has been archived by the owner on May 15, 2022. It is now read-only.

Commit

Permalink
Adicionado ex Formularios
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmarcon83
gmarcon83 committed Apr 8, 2021
1 parent 92db0f9 commit a4c6257
Show file tree
Hide file tree
Showing 5 changed files with 678 additions and 6 deletions.
120 changes: 120 additions & 0 deletions Dia 50 - Bootstrap - Formularios/D50E2 - Formulários 2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<meta name="Author" content="Giovanni Marcon">

<title>Formulários Bootstrap</title>

<!-- CDN CSS Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<!-- CDN jQuery -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.slim.js"></script>

</head>

<body style="margin-bottom: 200px;padding: 16px;">

<form>

<!-- FORMULÁRIOS HORIZONTAIS -->
<div class="form-group">
<label>Usuário</label>
<input class="form-control" type="text" placeholder="Digite seu usuário">
</div>

<div class="form-group">
<label>Email</label>
<input class="form-control" type="email" id="email" placeholder="Digite seu email">
<small>Email será validado</small>
</div>

<!-- select -->
<div class="form-group">
<label>Estados</label>
<select class="form-control" id="estados">
<option>Acre</option>
<option>Alagoas</option>
<option>Amapá</option>
<option>...</option>
</select>
</div>

<!-- textarea -->
<div class="form-group">
<label>Mensagem</label>
<textarea class="form-control" id="mensagem" rows="3"></textarea>
</div>

<!-- range -->
<div class="form-group">
<label>Satisfação</label>
<input class="custom-range" type="range" id="range" min="1" max="5">
</div>

<div>
<button class="btn btn-primary" type="submit">Enviar</button>
</div>

<!-- Dimensionamento horizontal de labels-->

<form>
<div class="form-group row mt-4">
<label for="colFormLabelSm" class="col-md-1 col-form-label col-form-label-sm">Email</label>
<div class="col-md-11">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm"
placeholder="col-form-label-sm">
</div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-md-1 col-form-label">Email</label>
<div class="col-md-11">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-md-1 col-form-label col-form-label-lg">Email</label>
<div class="col-md-11">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg"
placeholder="col-form-label-lg">
</div>
</div>
</form>


<!--CAMPOS DE FORMULÁRIO PERSONALIZADOS-->
<form>
<div>
<div>
<label>Preferência</label>
<select>
<option selected>Escolher...</option>
<option value="1">Um</option>
<option value="2">Dois</option>
<option value="3">Três</option>
</select>
</div>
<div>
<div>
<input type="checkbox">
<label>Lembrar preferências</label>
</div>
</div>
<div>
<button type="submit">Enviar</button>
</div>
</div>
</form>

<!-- CDN JS Bootstrap -->
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
</script>
</body>

</html>
142 changes: 142 additions & 0 deletions Dia 50 - Bootstrap - Formularios/D50E3 - Formulários Radio e Checkbox.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<meta name="Author" content="Giovanni Marcon">

<title>Formulários Bootstrap</title>

<!-- CDN CSS Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<!-- CDN jQuery -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.slim.js"></script>

</head>

<body style="margin-bottom: 200px;padding: 16px;">


<!--PADRÃO (EMPILHADOS) CHECKBOX -->

<div class="form-check">
<input class="form-check-input" type="checkbox" value="">
<label class="form-check-label">
Checkbox padrão
</label>
</div>

<div class="form-check">
<input class="form-check-input" type="checkbox" value="" disabled>
<label class="form-check-label">
Checkbox desativado
</label>
</div>

<!--PADRÃO EMPILHADOS RADIO BUTTON -->
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" value="opcao1">
<label class="form-check-label">
Radio padrão
</label>
</div>

<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="opcao2">
<label class="form-check-label">
Segundo radio padrão
</label>
</div>

<div class="form-check">
<input disabled class="form-check-input" type="radio" name="exampleRadios" value="option3">
<label class="form-check-label">
Radio desativado
</label>
</div>
<!--INLINE CHECKBOX-->

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="opcao1">
<labe class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="opcao2">
<label class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input disabled class="form-check-input" type="checkbox" value="opcao3" disabled>
<label class="form-check-label">3 (desativado)</label>
</div>

<!--INLINE RADIO-->
<br>

<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" value="opcao1">
<label class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="opcao2">
<label class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input disabled class="form-check-input" type="radio" name="inlineRadioOptions" value="opcao3">
<label class="form-check-label" for="inlineRadio3">3 (desativado)</label>
</div>


<!--FORMULÁRIOS PERSONALIZADOS-->

<!--CAIXAS DE SELEÇÃO -->

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

<!--RÁDIOS -->

<div class="custom-control custom-checkbox">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-checkbox">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio2">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

<!--INLINE -->

<div class="custom-control custom-control-inline custom-checkbox">
<input type="radio" class="custom-control-input" name="customRadio2" id="customRadio3">
<label class="custom-control-label" for="customRadio3">Toggle this custom radio</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="radio" class="custom-control-input" name="customRadio2" id="customRadio4">
<label class="custom-control-label" for="customRadio4">Or toggle this other custom radio</label>
</div>

<!--DESABILITADO -->

<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
<label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

<!-- CDN JS Bootstrap -->
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
</script>
</body>

</html>
80 changes: 80 additions & 0 deletions Dia 50 - Bootstrap - Formularios/D50E4 - Formulários Campo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<meta name="Author" content="Giovanni Marcon">

<title>Formulários Bootstrap</title>

<!-- CDN CSS Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<!-- CDN jQuery -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.slim.js"></script>

</head>

<body style="padding-bottom:200px; width:800px; margin: 0 auto">

<form>
<div class="form-group">
<label for="exampleFormControlInput1">Endereço de email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Select de exemplo</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Exemplo de select múltiplo</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Exemplo de textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Exemplo de input de arquivo</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
<div class="form-group">
<label>Exemplo de tamanho de input</label>
<input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg">
<input class="form-control mb-2" type="text" placeholder="Input padrão">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>
<div class="form-group">
<label>Exemplo de tamanho de select</label>
<select class="form-control form-control-lg mb-2">
<option>Select grande</option>
</select>
<select class="form-control mb-2">
<option>Select padrão</option>
</select>
<select class="form-control form-control-sm">
<option>Select pequeno</option>
</select>
</div>
</form>

<!-- CDN JS Bootstrap -->
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
</script>
</body>

</html>
Loading

0 comments on commit a4c6257

Please sign in to comment.