Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Senhores,
Boa tarde.
Sou programador e vivendo a mudança na vida de um colega que ficou cego, busquei conhecer mais sobre acessibilidade e aplicar os conceitos em minha profissão. Conciliando a vontade com um trabalho voluntário que apareceu, montei o formulário abaixo, mas o posicionamento dos radios "<input type='radio'>" está horível. Como estou aperfeiçoando o conhecimento em CSS, será que alguém poderia ajudar?
Fiquem à vontade para criticar.
Compromisso em retornar a solução completa e disponibilizá-la nos scripts se houve interesse.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Cadastro de voluntários</title>
<!-- <link type="text/css" rel="stylesheet" href="css/cadastro.css" /> -->
<style> font-family:'Times New Roman',Times,serif;
font-size:12px;
}div{
margin:0 auto;
width:400px;
padding:14px;
}form fieldset{
width:390px;
padding:0;
}form fieldset fieldset{
width:380px;
padding:0;
}form fieldset label{
color:#000000;
font:10px arial, tahoma, sans-serif;
position:relative;
}form fieldset label input{
position:absolute;
right:0;
}
#cadastro{
border:solid 2px #DEDEDE;
}#cadastro h1{
font-size:14px;
font-weight:bold;
font-weight:bold;
font-weight:bold;
font-weight:bold;
margin-bottom:8px;
}#cadastro p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #dedede;
padding-bottom:10px;
}#cadastro label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}#cadastro .ajuda{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}#cadastro input{
float:left;
width:200px;
margin:2px 0 30px 10px;
}#cadastro button{
clear:both;
margin-left:150px;
background:#888888;
color:#FFFFFF;
border:solid 1px #666666;
font-size:11px;
font-weight:bold;
padding:4px 6px;
}.spacer{clear:both; height:1px;}
</style>
</head>
<body>
<div id="cadastro">
<form id="frmcadastro" name="frmcadastro" method="post" action="">
<h1>Título</h1>
<p>Cadastro de volutários, congressistas e caravanas</p>
<label>Nome da paróquia
<span class="ajuda">Informe a paróquia</span>
</label>
<input type="text" id="nom_paroquia" name="nom_paroquia" value="{nom_paroquia}">
<label>Nome do pároco
<span class="ajuda">Informe o nome do pároco</span>
</label>
<input type="text" id="nom_paroco" name="nom_paroco" value="{nom_paroco}">
<label>Nome do voluntário
<span class="ajuda">Informe o nome completo do voluntário</span>
</label>
<input type="text" id="nom_voluntario" name="nom_voluntario" value="{nom_voluntario}">
<label>Endereço
<span class="ajuda">Informe o endereço do voluntário</span>
</label>
<input type="text" id="des_endereco" name="des_endereco" value="{des_endereco}">
<label>Telefone
<span class="ajuda">Informe o número do telefone no formato (6199999999)</span>
</label>
<input type="text" id="num_telefone" name="num_telefone" value="{num_telefone}">
<label>Telefone
<span class="ajuda">Informe o número do celular no formato (6199999999)</span>
</label>
<input type="text" id="num_celular" name="num_celular" value="{num_celular}">
<label>E-mail
<span class="ajuda">Informe o e-mail principal do voluntário</span>
</label>
<input type="text" id="eml_principal" name="eml_principal" value="{eml_principal}">
<fieldset>
<legend>Tipos de voluntariado</legend>
<label for="tip_voluntariado">
<input type="radio" name="tip_voluntariado" value="R">Recepção
</label>
<label>
<input type="radio" name="tip_voluntariado" value="M">Motorista
</label>
<label>
<input type="radio" name="tip_voluntariado" value="S">Serviços gerais
</label>
<label>
<input type="radio" name="tip_voluntariado" value="H">Hospedagem
</label>
</fieldset>
<fieldset>
<legend>Características da hospedagem</legend>
<fieldset class="opcoes">
<legend> Tem disponibilidade para: </legend>
<label>1 pessoa
<input type="radio" name="tip_voluntariado" value="1">
</label>
<label>2 pessoas
<input type="radio" name="tip_voluntariado" value="2">
</label>
<label>Casal
<input type="radio" name="tip_voluntariado" value="C">
</label>
<label>Mais de duas pessoas
<input type="radio" name="tip_voluntariado" value="M">
</label>
</fieldset>
<fieldset>
<legend> Pode hospedar: </legend>
<label>1 pessoa
<input type="radio" name="tip_voluntariado" value="1">
</label>
<label>2 pessoas
<input type="radio" name="tip_voluntariado" value="2">
</label>
<label>Casal
<input type="radio" name="tip_voluntariado" value="C">
</label>
<label>Mais de duas pessoas
<input type="radio" name="tip_voluntariado" value="M">
</label>
</fieldset>
<fieldset>
<legend> Disponibilidade para oferecer: </legend>
<label>1 pessoa
<input type="radio" name="tip_voluntariado" value="1">
</label>
<label>2 pessoas
<input type="radio" name="tip_voluntariado" value="2">
</label>
<label>Casal
<input type="radio" name="tip_voluntariado" value="C">
</label>
<label>Mais de duas pessoas
<input type="radio" name="tip_voluntariado" value="M">
</label>
</fieldset>
<fieldset>
<legend> Disponibilidade de veículo de transporte: </legend>
<label>1 pessoa
<input type="radio" name="tip_voluntariado" value="1">
</label>
<label>2 pessoas
<input type="radio" name="tip_voluntariado" value="2">
</label>
<label>Casal
<input type="radio" name="tip_voluntariado" value="C">
</label>
<label>Mais de duas pessoas
<input type="radio" name="tip_voluntariado" value="M">
</label>
</fieldset>
</fieldset>
<fieldset>
<legend> Informações: </legend>
<label>E-mail: email@gmail.com</label>
<label>www.site.org.br</label>
</fieldset>
<button type="submit">Enviar</button>
<div class="spacer"></div>
</form>
</div>
</body>
</html>Carregando comentários...