Formulario fica desconfigurado quando aberto no localhost

Luis_Carlos · Novembro 24, 2014

Olá pessoal, fiz um formulario para enviar via post com PHP.

Quando abro ele direto no navegador fica com as configurações originais, mas quando abro no localhost via Wamp server fica totalm,ente desconfigurado e não aceita nenhuma alteração, nem sequer um <center>.

Aqui codigo sem as funções php:

<html 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
	
	<!-- Import Google Font - Yanone Kaffeesatz  -->	
	<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
 
	<title>Contato</title> 
	
	<style type="text/css"> 
	
	* { margin: 0px; padding: 0px; }
	
	body { 
		margin: 0 auto; 
		background: #f5f5f5; 	
		color: #555;	 
		width: 800px; 
				
		/* make reference to the Yanone Kaffeesatz font */
		font-family: 'Yanone Kaffeesatz', arial, sans-serif;
	}
	
	h1 { 
		color: #555; 
		margin: 0 0 20px 0; 
	}	
		
	label {	
		font-size: 20px;
		color: #666; 
	}
	
	form { 
		float: left;
		border: 1px solid #ddd; 
		padding: 30px 40px 20px 40px; 
		margin: 75px 0 0 0;
		width: 715px;
		background: #fff;
				
		/* -- CSS3 - define rounded corners for the form -- */	
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px; 		
		
		/* -- CSS3 - create a background graident -- */
		background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF)); 
		background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE); 
		
		/* -- CSS3 - add a drop shadow -- */
		-webkit-box-shadow:0px 0 50px #ccc;
		-moz-box-shadow:0px 0 50px #ccc; 
		box-shadow:0px 0 50px #ccc;		 		
	}	
	
	fieldset { border: none; }
	
	#user-details { 
		float: left;
		width: 230px; 
	}
	
	#user-message { 
		float: right;
		width: 405px;
	}
	
	input, textarea { 		
		padding: 8px; 
		margin: 4px 0 20px 0; 
		background: #fff; 
		width: 220px; 
		font-size: 14px; 
		color: #555; 
		border: 1px #ddd solid;
		
		/* -- CSS3 Shadow - create a shadow around each input element -- */ 
		-webkit-box-shadow: 0px 0px 4px #aaa;
		-moz-box-shadow: 0px 0px 4px #aaa; 
		box-shadow: 0px 0px 4px #aaa;
		
		/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */		
		-webkit-transition: background 0.3s linear;							
	}
	
	textarea {		
		width: 390px; 
		height: 175px; 		 		
	}
	
	input:hover, textarea:hover { 
		background: #eee; 
	}
		
	input.submit { 	
		width: 150px; 
		color: #eee; 
		text-transform: uppercase; 
		margin-top: 10px;
		background-color: #18a5cc;
		border: none;
		
		/* -- CSS3 Transition - define which property to animate (i.e. the shadow)  -- */
		-webkit-transition: -webkit-box-shadow 0.3s linear;
		
		/* -- CSS3 - Rounded Corners -- */
		-moz-border-radius: 4px; 
		-webkit-border-radius: 4px;
		border-radius: 4px; 
						
		/* -- CSS3 Shadow - create a shadow around each input element -- */ 
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); 
		background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);		
	} 
	
	input.submit:hover { 		
		-webkit-box-shadow: 0px 0px 20px #555;
		-moz-box-shadow: 0px 0px 20px #aaa; 
		box-shadow: 0px 0px 20px #555;	
		cursor:  pointer; 
	} 		
				
	</style> 
	
</head> 
 
<body> 
	
	<form action="#"> 
	
		<h1>Contato</h1>
				
		<fieldset id="user-details">	
			
			<label for="name">Nome:</label>
			<input type="text" name="name" value="" /> 
		
			<label for="email">Email:</label> 
			<input type="email" name="email" value=""  /> 
		
			<label for="phone">Fone:</label> 
			<input type="text" name="phone" value=""  /> 
		
			<label for="website">Cidade:</label> 
			<input type="url" name="estado" value=""  /> 
			<label for="website">Estado:</label> 
			<input type="url" name="estado" value=""  /> 
		
		</fieldset><!--end user-details-->
		
		<fieldset id="user-message">
		
			<label for="message">Sua mensagem:</label> 
			<textarea name="message" rows="0" cols="0"></textarea> 
		
			<input name="Enviar" type="submit" value="Enviar" /> <input type="reset" value="Limpar" /></p>
		
		
		</fieldset><!-- end user-message -->
		 
	</form>	
 
</body> 
</html>

Aqui formulario com as funções do PHP,acredito que isso não deveria influenciar no formulario...

