Skip to content

Commit

Permalink
Finalizando o conteúdo sobre formulários
Browse files Browse the repository at this point in the history
  • Loading branch information
@FThiagoB
FThiagoB committed Jun 24, 2024
1 parent 15a8c27 commit 5fcc16f
Show file tree
Hide file tree
Showing 6 changed files with 165 additions and 7 deletions.
3 changes: 3 additions & 0 deletions exercícios/ex25/form001.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,5 +31,8 @@ <h1>Criando formulários</h1>
<p>
A página <a href="./form002.html">form002.html</a> mostra os campos para texto e senha. A página <a href="./form003.html">form003.html</a> mostra o uso de campos para receber números, datas e horários. O uso de campos para telefone e email é mostrado na página A página <a href="./form004.html">form004.html</a>. A página <a href="./form005.html">form005.html</a> mostra os campos de <em>radio buttons</em> e <em>check buttons</em>. Campos de cor, intervalo e seleção de arquivo é mostrado na <a href="./form006.html">form006.html</a>. Outros controles são mostrados na página <a href="./form007.html">form007.html</a>.
</p>
<p>
O uso do campo de <em>output</em> é mostrado em: <a href="./form008.html">form008.html</a>, <a href="./form009.html">form009.html</a> e <a href="./form010.html">form010.html</a>
</p>
</body>
</html>
54 changes: 50 additions & 4 deletions exercícios/ex25/form006.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,17 @@
<title>Formulários</title>

<link rel="stylesheet" href="style.css">

<style>
#outColor{
background-color: yellow;
padding: 20px;
width: 20px;
height: 20px;
border-radius: 50%;
margin: auto;
}
</style>
</head>

<body>
Expand All @@ -16,12 +27,13 @@ <h1>Formulários : campos de cor, intervalo e seleção de arquivo</h1>
<form action="./cadastro.php" method="post" autocomplete="on">
<p>
<label for="icor">Cor: </label>
<input type="color" name="cor" id="icor" value="#FFFF00">
<input type="color" name="cor" id="icor" value="#FFFF00" oninput="changeColorOutput()">
</p>

<p>
<label for="inivel">Nível de Satisfação: </label>
<input type="range" name="nivel" id="inivel" min="1" max="100" value="50" value="0.5">
<label for="itam">Tamanho: </label>
<input type="range" name="tam" id="itam" min="20" max="100" value="50" oninput="changeSizeOutput()">
<output id="outSize">20px</output>
</p>

<p>
Expand All @@ -30,7 +42,41 @@ <h1>Formulários : campos de cor, intervalo e seleção de arquivo</h1>
</p>

<p><input type="submit" value="Enviar">
<input type="reset" value="Limpar"></p>
<input type="reset" value="Limpar" onclick="resetAll()"></p>
</form>

<div id="outColor"></div>

<script>
function changeColorOutput( reset = false ){
if( reset === false )
outColor.style.background = icor.value
else
outColor.style.background = "#FFFF00";
}

function changeSize( size = 20 ){
outColor.style.width = size + "px"
outColor.style.height = size + "px"
}

function changeSizeOutput( reset = false ){
if( reset === false )
{
outSize.innerHTML = itam.value + "px"
changeSize(itam.value)
}
else
{
outSize.innerHTML = "20px"
changeSize()
}
}

function resetAll(){
changeColorOutput(true)
changeSizeOutput(true)
}
</script>
</body>
</html>
41 changes: 41 additions & 0 deletions exercícios/ex25/form008.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulários</title>

<link rel="stylesheet" href="style.css">
</head>

<body>
<h1>Formulários - campo de <em>output</em> (I)</h1>
<hr>

<!-- O campo output não será enviado para a página de destino -->
<!-- Usando o 'onkeydown' podemos fazer o campo sensivel apenas para as setas -->
<form action="./cadastro.php" method="get" autocomplete="on">
<p>
<label for="in1">Número 1:</label>
<input type="number" name="n1" id="in1" min="0" max="50" required oninput="isoma.innerHTML = Number(in1.value) + Number(in2.value)" onkeydown="return false">
</p>

<p>
<label for="in2">Número 2:</label>
<input type="number" name="n2" id="in2" min="0" max="50" required oninput="isoma.innerHTML = Number(in1.value) + Number(in2.value)">
</p>

<p>
<label for="isoma">Soma:</label>
<output name="soma" id="isoma">0</output>
</p>

<p><input type="submit" value="Enviar">
<input type="reset" value="Limpar"></p>
</form>

<script>

</script>
</body>
</html>
26 changes: 26 additions & 0 deletions exercícios/ex25/form009.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulários</title>

<link rel="stylesheet" href="style.css">
</head>

<body>
<h1>Formulários - campo de <em>output</em> (II)</h1>
<hr>

<form action="./cadastro.php" method="get" autocomplete="on">
<p>
<label for="inum">Número:</label>
<input type="range" name="num" id="inum" min="0" max="100" value="50" oninput="ival.innerHTML = Number(inum.value)">
<output id="ival">50</output>
</p>

<p><input type="submit" value="Enviar">
<input type="reset" value="Limpar" onclick="ival.innerHTML = 50"></p>
</form>
</body>
</html>
45 changes: 45 additions & 0 deletions exercícios/ex25/form010.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulários</title>

<link rel="stylesheet" href="style.css">
</head>

<body>
<h1>Formulários - campo de <em>output</em> (III)</h1>
<hr>

<form action="./cadastro.php" method="get" autocomplete="on">
<p>
<label for="iano">Em que ano você nasceu?:</label>
<input type="number" name="ano" id="iano" min="1900" max="2020" value="1990" oninput="calcIdade()" onkeydown="return false">
</p>

<p>
<label for="iidade">Sua idade é: </label>
<output id="iidade">34</output>
</p>

<!-- O reset não corrige o valor do output -->
<p><input type="submit" value="Enviar">
<input type="reset" value="Limpar" onclick="calcIdade(true)"></p>
</form>

<script>
function calcIdade( clear = false ){
let atual = new Date().getFullYear()

if( !clear )
{
iidade.innerHTML = Number(atual) - Number(iano.value)
}
else{
iidade.innerHTML = iidade.innerHTML = Number(atual) - 1990
}
}
</script>
</body>
</html>
3 changes: 0 additions & 3 deletions exercícios/ex25/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@ h1{
font-variant: small-caps;
}

body{
transition: background-color 1s ease-in-out;
}
body > p{
text-indent: 1em;
}
Expand Down

0 comments on commit 5fcc16f

Please sign in to comment.