Untitled

 avatar
unknown
plain_text
a month ago
5.2 kB
2
Indexable
<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulário de Compras</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="divCompras">
        <h2>Compras</h2>
        <form>
            <fieldset class="fsEsq">
                <legend>Identificação</legend>
                <div class="divLinha">
                    <label class="colPri" for="nome">Nome:</label>
                    <input class="inpGrande" type="text" id="nome">
                </div>
                <div class="divLinha">
                    <label class="colPri" for="email">E-mail:</label>
                    <input class="inpGrande" type="email" id="email">
                </div>
                <div class="divLinha">
                    <label class="colPri" for="endereco">Endereço:</label>
                    <textarea class="impEnder" id="endereco"></textarea>
                </div>
                <div class="divLinha">
                    <label class="colPri" for="telefone">Telefone:</label>
                    <input class="impTelef" type="tel" id="telefone">
                    <label class="colPri" for="celular">Celular:</label>
                    <input class="impTelef" type="tel" id="celular">
                </div>
                <div class="divLinha">
                    <label class="colPri">Gênero:</label>
                    <input type="radio" name="genero" id="mas" checked> <label for="mas">Mas</label>
                    <input type="radio" name="genero" id="fem"> <label for="fem">Fem</label>
                    <input type="radio" name="genero" id="outro"> <label for="outro">Outro</label>
                </div>
                <div class="divLinha">
                    <label class="colPri" for="nascimento">Nascimento:</label>
                    <input class="numDD" type="number" id="dia" min="1" max="31" placeholder="DD">
                    <input class="numDD" type="number" id="mes" min="1" max="12" placeholder="MM">
                    <input class="numQD" type="number" id="ano" min="1900" max="2025" placeholder="AAAA">
                </div>
            </fieldset>

            <fieldset class="fsDir">
                <legend>Seleção de Produtos e Pagamento</legend>
                <div class="divLinha">
                    <select class="colSelProd" id="produto">
                        <option value="">-----</option>
                        <optgroup label="Nacional">
                            <option value="canastra">Canastra (500g)</option>
                            <option value="minas">Queijo Minas (400g)</option>
                            <option value="coalho">Queijo Coalho (500g)</option>
                        </optgroup>
                        <optgroup label="Internacional">
                            <option value="gorgonzola">Gorgonzola (200g)</option>
                            <option value="brie">Queijo Brie (200g)</option>
                        </optgroup>
                    </select>
                    <button type="button">Comprar</button>
                </div>

                <div class="divLinha">
                    <label class="colPriCompras">Lista de Compras:</label>
                </div>

                <div class="divLinha">
                    <fieldset>
                        <legend>Cartão</legend>
                        <div class="divLinha">
                            <input type="radio" name="bandeira" id="visa" checked> <label for="visa">Visa</label>
                            <input type="radio" name="bandeira" id="master"> <label for="master">Master</label>
                            <input type="radio" name="bandeira" id="elo"> <label for="elo">Elo</label>
                        </div>
                    
                        <div class="divLinha">
                            <label class="colPri" for="validade">Validade:</label>
                            <input class="impMedio" type="number" id="mesValidade" min="1" max="12" placeholder="MM">
                            <input class="impNCC" type="number" id="anoValidade" min="2024" max="2035" placeholder="AAAA">
                        </div>
                    
                        <div class="divLinha">
                            <label class="colPri" for="numCartao">Número:</label>
                            <input class="impNCC" type="text" id="numCartao">
                        </div>
                    </fieldset>
                    <textarea class="listaCompras" readonly></textarea>
                <div>
                    <div class="divValor">
                        <label class="colPri" for="valor">Valor R$:</label>
                        <input class="impMedio" type="text" id="valor" readonly>
                </div>
            </fieldset>

            <div class="botoes">
                <button type="submit">Enviar</button>
                <button type="reset">Limpar</button>
            </div>
        </form>
    </section>
</body>
</html>
Editor is loading...
Leave a Comment