Discussoes de Programacao e Tecnologia

Formulário HTML/CSS

9 respostas
T
tiagocancado

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 .

formescola.jpg557×637 64.7 KB

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="[email removido]" ><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>
Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

9 Respostas

E
edumatias

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

J
Jederson_Andre

Manda o CSS q vc ta utilizando

T
tiagocancado

A imagem está ficando assim

formulario.jpg1366×768 43.3 KB

O CSS por enquanto é isso:

.series {

float:left;

width: 33.33%;

}

.turno {

float:left;

width: 33.33%;

}

.atividade {

float:right;

width: 33.33%;

}
R
Rogerio2

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="[email removido]" ><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>
``
T
tiagocancado

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

formulario2.jpg1366×768 69 KB 

> <!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="[email removido]" ><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>
N
N4TH

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?

T
tiagocancado

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

N
N4TH 1 like

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:

T
tiagocancado

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

Criado 24 de outubro de 2017
Ultima resposta 25 de out. de 2017
Respostas 9
Participantes 5

Topicos relacionados

Barra fixa padrão para todas as paginas do site 2 respostas Imagem Resolvido 23 respostas Receber dado em php sem carregar pagina 3 respostas No html escrevi Ação e aparece assim Ação 2 respostas Como colocar opacidade em um item 6 respostas
Alura VSCode: extensões mais usadas Quais as extensões que podem auxiliar na hora desenvolvimento na IDE Visual Studio Code
Casa do Codigo Guia pratico de TypeScript: Melhore suas aplicacoes... Por Thiago da Silva Adriano — Casa do Codigo