Les comparto un pequeño codigo de una calculadora binaria decimal implementada en http://peralimon.com/blogs/redes/19-calculadora-binario-decimal, contiene codigo css, php, lenguaje de etiquetado html y validaciones en javascript espero que les sirva saludos y éxitos
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.textophp{
text-decoration: none;
padding: 10px;
font-weight: 600;
font-size: 20px;
border-radius: 6px;
border: 2px solid #0016b0;
color: #0016b0;
background-color: #ffffff;
}
.boton{
text-decoration: none;
padding: 10px;
font-weight: 600;
font-size: 20px;
color: #ffffff;
background-color: #e0a127;
border-radius: 6px;
border: 2px solid #0016b0;
}
.boton:hover{
color: #e0a127;
background-color: #ffffff;
}
.texto{
text-decoration: none;
padding: 10px;
font-weight: 600;
font-size: 20px;
color: #ffffff;
background-color: #0016b0;
border-radius: 6px;
border: 2px solid #e0a127;
}
.texto:hover{
color: #0016b0;
background-color: #ffffff;
}
</style>
</head>
<body>
<form action = "binario.php" method="post">
<input type="text" name="valor" placeholder="Ingrese su número binario" onkeypress="return valida(event)" class="texto" autocomplete="off" required pattern="[01]+">
<input type="submit" name="resultado" value="Convertir decimal" class="boton">
</form>
<!-- VALIDACIÓN DE DATOS A INGRESAR -->
<script type="text/javascript">
function valida(e){
tecla = (document.all) ? e.keyCode : e.which;
if (tecla==8){ //Tecla de retroceso para borrar
return true;
}
patron =/[0-1]/;// solo acepta 0 y 1
tecla_final = String.fromCharCode(tecla);
return patron.test(tecla_final);
}
</script>
</body>
</html>
<?php
$i = 0;
$sum = 0;
$valor = isset($_POST['valor']) ? $_POST['valor'] : null ;
if($valor!='')
{
echo "<p class='textophp'> NÚMERO BINARIO INGRESADO: ".$valor.'<br/>';
$po = strlen($valor);
for ($i=1; $i <= $po; $i++)
{
$a = substr($valor, $i*-1,1);
$res = pow(2, $i-1);
if ($a==1) {
$sum = $sum + $res;
}
if($a!=1 & $a!=0) {
echo '1';}
}
echo "<p class='textophp'>NÚMERO DECIMAL RESULTANTE: ".$sum;
}
?>