Olá pessoal,
Tenho um site em HTML5 tenho um formulário. No final deste formulário eu tenho dois botões.
No botão “Continuar” eu quero que ele avance para uma página com mesmo estilo da página que eles se encontram, sendo que o que mudaria é o section da página nova.
Então minha dúvida é como criar um comando onclick no botão continuar para que o usuário seja encaminhado para essa nova página de mesmo estilo.??
OBS: Quando o usuário clicar no botão continuar, irá aparecer uma nova seção do site com outro FORMULÁRIO.
Teria de usar uma function (JAVASCRIPT)?
Grato desde já.
Bom dia Thales,
Isso vai depender do seu objetivo nessa troca de paginas. Vou resumir um pouquinho porque estou do celular.
Se precisar usar os dados do formulário na outra página, vai precisar de uma linguagem server-side adicional.
Mas se quiser apenas por testar o evento javascript, você pode colocar a propriedade “onclick” na tag que vai usar como botao. Dentro do onclick você pode usar o comando javascript window.location.href = ‘nova-pagina.html’;
Assim quando clicar neste botao vai abrir a nova janela.
Mas isso é só pra testar, nao é recomendado misturar o html e javascript dessa forma. É legal pesquisar um pouco pra aprender boas praticas da integraçao entre as duas linguagens, pra saber separar cada uma em seu lugar, e aprender mais sobre como funciona.
Da pra achar bastante conteúdo de javascript em pt-br pesquisando. Boa sorte
Olá, Thales.
Como você está utilizando um formulário você pode colocar no atributo action do formulário a próxima página que você quer deixar o usuário ir, qundo ele criar no botão de continuar. Esse botão de continuar tem que ter o atributo type com o valor submit.
Como você não falou o que o segundo botão faz eu vou considerar no exemplo abaixo que ele limpa os campos do formulário. Pra fazer esse botão que limpa os campos do formulário vou usar um pouco de JavaScript.
HTML (index.html)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Two Buttons</title>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/block/form.css">
</head>
<body>
<header class="header">
<h1 class="title">Logo do seu site</h1>
</header>
<article>
<h1>Login</h1>
<form class="form" action="busa.html">
<label class="form-label" for="email">Email</label>
<input id="email" class="form-input" type="email">
<label class="form-label" for="senha">Senha:</label>
<input id="senha" class="form-input" type="password">
<button class="form-button form-button_clear">Limpar</button>
<input class="form-button" type="submit" value="Continuar">
</form>
</article>
<script src="script/block/form.js"></script>
</body>
</html>
HTML (busca.html)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Two Buttons</title>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/block/form.css">
</head>
<body>
<header class="header">
<h1 class="title">Logo do seu site</h1>
</header>
<article>
<h1>Busca</h1>
<form class="form" action="busa.html">
<label class="form-label" for="email">Busca:</label>
<input id="email" class="form-input" type="email">
<button class="form-button form-button_clear">Limpar</button>
<input class="form-button" type="submit" value="Continuar">
</form>
</article>
<script src="script/block/form.js"></script>
</body>
</html>
CSS (reset.css)
* {
margin: 0;
padding: 0;
outline: none;
border: none;
}
html, body {
height: 100%;
}
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
padding-top: 1em;
font-size: 2.5em;
text-align: center;
}
input, button {
font-size: inherit;
font-family: inherit;
color: #333;
}
CSS (form.css)
.form {
background-color: #28324E;
width: 40%;
padding: 5%;
margin-top: 1em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
text-align: center;
color: #FFF;
position: relative;
}
.form-label {
display: block;
margin-top: .8em;
margin-bottom: .4em;
}
.form-input {
display: block;
width: 80%;
padding-left: 1.5%;
padding-right: 1.5%;
margin-left: auto;
margin-right: auto;
height: 1.5em;
outline: 1px solid #2969B0;
transition: outline .2s linear;
}
.form-input.error {
outline-color: #F42C2C;
outline-width: 4px;
}
.form-input:focus {
outline-width: 4px;
}
.form-progress {
margin-top: 5px;
height: 5px;
width: 66.4%;
position: absolute;
left: 16.8%;
}
.form-progress::-moz-progress-bar {
background-color: #41A85F;
}
.form-button {
display: inline-block;
margin-top: 1em;
padding: .5em 2% ;
background-color: #41A85F;
color: inherit;
font-weight: normal;
cursor: pointer;
text-align: center;
transition: background-color .2s linear;
}
.form-button:hover,
.form-button:focus {
background-color: #3B9354;
}
.form-button_clear {
background-color: #C2C4C2;
}
.form-button_clear:hover {
background-color: #AAA9A9;
}
JavaScript (form.js)
(function () {
'use strict';
var $buttonClear = document.querySelector('.form-button_clear');
var $inputs = document.querySelectorAll('.form-input');
$buttonClear.addEventListener('click', function (event) {
event.preventDefault();
var max = $inputs.length;
while(max--) {
$inputs[max].value = '';
};
});
})();
Espero que ajude. Se tiver qualquer dúvida sobre o código só falar. 
2 curtidas
Muito Obrigado pela Ajuda!!!
Consegui resolver o meu problema!
Queria tirar uma outra dúvida …de HTML5.
Como eu faria para dispor arquivos (.doc, .exe, .pdf, .jpg e outros) no meu site para terceiros conseguirem baixar ?
Valeu
Grato mais uma vez!
