isacosta.net » the geek side
24.5.06
categorias: ,
Como não tem sido habitual fazer formulários, nunca lhes prestei a devida atenção no que respeita à sua formatação e estrutura, até que há uns dias atrás, recebi uma chamada de atenção sobre um dos HTMLs que tinha enviado para produção, devido ao incumprimento de uma das regras da "casa": estava a usar tabelas, e para além disso, havia disparidades no comprimento dos campos.
Bem, não fui de modas e recorri ao meu bom amigo google para providenciar-me uma solução para o meu problema. Das que encontrei, esta foi a que me pareceu mais fácil de implementar, e até agora, so far so good!

XHTML
<form>

<label for="nome">Nome</label>
<input id="nome" name="nome" /><br />

<label for="email">Email</label>
<input id="email" name="email" /><br />

<label for="telefone">Telefone</label>
<input id="telefone" name="telefone" class="smallinput" /><br />

<label for="assunto">Assunto</label>
<textarea id="assunto" name="assunto" cols="20" rows="3"></textarea><br />

<input type="submit" name="submitbutton" value="Enviar" />

</form>

CSS
input, label, textarea {
display: block;
float: left;
margin-bottom: 5px;
width:230px;
}
textarea {
height:40px
}
label {
text-align: left;
width: 80px;
}
br {
clear: left;
}
.smallinput {
width: 115px;
}

Sites recomendados:
Definição de CSS na wikipedia
link do postPor Isa, às 13:22  comentar

 

Isa. Webdesigner, geek, apple fangirl assumida, necessita tanto de uma ligação à internet como do ar que respira. Adepta das novas tecnologias e sempre atenta às novidades!

online