Untitled
unknown
plain_text
2 months ago
5.2 kB
3
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