Formulário HTML/CSS

tiagocancado · Outubro 24, 2017, 2:16pm

Boa tarde. Estou com um problema no meu codigo. 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 A imagem é como que deveria estar. Embaixo da imagem está o codigo que eu implementei .

Escola Virtual

Formulário de Pré-Matrícula

  <fieldset>
  	<h3>Dados Pessoais:</h3>
  	
  	<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" value="nome mãe" placeholder="Nome da mãe"><br>
  	</p>
  	<p>Nome do Pai:
  		<input type="text" required name="pai" size="20" maxlength="40" id="pai" value="nomepai">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>
  </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>

edumatias · Outubro 24, 2017, 2:26pm

Poste a imagem de como está ficando, para que possa ser comparado.

Jederson_Andre · Outubro 24, 2017, 3:39pm

Manda o CSS q vc ta utilizando

tiagocancado · Outubro 24, 2017, 3:59pm

A imagem está ficando assim

O CSS por enquanto é isso:

.series {
float:left;
width: 33.33%;

}
.turno {
float:left;
width: 33.33%;
}

.atividade {
float:right;
width: 33.33%;
}

Rogerio2 · Outubro 24, 2017, 4:12pm

coloque seu formulario dentro de uma <div class="container">

.series { float:left; width: 33.33%; } .turno { float:left; width: 33.33%; } .atividade { float:right; width: 33.33%; }

<div class="container">

<fieldset>
	<h3>Dados Pessoais:</h3>

	<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" value="nome mãe" placeholder="Nome da mãe"><br>
	</p>
	<p>Nome do Pai:
		<input type="text" required name="pai" size="20" maxlength="40" id="pai" value="nomepai">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>
</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>

``

tiagocancado · Outubro 24, 2017, 4:42pm

Acabei de fazer umas pequenas alterações, mas ainda não está alinhado e ficou assim:

> <!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>

N4TH · Outubro 24, 2017, 6:15pm

Oi tudo bem!
Adicionei (margin-left) no seu código, usando o CSS.
Ficou assim:

Vc queria todos alinhados dessa forma ?

Vc só vai adicionar no seu código somente o estilo que é (style) em cada uma, dentro da tag §.
recomendaria vc usar a tag ( label ) no lugar da tag ( p ) no seu form.
Usei:

<p style="margin-left: -84px;">Nascimento (dd/mm/aaaa):

<p style="margin-left: 13px;">Nome da Mãe:

<p style="margin-left: 25px;">Nome do Pai:

<p style="margin-left: 133px;">Telefone: DDD (

<p style="margin-left: 78px;">E-mail:

Resolvido?

tiagocancado · Outubro 24, 2017, 6:32pm

Sim… que bacana!! nesse caso vc fez css do tipo inline. Caso fosse externo seria como?

N4TH · Outubro 24, 2017, 7:17pm

Opa, Depende…
Você utilizou a tag ( p ), no form, pra nomear cada input, não recomendo,
User a tag ( label ) é o correto .

Exemplo: Vou especificar por .class,
Seria Assim:

.nascimento{
    margin-left: -84px;
}

.nomedamae{
    margin-left: 13px;
}

.nomedopai{
    margin-left: 25px;
}

.telefone{
    margin-left: 133px;
}

.email{
    margin-left: 78px;
}

Exemplo class no HTML:

<label class="nascimento">Nascimento: </label>
<label class="nomedamae">Nome da Mãe: </label>
<label class="nomedopai">Nome do Pai: </label>
<label class="telefone">Telefone: </label>
<label class="email">Email: </label>

Eu só especifiquei cada um… usando um nome de cada class que esta na tag label,
que nomeei…
Pra especificar a class do HTML no CSS se usa um ponto no inicio: .exemplo
E isso!

tiagocancado · Outubro 25, 2017, 12:52pm

Muito obrigado pelo esclarecimento e pela atenção!!!

Formulário HTML/CSS

Escola Virtual

Formulário de Pré-Matrícula

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI