Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
TiagoMaxx

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

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

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

 

Compartilhar este post


Link para o post
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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Também é possível fazer criando uma divisão grande e colocando margin-right e margin-left até uma posição agradável.

Compartilhar este post


Link para o post
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="aaa@aaa.com" ><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>

 

Editado por Will871

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






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações 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

×