<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Jquery/jquery-3.3.1.min.js"></script>
<script src="Highcharts 6.1.0/code/highcharts.js"></script>
<link rel="stylesheet"  href="BootStrap 4.0.1/css/bootstrap.min.css">
<link rel="stylesheet"  href="estilos.css">
<script src="BootStrap 4.0.1/js/bootstrap.min.js"></script> 
</head>
<body>
<div class="container-fluid"><!--Comienzo del Div del Container-->
<form name="IngresarDatos" action="Graficas.php" method="get">

	<center><h2>Datos Basicos de Control</h2></center>
    <div class="row"><!--Inicio del div row-->
    	<div class="col-sm-2"><!--Inicio del div control-->
        	<label>Ingrese el control</label><br>
            <input class="CamposBasicos" type="text" name="CapNControl" id="Var0">
        </div><!--Fin del div Control -->
        <div class="col-sm-2"><!--Inicio del div ruta 1-->
        	<label>Ingrese la ruta uno</label><br>
            <input class="CamposBasicos" type="text" name="CapRuta1" id="Var1">
        </div><!--Fin del div ruta 1-->
        <div class="col-sm-2"><!--Inicio del div ruta 2-->
        	<label>Ingrese la ruta dos</label><br>
	        <input class="CamposBasicos" type="text" name="CapRuta2" id="Var2">
        </div><!--Fin del div ruta 2-->
        <div class="col-sm-2"><!--Inicio del div ruta 3-->
        	<label>Ingrese la ruta tres</label><br>
            <input class="CamposBasicos" type="text" name="CapRuta3" id="Var3">
        </div><!--Fin del div ruta 3-->
        <div class="col-sm-2"><!--Inicio del div ruta 4-->
        	<label>Ingrese la ruta cuatro</label><br>
            <input class="CamposBasicos" type="text" name="CapRuta4" id="Var4">
        </div><!--Fin del div ruta 4-->
        <div class="col-sm-2"><!--Inicio del div ruta 5-->
            <label>Ingrese la ruta cinco</label><br>
            <input class="CamposBasicos" type="text" name="CapRuta5" id="Var5">
        </div><!--Fin del div ruta 5-->	
     </div><!--Fin del div row-->
        
	<center><h2>Estadisticas de Kilometraje Teorico</h2></center>
    <div class="row"><!--Inicio row estadisticas-->
    	<div class="col-sm-2"><!--Inicio col-sm Km Teorico ruta1-->
        <label>KMs Teoricos Ruta 1</label>
        <input class="CamposKmTeoricos" type="number" name="CapKMTeo1" id="Var11">
        </div><!--Fin col-sm Km Teorico ruta1-->
        
        <div class="col-sm-2"><!--Inicio col-sm Km Teorico ruta2-->
        <label>KMs Teoricos Ruta 2</label>
        <input class="CamposKmTeoricos" type="number" name="CapKMTeo2" id="Var22">
        </div><!--Fin col-sm Km Teorico ruta2-->
        
        <div class="col-sm-2"><!--Inicio col-sm Km Teorico ruta3-->
        <label>KMs Teoricos Ruta 3</label>
        <input class="CamposKmTeoricos" type="number" name="CapKMTeo3" id="Var33">
        </div><!--Fin col-sm Km Teorico ruta3-->
        
        <div class="col-sm-2"><!--Inicio col-sm Km Teorico ruta4-->
        <label>KMs Teoricos Ruta 4</label>
        <input class="CamposKmTeoricos" type="number" name="CapKMTeo4" id="Var44">
        </div><!--Fin col-sm Km Teorico ruta4-->
        
        <div class="col-sm-2"><!--Inicio col-sm Km Teorico ruta5-->
        <label>KMs Teoricos Ruta 5</label>
        <input class="CamposKmTeoricos" type="number" name="CapKMTeo5" id="Var55">
        </div><!--Fin col-sm Km Teorico ruta5-->
    
    </div><!--Fin row estadisticas-->
    <center><h2>Estadisticas de Kilometraje Real</h2></center>
    <div class="row"><!--Inicio row estadisticas realizadas-->
		<div class="col-sm-2"><!--Inicio col-sm Km realizados ruta1-->
        <label>KMs Realizados Ruta 1</label>
        <input type="number" class="CamposKmRealizados" id="Var111" name="CapKMRea1">
        </div><!--Fin col-sm Km realizados ruta1-->

    	<div class="col-sm-2"><!--Inicio col-sm Km realizados ruta2-->
        <label>KMs Realizados Ruta 2</label>
        <input type="number" class="CamposKmRealizados" id="Var222" name="CapKMRea2">
        </div><!--Fin col-sm Km realizados ruta2-->

    	<div class="col-sm-2"><!--Inicio col-sm Km realizados ruta3-->
        <label>KMs Realizados Ruta 3</label>
        <input type="number" class="CamposKmRealizados" id="Var333" name="CapKMRea3">
        </div><!--Fin col-sm Km realizados ruta3-->
 
   	 	<div class="col-sm-2"><!--Inicio col-sm Km realizados ruta4-->
        <label>KMs Realizados Ruta 4</label>
        <input type="number" class="CamposKmRealizados" id="Var444" name="CapKMRea4">
        </div><!--Fin col-sm Km realizados ruta4-->
  
    	<div class="col-sm-2"><!--Inicio col-sm Km realizados ruta5-->
        <label>KMs Realizados Ruta 5</label>
        <input type="number" class="CamposKmRealizados" id="Var555" name="CapKMRea5">
        </div><!--Fin col-sm Km realizados ruta5-->
    </div><!--Fin row estadisticas realizadas-->

    <center><h2>Km Eliminados por el control</h2></center>
    <div class="row"><!--Inicio row Km eliminados por ruta-->
		
        <div class="col-sm-2"><!--Inicio col-sm Km eliminados por ruta1-->
        <label>Km Eliminados Ruta 1</label>
        <input type="number" class="CamposKmEliminados" name="KmSupr1">
        </div><!--Fin col-sm Km eliminados por ruta1-->
        
        <div class="col-sm-2"><!--Inicio col-sm Km eliminados por ruta1-->
        <label>Km Eliminados Ruta 2</label>
        <input type="number" class="CamposKmEliminados" name="KmSupr2">
        </div><!--Fin col-sm Km eliminados por ruta2-->
        
        <div class="col-sm-2"><!--Inicio col-sm Km eliminados por ruta3-->
        <label>Km Eliminados Ruta 3</label>
        <input type="number" class="CamposKmEliminados" name="KmSupr3">
        </div><!--Fin col-sm Km eliminados por ruta3-->
        
        <div class="col-sm-2"><!--Inicio col-sm Km eliminados por ruta4-->
        <label>Km Eliminados Ruta 4</label>
        <input type="number" class="CamposKmEliminados" name="KmSupr4">
        </div><!--Fin col-sm Km eliminados por ruta4-->
        
        <div class="col-sm-2"><!--Inicio col-sm Km eliminados por ruta5-->
        <label>Km Eliminados Ruta 5</label>
        <input type="number" class="CamposKmEliminados" name="KmSupr5">
        </div><!--Fin col-sm Km eliminados por ruta5-->
    </div><!--Fin row Km eliminados por ruta-->
    
    <center><h2>Porcentajes Cumplidos Por Ruta</h2></center>
    
    <div class="row"><!--Inicio del row porcentajes-->
    	<div class="col-sm-2"><!--Inicio del col-sm de porcentajes-->
        <label>Ingrese el porcentaje total hecho por el control</label>
        <input type="number" class="CamposPorcentajes" name="Por0">
        </div><!--Fin col-sm -->
        
        <div class="col-sm-2"><!--Inicio del col-sm de porcentajes-->
        <label>Ingrese Porcentaje Ruta 1</label>
        <input type="number" class="CamposPorcentajes" name="Por1">
        </div><!--Fin col-sm -->
        
        <div class="col-sm-2"><!--Inicio del col-sm de porcentajes-->
        <label>Ingrese Porcentaje Ruta 2</label>
        <input type="number" class="CamposPorcentajes" name="Por2">
        </div><!--Fin col-sm -->
        
        <div class="col-sm-2"><!--Inicio del col-sm de porcentajes-->
        <label>Ingrese Porcentaje Ruta 3</label>
        <input type="number" class="CamposPorcentajes" name="Por3">
        </div><!--Fin col-sm -->
        
        <div class="col-sm-2"><!--Inicio del col-sm de porcentajes-->
        <label>Ingrese Porcentaje Ruta 4</label>
        <input type="number" class="CamposPorcentajes" name="Por4">
        </div><!--Fin col-sm -->
        
        <div class="col-sm-2"><!--Inicio del col-sm de porcentajes-->
        <label>Ingrese Porcentaje Ruta 5</label>
        <input type="number" class="CamposPorcentajes" name="Por5">
        </div><!--Fin col-sm -->
    </div><!--fin del row-->
    
    
    
   <br> <input type="submit" >
</form>
</div><!--Fin del div container-->


</body>
</html>
