Crie uma página web HTML com um formulário que contenha os seguintes campos:
• Usuário
• Senha
Esta página deverá conter um botão “Cancelar” que realiza a limpeza dos dados do formulário
e um botão “Enviar” que realizara a seguinte ação:
Envio das informações do formulário via POST para uma outra página web HTML
apresentando uma mensagem de boas-vindas.
Soluções para a tarefa
Será criada duas páginas:
1ª
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tela de Login</title>
</head>
<body>
<form action="destino.php" method="post">
<div class="mb-3">
<h1>Login</h1>
<label for="exampleInputEmail1" class="form-label">Usuário</label>
<br>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<br>
<label for="exampleInputPassword1" class="form-label">Senha</label>
<br>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<br>
<button type="submit" class="btn btn-primary"><a href="boas vindas.html" target="_blank">Enviar</button>
<button type="cancel" class="btn btn-primary">Cancelar</button>
</form>
</body>
</html>
2ª
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOAS VINDAS!</title>
</head>
<body>
<h1>BOAS VINDAS!</h1>
</body>
</html>
As duas páginas terão que ser salvas em arquivo diferentes, ambas em formato html. A segunda pagina salva com o nome: BOAS VINDAS.HTML
A página web que tem um formulário com o método post e que recebe um usuário e senha e ao enviar redireciona para uma página de boas vindas e ao cancelar limpa os dados do usuário e senha é:
Página 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagina 1 </title>
</head>
<body>
<form method="post">
<input id="text" type="text" placeholder="Usuário ...">
<input id="password" type="password" placeholder="Senha">
<a href="pagina2.html"><button type="submit">Enviar</button></a>
<button onclick="cancelar()">Cancelar</button>
</form>
</body>
</html>
Página 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOAS VINDAS</title>
</head>
<body>
<h1>BOAS VINDAS</h1>
</body>
</html>
Mas de que maneira essas páginas HTML funcionam?
A primeira página tem um formulário com o método post, um botão com um link na página de boas vindas e um botão cancelar que chama uma função cancelar(), essa função limpa os dados do usuário e da senha. Na segunda página tem um título h1 apresentando o "BOAS VINDAS".
Obs: como não dá de colocar scripts nesse site, segue a foto do script utilizado, coloque-o apos o fechamento do form : "</form> script </body>
Saiba mais sobre HTML aqui: https://brainly.com.br/tarefa/53367150
#SPJ2
