Pessoal seguinte eu precisava dar uma melhorada na organização da minha página pois ta saindo tudo amontoado do lado esquerdo e não sei fazer, preciso de umas dicas e tb material para estudar sobre isso. segue :
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Questionário 1</title>
</head>
<style type="text/css">
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
ul.none {
list-style-type: none;
margin-top: 0;
}
div.fieldwrapper {
width: 20%;
overflow: hidden;
padding: 1% 0;
}
div.fieldwrapper label.styled {
float: left;
width: 50%;
text-transform: uppercase;
font-weight: bold;
border-bottom: 1px solid blue;
margin-right: 1%;
}
div.fieldwrapper div.thefield {
float: left;
margin-bottom: 3%;
}
</style>
<body>
<html:form styleId="formInfoGerais" action="/salvaInfoGerais">
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%">
<tr>
<td width="50%">
<div class="fieldwrapper"><label class="styled">Sexo:</label>
<div class="thefield">
<ul class="none">
<li><html:radio property="infoGerais.sexo" value="1"><label>Feminino</label></html:radio></li>
<li><html:radio property="infoGerais.sexo" value="2"><label>Masculino</label></html:radio></li>
</ul>
</div>
</div>
</td>
<td>
<div class="fieldwrapper"><label class="styled">Idade:</label>
<div class="thefield">
<ul class="none">
<li><html:radio property="infoGerais.idade" value="1">Menos de 20 anos</html:radio></li>
<li><html:radio property="infoGerais.idade" value="2">Entre 20 e 25 anos</html:radio></li>
<li><html:radio property="infoGerais.idade" value="3">Entre 26 e 35 anos</html:radio></li>
<li><html:radio property="infoGerais.idade" value="4">Entre 36 e 45 anos</html:radio></li>
<li><html:radio property="infoGerais.idade" value="5">Entre 46li e 55 anos</html:radio></li>
<li><html:radio property="infoGerais.idade" value="6">Mais de 55 anos</html:radio></li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="fieldwrapper"><label class="styled">Escolaridade:</label>
<div class="thefield">
<ul class="none">
<li><html:radio property="infoGerais.escolaridade" value="1">Ensino Fundamental</html:radio></li>
<li><html:radio property="infoGerais.escolaridade" value="2">Ensino Médio Incompleto</html:radio></li>
<li><html:radio property="infoGerais.escolaridade" value="3">Ensino Médio Completo</html:radio></li>
<li><html:radio property="infoGerais.escolaridade" value="4">Ensino Superior Incompleto</html:radio></li>
<li><html:radio property="infoGerais.escolaridade" value="5">Ensino Superior Completo</html:radio></li>
<li><html:radio property="infoGerais.escolaridade" value="6">Pós-Graduação Incompleta</html:radio></li>
<li><html:radio property="infoGerais.escolaridade" value="7">Pós-Graduação Completa</html:radio></li>
<li><html:radio property="infoGerais.escolaridade" value="8">MBA</html:radio></li>
<li><html:radio property="infoGerais.escolaridade" value="9">Mestrado</html:radio></li>
<li><html:radio property="infoGerais.escolaridade" value="10">Doutorado</html:radio></li>
</ul>
</div>
</div>
<div class="fieldwrapper"><label class="styled">Tempo de Trabalho:</label>
<div class="thefield">
<ul class="none">
<li><html:radio property="infoGerais.ttrabalho" value="1">Menos de 2 anos</html:radio></li>
<li><html:radio property="infoGerais.ttrabalho" value="2">Entre 3 e 5 anos</html:radio></li>
<li><html:radio property="infoGerais.ttrabalho" value="3">Entre 6 e 10 anos</html:radio></li>
<li><html:radio property="infoGerais.ttrabalho" value="4">Entre 11 e 15 anos</html:radio></li>
<li><html:radio property="infoGerais.ttrabalho" value="5">Entre 16 e 20 anos</html:radio> </li>
<li><html:radio property="infoGerais.ttrabalho" value="6">Mais de 20 anos</html:radio></li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="fieldwrapper"><label class="styled">Ocupação:</label>
<div class="thefield">
<ul class="none">
<li><html:text styleId="txtOcupado" maxlength="30" property="infoGerais.ocupacao" /></li>
</ul>
</div>
</div>
</td>
</tr>
</table>
<br>
<button type="submit" onclick="avanca();">Avançar
</button>
</html:form>
<script type="text/javascript">
function avanca() {
var txtOcupado var txtOcupado = document.getElementById("txtOcupado").value;
if(soCaracter(txtOcupado)){
document.getElementById("formInfoGerais").submit();
}else{
alert("O campo ocupação deve ser preenchido somente com caracteres");
}
}
// Extraido: http://worldofbit
// Extraido: http://worldofbit.com/wob/index.php/javascript/validacao-de-campos-com-regex-e-javascript.html
//http://imasters.uol.com.br/artigo/2515/javascript/regular_expression/
function soCaracter(value) {
var regexTexto = /^[a-z' 'A-ZãÃáÁàÀêÊéÉèÈíÍìÌôÔõÕóÓòÒúÚùÙûÛçÇ.;:,ºª]+$/;
if (regexTexto.test(value)) {
return true;
} else {
return false;
}
}
</script>
</body>
</html>