<html 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
	
	<!-- Import Google Font - Yanone Kaffeesatz  -->	
	<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
 
	<title>Contato</title> 
	
	<style type="text/css"> 
	
	* { margin: 0px; padding: 0px; }
	
	body { 
		margin: 0 auto; 
		background: #f5f5f5; 	
		color: #555;	 
		width: 800px; 
				
		/* make reference to the Yanone Kaffeesatz font */
		font-family: 'Yanone Kaffeesatz', arial, sans-serif;
	}
	
	h1 { 
		color: #555; 
		margin: 0 0 20px 0; 
	}	
		
	label {	
		font-size: 20px;
		color: #666; 
	}
	
	form { 
		float: left;
		border: 1px solid #ddd; 
		padding: 30px 40px 20px 40px; 
		margin: 75px 0 0 0;
		width: 715px;
		background: #fff;
				
		/* -- CSS3 - define rounded corners for the form -- */	
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px; 		
		
		/* -- CSS3 - create a background graident -- */
		background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF)); 
		background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE); 
		
		/* -- CSS3 - add a drop shadow -- */
		-webkit-box-shadow:0px 0 50px #ccc;
		-moz-box-shadow:0px 0 50px #ccc; 
		box-shadow:0px 0 50px #ccc;		 		
	}	
	
	fieldset { border: none; }
	
	#user-details { 
		float: left;
		width: 230px; 
	}
	
	#user-message { 
		float: right;
		width: 405px;
	}
	
	input, textarea { 		
		padding: 8px; 
		margin: 4px 0 20px 0; 
		background: #fff; 
		width: 220px; 
		font-size: 14px; 
		color: #555; 
		border: 1px #ddd solid;
		
		/* -- CSS3 Shadow - create a shadow around each input element -- */ 
		-webkit-box-shadow: 0px 0px 4px #aaa;
		-moz-box-shadow: 0px 0px 4px #aaa; 
		box-shadow: 0px 0px 4px #aaa;
		
		/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */		
		-webkit-transition: background 0.3s linear;							
	}
	
	textarea {		
		width: 390px; 
		height: 175px; 		 		
	}
	
	input:hover, textarea:hover { 
		background: #eee; 
	}
		
	input.submit { 	
		width: 150px; 
		color: #eee; 
		text-transform: uppercase; 
		margin-top: 10px;
		background-color: #18a5cc;
		border: none;
		
		/* -- CSS3 Transition - define which property to animate (i.e. the shadow)  -- */
		-webkit-transition: -webkit-box-shadow 0.3s linear;
		
		/* -- CSS3 - Rounded Corners -- */
		-moz-border-radius: 4px; 
		-webkit-border-radius: 4px;
		border-radius: 4px; 
						
		/* -- CSS3 Shadow - create a shadow around each input element -- */ 
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); 
		background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);		
	} 
	
	input.submit:hover { 		
		-webkit-box-shadow: 0px 0px 20px #555;
		-moz-box-shadow: 0px 0px 20px #aaa; 
		box-shadow: 0px 0px 20px #555;	
		cursor:  pointer; 
	} 		
				
	</style> 
	
</head> 
 
<body> 
	<form action="contato.php" method="POST"> 
	
		<h1>Contato</h1>
				
		<fieldset id="user-details">	
			
			<label for="name">Nome:</label>
			<input type="text" name="name" value="" /> 
		
			<label for="email">Email:</label> 
			<input type="text" name="email" value=""  /> 
		
			<label for="phone">Fone:</label> 
			<input type="text" name="phone" value=""  /> 
		
			<label for="website">Cidade:</label> 
			<input type="text" name="cidade" value=""  /> 
			<label for="estado">Estado:</label> 
			<input type="text" name="estado" value=""  /> 
		

		<fieldset id="user-message">
		
			<label for="message">Sua mensagem:</label>
             <input type="text" name="mensagem" value=""  />			
			<textarea name="message" rows="0" cols="0"></textarea> 
		
			<input name="enviar" type="submit" value="enviar" /> <input type="reset" value="Limpar" /></p>
		
		
		</fieldset><!-- end user-message -->
		 
	</form>	
 
</body> 
</html>

William Bruno · Novembro 24, 2014

declare um doctype, e valide teu documento html no w3c.

Existe erro de html.

<html 
<head>

troque por

<!DOCTYPE html>
<html lang="en">
<head>

Luis_Carlos · Novembro 24, 2014

Não mudou nada, o que eu acho estranho que só fica desconfigurado quando abro no localhost,talvez seja alguma coisa nesse sentido...

^{Descobri o erro,havia um campo label a mais,que estava diferente do formato somente html,sem as funções PHP}

<label for="message">Sua mensagem:</label>

wilnet · Novembro 24, 2014

Olá Luis_Carlos blza!

Seu erro é porque seu Primeiro Fielset não está fechado, ok?

<fieldset id="user-details">

Feche-o e teste novamente.

Espero ter ajudado,

vlw

Luis_Carlos · Novembro 24, 2014

havia um campo label a mais,que estava diferente do formato somente html,sem as funções PHP

De qualquer forma obrigado!

Entrar

Arquivado

Formulario fica desconfigurado quando aberto no localhost

Recommended Posts

Luis_Carlos 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luis_Carlos 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luis_Carlos 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante