Skip to content
This repository has been archived by the owner on Jan 7, 2023. It is now read-only.

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;
}
Clone this wiki locally