Formulário HTML/CSS
Boa tarde. Estou com um problema no meu código. Não estou conseguindo alinhar meu formulário do jeito que estou precisando. Gostaria da ajuda de vocês para dar uma luz. Eu consegui centralizar, mas falta alinhar. Embaixo da imagem está o código que eu implementei .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Escola Virtual</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<div class="container">
<form action="" method="get" enctype="multipart/form-data" target="">
<fieldset>
<center>
<h1>Escola Virtual</h1>
<h2>Formulário de Pré-Matrícula</h2>
</center>
<fieldset>
<h3>Dados Pessoais:</h3>
<center>
<p>Nome do Aluno:
<input type="text" required name="name" size="20" maxlength="40" id="fname" placeholder="Tiago"><br>
</p>
<p>Nascimento (dd/mm/aaaa):
<input type="data" required name="dia" size="1" maxlength="2" id="dia" placeholder="dia">/
<input type="data" required name="mes" size="1" maxlength="2" id="mes" placeholder="mês">/
<input type="data" required name="ano" size="1" maxlength="4" id="ano" placeholder="ano">
</p>
<p>Nome da Mãe:
<input type="text" required name="mae" size="20" maxlength="40" id="mae" placeholder="Nome da mãe"><br>
</p>
<p>Nome do Pai:
<input type="text" required name="pai" size="20" maxlength="40" id="pai" placeholder="Nome do pai"><br>
</p>
<p>Telefone: DDD (
<input type="tel" required name="ddd" size="1" maxlength="2" id="ddd"placeholder="DDD">)
Tel:<input type="tel" required name="telefone" size="5" maxlength="8" id="tel" placeholder="telefone">
Ramal:<input type="tel" required name="ramal" size="2" maxlength="4" id="ramal" placeholder="ramal"><br>
</p>
<p>E-mail:
<input type="email" required name="email" size="20" maxlength="40" id="email" placeholder="aaa@aaa.com" ><br>
</p>
</center>
</fieldset>
<fieldset>
<h3>Informações de Matrícula:</h3>
<div class="principal">
<div class="series">
<p> Série: <br />
<select name="serie">
<option value="valor1">pré-escolar</option>
<option value="valor2">1a série 1o grau</option>
<option value="valor3">2a série 1o grau</option>
<option value="valor4">3a série 1o grau</option>
<option value="valor5">4a série 1o grau</option>
<option value="valor6">5a série 1o grau</option>
<option value="valor7">6a série 1o grau</option>
<option value="valor8">7a série 1o grau</option>
<option value="valor9">8a série 1o grau</option>
<option value="valor10">1a série 2o grau</option>
<option value="valor11">2a série 2o grau</option>
<option value="valor12">3a série 2o grau</option>
</select>
</p>
</div>
<div class="turno">
<p> Turno:<br />
<input type="radio" name="turno" value="manhã">Manhã<br>
<input type="radio" name="turno" value="tarde">Tarde<br>
</p>
</div>
<div class="atividade">
<p>Atividades Extracurriculares:<br />
<input type="checkbox" name="inf">Informática<br>
<input type="checkbox" name="mus" >Música<br>
<input type="checkbox" name="bal" >Balet<br>
<input type="checkbox" name="pin" >Pintura<br>
<input type="checkbox" name="jud" >Judô<br>
<input type="checkbox" name="fut" >Futebol<br>
</p>
</div>
</div>
</fieldset>
<input type="submit" name="enviar" value="Enviar">
<input type="reset" name="resetar" value="Reset">
</fieldset>
</form>
</div>
</html>
A imagem está saindo assim:
O formulário tem que ficar dessa maneira:
Discussão (11)
Carregando comentários...