Ir ao conteúdo
  • Cadastre-se

HTML Formulário HTML/CSS programação web


Posts recomendados

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. 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="[email protected]" ><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>

O formulário está ficando assim:

 

formulario2.jpg

adicionado 0 minutos depois

O formulário tem que ficar dessa maneira:

 

formescola.jpg

adicionado 2 minutos depois

O CSS por enquanto está assim:

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

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

 

Link para o comentário
Compartilhar em outros sites

@TiagoMaxx , tem várias possibilidades, uma delas seria usar a lógica do bootstrap que cria div groups para os input do formulário. Seria mais um menos:

<div class="grupo">
  <label class="label-grupo">Nome</label>
  <input class="input-grupo" type="text" placeholder="">
</div>

Fiz algo bem simples apenas para você entender aqui no jsfiddle. Assim, você consegue setar tamanhos tanto para o container do input quanto para a label e o próprio input.

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Ai vai uma forma de fazer seu trabalho, use como exemplo pra editar todo o seu conteúdo, com todo esse css ai que passei você consegue ajeitar isso ai sem problemas.

Eu alterei somente a parte "Dados Pessoais", vá alterando os valores e procure o alinhamento que achar perfeito, eu criei um monte de media query sei nem pra que, mas será bom pra usar como exemplo.

Boa sorte!

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Escola Virtual</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
<style>
.grupo {
	margin-left: 17%;
}

.grupo>label {
    text-align: right;
    float: left;
    width: 36%;
    margin-top: 5px;
}

.grupo>input {
    margin: 5px;
    padding: 1px;
    margin-right: 49%;
}

@media(max-width: 1550px){
	.grupo>input {
	    margin-right: 47%;
	}
}

@media(max-width: 1360px){
	.grupo>input {
	    margin-right: 45%;
	}
}

@media(max-width: 1230px){
	.grupo>input {
	    margin-right: 38%;
	}
}

@media(max-width: 920px){
	.grupo>input {
	    margin-right: 28%;
	}
}


@media(max-width: 685px){
	.grupo>input {
	    margin-right: 22%;
	}

	.grupo {
		margin-left: 0%;
	}
}
</style>
</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>
			<div class="grupo">
				<label>Nome do aluno:</label><input type="text" required name="name" size="20" maxlength="40" id="fname" placeholder="Tiago"><br>
				<label>Mascimento (dd/mm/aaaa):</label><input style="margin-right: 0px!important;" type="data" required name="dia" size="1" maxlength="2" id="dia" placeholder="dia">/
				<input style="margin-right: 0px!important;" type="data" required name="mes" size="1" maxlength="2" id="mes" placeholder="mês">/
				<input style="margin-right: 0px!important;" type="data" required name="ano" size="1" maxlength="4" id="ano" placeholder="ano"><br>
				<label>Nome da mãe:</label><input type="text" required name="mae" size="20" maxlength="40" id="mae" placeholder="Nome da mãe"><br>
				<label>Nome do pai:</label><input type="text" required name="pai" size="20" maxlength="40" id="pai" placeholder="Nome do pai"><br>
				<div class="alinha">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></div>
				<label>Email:</label><input type="email" required name="email" size="20" maxlength="40" id="email" placeholder="[email protected]" ><br>
			</div>
			</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>

 

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário 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

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...