This repository has been archived by the owner on Jan 7, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Formulário
SardonyxAnimals edited this page Nov 24, 2020
·
1 revision
Abaixo pode-se encontrar todo o código utilizado para a criação do formulário na página contato.html
, com suas respectivas tags e atributos.
Implementação do formulário em html
:
<div class="formulario">
<form action="#" class="form-contato" method="post" tabindex="1">
<input type="text" class="form-contato-input" name="nome" placeholder="Nome" required />
<input type="email" class="form-contato-input" name="email" placeholder="Email" required />
<input type="tel" class="form-contato-input" maxlength="9" name="tel" placeholder="Telefone" />
<textarea class="form-contato-area" name="conteudo" placeholder="Mensagem..." required></textarea>
<button type="reset" class="form-contato-botao">Enviar</button>
</form>
</div>
Implementação do formulário em css
, no diretório css/contato.css
:
/* Importando css da página index.css :) */
@import url('index.css');
/* Css do formulario classe formulário */
.formulario {
width: 50%;
margin: 0 auto;
}
.form-contato {
width: 100%;
font-family: 'Open Sans', sans-serif;
}
.form-contato-input {
width: 100%;
color: #292929;
font-size: 15px;
background-color: #E9E9E9;
border: 1px solid #E9E9E9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 40px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
text-indent: 20px;
}
.form-contato-area {
width: 100%;
color: #292929;
font-size: 15px;
background-color: #E9E9E9;
border: 1px solid #E9E9E9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 200px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
text-indent: 20px;
padding-top: 16px;
padding-left: 0;
padding-right: 0;
font-family: 'Open Sans', sans-serif;
}
.form-contato-botao {
width: 100%;
font-size: 15px;
border-radius: 4px;
color: #fff;
height: 40px;
opacity: .8;
margin-bottom: 20px;
cursor: pointer;
background: rgb(51, 51, 51);
display: block;
border: none;
border-bottom: 1px rgb(130, 130, 130);
border-right: 1px rgb(130, 130, 130);
transition: 1s;
}
.form-contato-botao:hover {
opacity: 1;
}