GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Formulário HTML/CSS


#1

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>

#2

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


#3

Manda o CSS q vc ta utilizando


#4

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%;
}


#6

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

#7

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>

#8

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. :slight_smile:
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?


#9

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


#10

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

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


#11

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