Exercícios: formulários 08, 09, 10

RobinsonConstantino · Apr 10, 2024 · da496f0 · da496f0
1 parent 881cbe9
commit da496f0
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 0 deletions.
diff --git a/módulo04/ex25/form08.html b/módulo04/ex25/form08.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Formulário 08</title>
+  </head>
+  <body>
+    <h1>Exemplo de Formulário 08</h1>
+    <hr />
+    <form action="cadastro.php" method="get" autocomplete="on">
+      <p>
+        <label for="in1">Número 1: </label>
+        <input
+          type="number"
+          name="n1"
+          id="in1"
+          min="1"
+          max="100"
+          required
+          oninput="isoma.innerHTML = Number(in1.value) + Number(in2.value)"
+        />
+      </p>
+      <p>
+        <label for="in2">Número 2: </label>
+        <input
+          type="number"
+          name="n2"
+          id="in2"
+          min="1"
+          max="100"
+          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>
+      <hr />
+      <p>
+        <input type="submit" value="Enviar" />
+        <input type="reset" value="Limpar" />
+      </p>
+    </form>
+  </body>
+</html>
diff --git a/módulo04/ex25/form09.html b/módulo04/ex25/form09.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Formulário 09</title>
+  </head>
+  <body>
+    <h1>Exemplo de Formulário 09</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="10"
+          value="5"
+          oninput="ival.innerHTML = Number (inum.value)"
+        />
+        <output id="ival">5</output>
+      </p>
+      <hr />
+      <p>
+        <input type="submit" value="Enviar" />
+        <input type="reset" value="Limpar" />
+      </p>
+    </form>
+  </body>
+</html>
diff --git a/módulo04/ex25/form10.html b/módulo04/ex25/form10.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Formulário 10</title>
+  </head>
+  <body>
+    <h1>Exemplo de Formulário 10</h1>
+    <hr />
+    <form action="cadastro.php" method="get" autocomplete="on">
+      <p>
+        <label for="iano">Em qual ano você nasceu? </label>
+        <input
+          type="number"
+          name="ano"
+          id="iano"
+          min="1900"
+          max="2050"
+          value="1975"
+          oninput="calcidade()"
+        />
+      </p>
+      <p>
+        <label for="iidade">Sua idade é: </label>
+        <output id="iidade"></output>
+      </p>
+      <hr />
+      <p>
+        <input type="submit" value="Enviar" />
+        <input type="reset" value="Limpar" />
+      </p>
+    </form>
+
+    <script>
+      function calcidade() {
+        let atual = new Date().getFullYear();
+        iidade.innerHTML = Number(atual) - Number(iano.value);
+      }
+    </script>
+  </body>
+</html>