Ir para conteúdo
tiagocancado

Formulário HTML/CSS

Recommended Posts

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:

 

formulario2.jpg

O formulário tem que ficar dessa maneira:

 

formescola.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

faça um algoritmo que realize e imprima o produto entre os numeros 28 e 43 
 

POR FAVOR ME AJUDA COM ISSO NÃO ESTOU SABENDO FAZER E TENHO QUE ENTREGAR HJ PARA AJUDAR NA MINHA NOTA 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Prefiro fazer com DIV, mas faz com tabela, vai ser mais fácil pra você.

 

<!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>
			<table>
			    <tr>
			    	<td align="right">Nome do Aluno:</td>
			    	<td><input type="text" required name="name" size="20" maxlength="40" id="fname" placeholder="Tiago"></td>
			    </tr>
			    <tr>
			    	<td>Nascimento (dd/mm/aaaa):</td>
			    	<td><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"></td>
			    </tr>
				<tr>
					<td align="right">Nome da Mãe:</td>
					<td><input type="text" required name="mae" size="20" maxlength="40" id="mae" placeholder="Nome da mãe"></td>
				</tr>
				<tr>
					<td align="right">Nome do Pai:</td>
					<td><input type="text" required name="pai" size="20" maxlength="40" id="pai" placeholder="Nome do pai"></td>
				</tr>			
				<tr>
					<td align="right">Telefone: DDD (</td>
					<td><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">
					</td>
				</tr>
				<tr>
					<td align="right">E-mail:</td>
					<td><input type="email" required name="email" size="20" maxlength="40" id="email" placeholder="aaa@aaa.com" ></td>
				</tr>
			</table>
			</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>

 

9 minutos atrás, Will Palmeira disse:

faça um algoritmo que realize e imprima o produto entre os numeros 28 e 43 
 

POR FAVOR ME AJUDA COM ISSO NÃO ESTOU SABENDO FAZER E TENHO QUE ENTREGAR HJ PARA AJUDAR NA MINHA NOTA 

 

abre outro tópico meu amigo, pra galera te ajudar.

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 minutos atrás, greg_kaippert disse:

Prefiro fazer com DIV, mas faz com tabela, vai ser mais fácil pra você.

 


<!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>
			<table>
			    <tr>
			    	<td align="right">Nome do Aluno:</td>
			    	<td><input type="text" required name="name" size="20" maxlength="40" id="fname" placeholder="Tiago"></td>
			    </tr>
			    <tr>
			    	<td>Nascimento (dd/mm/aaaa):</td>
			    	<td><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"></td>
			    </tr>
				<tr>
					<td align="right">Nome da Mãe:</td>
					<td><input type="text" required name="mae" size="20" maxlength="40" id="mae" placeholder="Nome da mãe"></td>
				</tr>
				<tr>
					<td align="right">Nome do Pai:</td>
					<td><input type="text" required name="pai" size="20" maxlength="40" id="pai" placeholder="Nome do pai"></td>
				</tr>			
				<tr>
					<td align="right">Telefone: DDD (</td>
					<td><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">
					</td>
				</tr>
				<tr>
					<td align="right">E-mail:</td>
					<td><input type="email" required name="email" size="20" maxlength="40" id="email" placeholder="aaa@aaa.com" ></td>
				</tr>
			</table>
			</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>

 

 

abre outro tópico meu amigo, pra galera te ajudar.

posso copiar e usar no trabalho ?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
6 minutos atrás, Will Palmeira disse:

certo estou tentando fazer isso 
mas coloco oq no segundo topico 

 

 

Entra nesse link: https://forum.imasters.com.br/forum/3-php/

Você vai ver um botão verde escrito "Novo tópico", no lado superior direito, ai você digita um titulo para a sua dúvida, e em tags você coloca palavras separadas por vírgula referente a sua dúvida, e esperar alguém responder.

 

Estou te ensinando a criar um tópico.

 

Mas em relação a sua duvida, ver se é isso que você quer.

 

<?php
for($i = 28; $i <= 43; $i++){
	echo $i;
}
?>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
19 minutos atrás, greg_kaippert disse:

Prefiro fazer com DIV, mas faz com tabela, vai ser mais fácil pra você.

 


<!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>
			<table>
			    <tr>
			    	<td align="right">Nome do Aluno:</td>
			    	<td><input type="text" required name="name" size="20" maxlength="40" id="fname" placeholder="Tiago"></td>
			    </tr>
			    <tr>
			    	<td>Nascimento (dd/mm/aaaa):</td>
			    	<td><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"></td>
			    </tr>
				<tr>
					<td align="right">Nome da Mãe:</td>
					<td><input type="text" required name="mae" size="20" maxlength="40" id="mae" placeholder="Nome da mãe"></td>
				</tr>
				<tr>
					<td align="right">Nome do Pai:</td>
					<td><input type="text" required name="pai" size="20" maxlength="40" id="pai" placeholder="Nome do pai"></td>
				</tr>			
				<tr>
					<td align="right">Telefone: DDD (</td>
					<td><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">
					</td>
				</tr>
				<tr>
					<td align="right">E-mail:</td>
					<td><input type="email" required name="email" size="20" maxlength="40" id="email" placeholder="aaa@aaa.com" ></td>
				</tr>
			</table>
			</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>

 

Nesse caso então, table é o mais indicado?

Compartilhar este post


Link para o post
Compartilhar em outros sites
18 horas atrás, greg_kaippert disse:

Sinceramente, não sei te dizer se é mais indicado ou não, mas é mais fácil de fazer e no seu caso, o resultado será o mesmo. Pode testar e ver que fica igual tanto quanto se tivesse feito com div.

Muito obrigado pelo esclarecimento e pela atenção.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora


  • Conteúdo Similar

    • Por BrunoMs
      Fala rapaziada, estou com uma duvida, como faço pra pegar um array de um formulário via javascript?
      Eu editei um exemplo aqui, porém ele não funciona não, vejam:
      <!DOCTYPE html> <html> <head> <script> function validateForm() { var x = document.forms["myForm"]["fname"][0].value; alert(x); } </script> </head> <body> <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post"> Name1: <input type="text" name="fname[]"> Name2: <input type="text" name="fname[]"> <input type="submit" value="Submit"> </form> </body> </html> Outro pergunta, é possível pegar um array dessa forma aí no exemplo sem utilizar o form?
       
      Desde já agradeço rapaziada. abração e fiquem com Deus.
    • Por gil medeiros
      Pessoal, eu quero criar um sistema parecido com esse > https://www.zotac.com/pt/support#download

       
      Quando eu seleciono em Tipo de Arquivo, os outros <selec> mudam as opções

      Se eu seleciono TODOS, o campo Série muda as opções
       

       
      Como eu consigo esse feito ?
       
      Se possível, alguns links para que eu possa estudar sobre
    • Por Luccas Gaulia
      Ola Pessoal,
       
       
      Seguinte, eu tenho um campo (input) que quando passo o mouse, ele sobe o "nome" do input. Até funciona corretamenta... Quando utilizo type="text" funciona corretamente pois ele considera tudo valido a partir de qualquer preenchimento...
      Agora, quando utilizo por exemplo type="email", e não preencho com aa@a., e saiu antes de colocar um email valido, o nome de cima some... ae vêem minha luta desde terça feira...
       
      .se-form-element input:valid + label { top: -40px; color: black; font-size: 10px; } Assim, ele funciona corretamente quando valido...
       
      Agora.... quando esta invalido porém ainda preencheu, é isso que preciso resolver...
       
      Segue o link para visualizar melhor (preencha um email invalido e saia do campo): Exemplo
    • Por Mayard Marques
      Olá pessoal!
      Estou com o seguinte problema...
      Em minha página, tenho um formulário de contato no rodapé da página. Acontece que ao abrir a página, a barra de rolagem até o rodapé já selecionando o primeiro campo para digitação do texto. Como resolver isso e a página abrir na posição y:0?
      Obrigado!
    • Por fideles
      Galera, 
       
      Já quebrei a cabeça um tanto que nem aguento mais pensar.... rs
       
      Honestamente, meu forte não e JS.
       
      Estou tentando aprender JS, então estou começando "pequeno" com algumas coisas mais não consigo sair do lugar.
       
      Vejam o código abaixo;
      <html> <head> <title>teste</title> <script type="text/javascript"> window.onload = function(){ var i = function(id){ return document.getElementById(id); } i("calcula").onclick = function(){ var c1 = i("prazos1_0").value; var c2 = i("prazos1_1").value; var c3 = i("prazos1_2").value; var c4 = i("prazos1_3").value; var c5 = i("aderencia1_0").value; var c6 = i("aderencia1_1").value; var c7 = i("aderencia1_2").value; var c8 = i("aderencia1_3").value; var result = parseFloat (c1) + parseFloat (c2) + parseFloat (c3) + parseFloat (c4) + parseFloat (c5) + parseFloat (c6) + parseFloat (c7) + parseFloat (c8); i("resultado").innerHTML = result.toFixed(0); } } </script> </head> <body> <fieldset id="c"> <h3>Soma:</h3> <label><input type="radio" name="prazos" value="4" id="prazos1_0" required /><font size="2">Excelente</font></label> <label><input type="radio" name="prazos" value="3" id="prazos1_1" required /><font size="2">Satisfatório</font></label> <label><input type="radio" name="prazos" value="2" id="prazos1_2" required /><font size="2">Razoável</font></label> <label><input type="radio" name="prazos" value="1" id="prazos1_3" required /><font size="2">Insatisfatório</font></label> <br /> <label><input type="radio" name="aderencia" value="4" id="aderencia1_0" required /><font size="2">Excelente</font></label> <label><input type="radio" name="aderencia" value="3" id="aderencia1_1" required /><font size="2">Satisfatório</font></label> <label><input type="radio" name="aderencia" value="2" id="aderencia1_2" required /><font size="2">Razoável</font></label> <label><input type="radio" name="aderencia" value="1" id="aderencia1_3" required /><font size="2">Insatisfatório</font></label> <br /> <button id="calcula">calcular</button> </fieldset> <br> <fieldset> Result: <span id="resultado">0</span> </fieldset> </body> </html> O JS faz a soma corretamente, mais eu gostaria era que ele pegasse o calor do input radio marcado e somasse esse valor, e não o valor total igual ele ta fazendo,
      Já tentei colocando igual abaixo para ver se soma, ai não funciona.
      var c1 = i("prazos1_0").value; var c1 = i("prazos1_1").value; var c1 = i("prazos1_2").value; var c1 = i("prazos1_3").value; var c2 = i("aderencia1_0").value; var c2 = i("aderencia1_1").value; var c2 = i("aderencia1_2").value; var c2 = i("aderencia1_3").value;  
      Realmente acho que não consigo mais solução, se alguém puder ajudar, eu agradeço antecipadamente.
       
      Grato
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: