Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

José Ageu

Como fazer um formulario dessa maneira?

Por , em Desenvolvimento frontend

Recommended Posts

José Ageu    0

José Ageu
Postado

HTML

 

<div class="formulario">


<form id="form1" name="form1" method="post" action="">
<p>Nome</p>
<p>
<label for="nome"></label>
<input type="text" name="nome" id="nome" />
</p>
<p>Email</p>
<p>
<label for="email"></label>
<input type="text" name="email" id="email" />

</textarea>
</p>

<p>Assunto </p>
<p>
<label for="assunto"></label>
<input type="text" name="assunto" id="assunto" />
</p>
<p>Mensagem</p>
<p>
<label for="mensagem"></label>
<textarea name="mensagem" id="mensagem" cols="45" rows="5"></textarea>
</p>

</form>


</div>

 

 

CSS

 


<style>

input{
width:200px;
height:20px;
margin:0 auto;


}

textarea{
width:300px;
float:right;
margin-bottom:80px;
}


.formulario{
width:610px;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px; color:#FFF;
margin:0 auto;



}



body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Dá uma estudade nesse code

<form id="form1" name="form1" method="post" action="">
  
  
  <label for="nome">Nome</label><br/>
    <input type="text" name="nome" id="nome" /><br/>
    

  
    <label for="email"> Email</label><br/>
    <input type="text" name="email" id="email" /><br/>
    <label for="assunto">Assunto </label><br/>
  <input type="text" name="assunto" id="assunto" /><br/>
 
  <label for="mensagem" class="msg">Mensagem</label><br/>
    <textarea name="mensagem"  id="mensagem" ></textarea>
 
  
    

</form>


<style>

input{
    width:200px;
    height:20px;
    margin:10px auto;
   
    
}
label{position:relative;top:10px;}
.msg{   
position:relative;top:-160px;left:220px;
}

textarea{
    width:300px;
    height:150px;
    position:relative;
    left:220px;
    top:-160px;


}
    

#form1{
    width:610px;    
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    margin:0 auto;
    
    
    
}




</style>

 

Cuidado com o uso das tags. Cada uma tem sua função e dever usada somente se necessário.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dian Carlos    29

Dian Carlos
Postado

Tente isso:

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Formulário Transparente</title>

<style>

html {
	margin: 0;
	
	background: #000 url(http://24.media.tumblr.com/bfe78afeab9a32114d4cc1e3e71a596e/tumblr_mgoss6OLAB1r025j1o1_500.jpg);
}

#form {
	float: left;
	
	margin: 20px;
	
	width: 710px;
	height: 150px;
	
	padding: 20px 0 20px 20px;
	
	background: rgba(255, 255, 255, 0.5);
}

#form .case {
	float: left;
	
	width: 335px;
	height: 150px;
	
	margin-right: 20px;
}

#form .case label {
	float: left;
	
	width: 100%;
	
	font-family: sans-serif;
	font-size: 12px;
	color: #FFF;
}

#form .case input.text {
	float: left;
	
	width: 325px;
	
	padding: 5px;
	
	background: rgba(255, 255, 255, 0.5);
	
	border: none;
	outline: none;
	
	margin-bottom: 10px;
}

#form .case textarea.textbig {
	float: left;
	
	width: 325px;
	height: 122px;
	
	padding: 5px;
	
	font-family: sans-serif;
	font-size: 12px;
	
	background: rgba(255, 255, 255, 0.5);
	
	border: none;
	outline: none;
	
	margin-top: 2px;
}

</style>

</head>

<body>

<div id="form">

<div class="case">

<label for="nome">seu nome:</label>
<input class="text" name="nome" id="nome" type="text">

<label for="email">seu e-mail:</label>
<input class="text" name="email" id="email" type="text">

<label for="assunto">assunto:</label>
<input class="text" name="assunto" id="assunto" type="text">

</div>

<div class="case">

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

<textarea class="textbig" name="mensagem" id="mensagem"></textarea>

</div>

</div>

</body>
</html>

Fiz rapidim aqui..

 

Mas a grande sacada ai é usar cores transparentes (rgba).

 

Testa ai e me fala..

 

Boa sorte..

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

Bom dia,

 

Uma dica, quando for separar campos em grupos você pode utilizar a tag fieldset.

 

Desnecessário isso:

<p>Nome</p>
  <p>
    <label for="nome"></label>
    <input type="text" name="nome" id="nome" />
     </p>
  <p>Email</p>
  <p>

Tente assim:

 

<fieldset>
    <label for="nome">Nome</label>
    <input type="text" name="nome" id="nome" />
</fieldset>

Espero que ajude.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito