Opa, tudo bem? Cara achei bem interessante o que está fazendo, quis dar uma opiniao aqui hehe. Eu faria algo proximo desse codigo:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://jquery.marciob.com/plugins/jquery.multiselect.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jquery.marciob.com/plugins/jquery.multiselect.min.js"></script>
<script type="text/javascript" src="http://jquery.marciob.com/plugins/jquery.uniqueid.js"></script>
<script type="text/javascript" src="http://jquery.marciob.com/plugins/jquery.inputfile.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
font-family: "century gothic";
font-size: 0.70em;
margin: 10px;
padding: 0px;
}
label {
float:left;
width:100px;
display:block;
}
form {
margin-left:50px;
line-height:20px
}
input, .ui-multiselect {
margin-bottom:10px;
}
div.radios, div.checks, div.file {
float:left;
}
br {
clear:both;
}
</style>
</head>
<body>
<form action="#" method="POST">
<h2>Security Settings</h2>
<label for="name">Name</label>
<input type="text" name="name" required="required" />
<br />
<label for="password">Password</label>
<input type="password" name="password" required="required" />
<br />
<label for="gender">Gender</label>
<div class="radios">
<input type="radio" id="gender-male" name="gender" value="male" /> Male<br />
<input type="radio" id="gender-female" name="gender" value="female" /> Female
</div>
<br />
<label for="vehicles">Vehicles</label>
<div class="checks">
<input id="vehicle-bike" type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input id="vehicle-motorcycle" type="checkbox" name="vehicle" value="Motorcycle" /> I have a motocycle<br />
<input id="vehicle-car" type="checkbox" name="vehicle" value="Car" /> I have a car<br />
<input id="vehicle-truck" type="checkbox" name="vehicle" value="Truck" /> I have a truck<br />
<input id="vehicle-airplane" type="checkbox" name="vehicle" value="Airplane" /> I have a airplane<br />
</div>
<br />
<label for="salary">Salary</label>
<select class="single" name="salary" size="5">
<option value="1">U$ 1.000,00</option>
<option value="2">U$ 2.500,00</option>
<option value="3">U$ 5.000,00</option>
<option value="4">U$ 10.000,00</option>
<option value="5">More than U$ 10.000,00</option>
</select>
<br />
<label for="salary">Languages</label>
<select class="multiple" name="languages[]" multiple="multiple" size="5">
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
<option value="Italian">Italian</option>
<option value="Chinese">Chinese</option>
<option value="Japanese">Japanese</option>
<option value="Russian">Russian</option>
<option value="Esperanto">Esperanto</option>
</select>
<br />
<label for="resume">Resume</label>
<div class="file">
<input type="file" name="resume" class="mab-ui-button ui-state-default ui-corner-all"/>
</div>
<br />
<label for="observations">More informations</label>
<textarea rows="5" cols="20" name="observation"></textarea>
<br /><br />
<button type="button" class="mab-ui-button ui-state-default ui-corner-all">Cancel</button>
<button type="reset" class="mab-ui-button ui-state-default ui-corner-all">Reset</button>
<button type="submit" class="mab-ui-button ui-state-default ui-corner-all">Submit</button>
</form>
</body>
</html>
Não vi sentido em usar as tags dl e dt, não são adequadas a esse caso. Se o que voce queria era um container para o label + campo creio que um div seria o mais adequado. Embora eu não tenha usado essa abordagem (fiz com br).
O uso do br não quebra a semântica, pois o objetivo da tag é inserir uma quebra de linha. É mais simples que usar um container, mas um div realmente poderia deixar o layout mais “rebuscado” e fácil de manipular via css.
Outro detalhe que nao mudei ai, mas o atributo for dos labels precisa ser igual ao “id” do elemento a que ele se refere, nao ao name.
Parabens cara, espero ter ajudado.
