<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container auth">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Información para solicitantes de plaza en niveles concertados para el curso 2015-2016</legend>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="checkboxesinfantil">Infantil</label>
<div class="col-md-4">
<label class="checkbox-inline" for="checkboxesinfantil-0">
<input type="checkbox" name="checkboxesinfantil" id="checkboxesinfantil-0" value="1">
1
</label>
<label class="checkbox-inline" for="checkboxesinfantil-1">
<input type="checkbox" name="checkboxesinfantil" id="checkboxesinfantil-1" value="2">
2
</label>
<label class="checkbox-inline" for="checkboxesinfantil-2">
<input type="checkbox" name="checkboxesinfantil" id="checkboxesinfantil-2" value="3">
3
</label>
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="checkboxesprimaria">Primaria</label>
<div class="col-md-4">
<label class="checkbox-inline" for="checkboxesprimaria-0">
<input type="checkbox" name="checkboxesprimaria" id="checkboxesprimaria-0" value="1">
1
</label>
<label class="checkbox-inline" for="checkboxesprimaria-1">
<input type="checkbox" name="checkboxesprimaria" id="checkboxesprimaria-1" value="2">
2
</label>
<label class="checkbox-inline" for="checkboxesprimaria-2">
<input type="checkbox" name="checkboxesprimaria" id="checkboxesprimaria-2" value="3">
3
</label>
<label class="checkbox-inline" for="checkboxesprimaria-3">
<input type="checkbox" name="checkboxesprimaria" id="checkboxesprimaria-3" value="4">
4
</label>
<label class="checkbox-inline" for="checkboxesprimaria-4">
<input type="checkbox" name="checkboxesprimaria" id="checkboxesprimaria-4" value="5">
5
</label>
<label class="checkbox-inline" for="checkboxesprimaria-5">
<input type="checkbox" name="checkboxesprimaria" id="checkboxesprimaria-5" value="6">
6
</label>
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="checkboxeseso">ESO</label>
<div class="col-md-4">
<label class="checkbox-inline" for="checkboxeseso-0">
<input type="checkbox" name="checkboxeseso" id="checkboxeseso-0" value="1">
1
</label>
<label class="checkbox-inline" for="checkboxeseso-1">
<input type="checkbox" name="checkboxeseso" id="checkboxeseso-1" value="2">
2
</label>
<label class="checkbox-inline" for="checkboxeseso-2">
<input type="checkbox" name="checkboxeseso" id="checkboxeseso-2" value="3">
3
</label>
<label class="checkbox-inline" for="checkboxeseso-3">
<input type="checkbox" name="checkboxeseso" id="checkboxeseso-3" value="4">
4
</label>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputnombre">Nombre</label>
<div class="col-md-6">
<input id="textinputnombre" name="textinputnombre" type="text" placeholder="nombre" class="form-control input-md" required="">
<span class="help-block">Introduzca el nombre del alumno</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputapellidos">Apellidos</label>
<div class="col-md-6">
<input id="textinputapellidos" name="textinputapellidos" type="text" placeholder="apellidos" class="form-control input-md" required="">
<span class="help-block">Introduzca los apellidos del alumno</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputfechanacimiento">Fecha de nacimiento</label>
<div class="col-md-6">
<input id="textinputfechanacimiento" name="textinputfechanacimiento" type="text" placeholder="fecha de nacimiento" class="form-control input-md" required="">
<span class="help-block">Introduzca la fecha de nacimiento del alumno</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputdomicilio">Domicilio</label>
<div class="col-md-6">
<input id="textinputdomicilio" name="textinputdomicilio" type="text" placeholder="Plaza, Calle, número" class="form-control input-md" required="">
<span class="help-block">Introduzca la dirección</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputnombrepadre">Nombre y Apellidos Padre o tutor legal</label>
<div class="col-md-6">
<input id="textinputnombrepadre" name="textinputnombrepadre" type="text" placeholder="Nombre y Apellidos Padre o tutor legal" class="form-control input-md">
<span class="help-block">Introduzca el nombre y apellidos del padre o tutor legal</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputtelefonofijopadre">Teléfono fijo</label>
<div class="col-md-4">
<input id="textinputtelefonofijopadre" name="textinputtelefonofijopadre" type="text" placeholder="Teléfono fijo" class="form-control input-md">
<span class="help-block">Introduzca el teléfono fijo</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputtelefonomovilpadre">Teléfono movil</label>
<div class="col-md-4">
<input id="textinputtelefonomovilpadre" name="textinputtelefonomovilpadre" type="text" placeholder="Teléfono movil" class="form-control input-md">
<span class="help-block">Introduzca el teléfono movil</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputnombremadre">Nombre y Apellidos Madre o tutora legal</label>
<div class="col-md-6">
<input id="textinputnombremadre" name="textinputnombremadre" type="text" placeholder="Nombre y Apellidos Madre o tutora legal" class="form-control input-md">
<span class="help-block">Introduzca el nombre y apellidos de la madre o tutora legal</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputtelefonofijomadre">Teléfono movil</label>
<div class="col-md-4">
<input id="textinputtelefonofijomadre" name="textinputtelefonofijomadre" type="text" placeholder="Teléfono movil" class="form-control input-md">
<span class="help-block">Introduzca el teléfono movil</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputtelefonomovilmadre">Teléfono movil</label>
<div class="col-md-4">
<input id="textinputtelefonomovilmadre" name="textinputtelefonomovilmadre" type="text" placeholder="Teléfono movil" class="form-control input-md">
<span class="help-block">Introduzca el teléfono movil</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputhermanosinfantil">Educación infantil</label>
<div class="col-md-5">
<input id="textinputhermanosinfantil" name="textinputhermanosinfantil" type="text" placeholder="Nº hermanos en Infantil" class="form-control input-md">
<span class="help-block">Introduzca el nº de hermanos en educación infantil</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputhermanosprimaria">Educación Primaria</label>
<div class="col-md-5">
<input id="textinputhermanosprimaria" name="textinputhermanosprimaria" type="text" placeholder="Nº hermanos en Primaria" class="form-control input-md">
<span class="help-block">Introduzca el nº de hermanos en educación primaria</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputhermanoseso">ESO</label>
<div class="col-md-5">
<input id="textinputhermanoseso" name="textinputhermanoseso" type="text" placeholder="Nº hermanos en ESO" class="form-control input-md">
<span class="help-block">Introduzca el nº de hermanos en educación secundaria</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputhermanosbachillerato">Bachillerato</label>
<div class="col-md-5">
<input id="textinputhermanosbachillerato" name="textinputhermanosbachillerato" type="text" placeholder="Nº hermanos en Bachillerato" class="form-control input-md">
<span class="help-block">Introduzca el nº de hermanos en bachillerato</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinputcentroprocedencia">Centro del que procede</label>
<div class="col-md-6">
<input id="textinputcentroprocedencia" name="textinputcentroprocedencia" type="text" placeholder="Centro del que procede" class="form-control input-md">
<span class="help-block">Introduzca el centro del que procede</span>
</div>
</div>
<!-- Multiple Radios -->
<div class="form-group">
<label class="col-md-4 control-label" for="radiosinformacionbilingue">¿Conoce la información sobre el proyecto bilingüe que desarrolla el colegio Chamberí?</label>
<div class="col-md-4">
<div class="radio">
<label for="radiosinformacionbilingue-0">
<input type="radio" name="radiosinformacionbilingue" id="radiosinformacionbilingue-0" value="1" checked="checked">
Si
</label>
</div>
<div class="radio">
<label for="radiosinformacionbilingue-1">
<input type="radio" name="radiosinformacionbilingue" id="radiosinformacionbilingue-1" value="2">
No
</label>
</div>
</div>
</div>
<!-- Multiple Radios -->
<div class="form-group">
<label class="col-md-4 control-label" for="radiosprocedenciabilingue">¿En el centro del que procede ha recibido en años anteriores educación bilingüe?</label>
<div class="col-md-4">
<div class="radio">
<label for="radiosprocedenciabilingue-0">
<input type="radio" name="radiosprocedenciabilingue" id="radiosprocedenciabilingue-0" value="1" checked="checked">
Si
</label>
</div>
<div class="radio">
<label for="radiosprocedenciabilingue-1">
<input type="radio" name="radiosprocedenciabilingue" id="radiosprocedenciabilingue-1" value="2">
No
</label>
</div>
</div>
</div>
<!-- Multiple Radios -->
<div class="form-group">
<label class="col-md-4 control-label" for="radiosproyectodigital">¿Conoce, a través de nuestra web, la información sobre este proyecto en ESO?</label>
<div class="col-md-4">
<div class="radio">
<label for="radiosproyectodigital-0">
<input type="radio" name="radiosproyectodigital" id="radiosproyectodigital-0" value="1" checked="checked">
Si
</label>
</div>
<div class="radio">
<label for="radiosproyectodigital-1">
<input type="radio" name="radiosproyectodigital" id="radiosproyectodigital-1" value="2">
No
</label>
</div>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">¿Por qué están interesados en inscribir a su hijo/a en este centro?</label>
<div class="col-md-4">
<textarea class="form-control" id="textarea" name="textarea"></textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Enviar</button>
</div>
</div>
</fieldset>
</form>
</div>
.margin-top-20{
margin-top: 20px;
}
body{
background:url('http://www.wallpaperup.com/uploads/wallpapers/2012/08/30/12087/3574f899daef41d2f145eba13ff7840f.jpg');
background-size:100% 100%;
background-attachment: fixed;
background-repeat:no-repeat;
font-family: 'Open Sans', sans-serif;
padding-bottom: 40px;
}
.auth h1{
color:#fff!important;
font-weight:300;
font-family: 'Open Sans', sans-serif;
}
.auth h1 span{
font-size:21px;
display:block;
padding-top: 20px;
}
.auth .auth-box legend{
color:#fff;
border:none;
font-weight:300;
font-size:24px;
}
.auth .auth-box{
background-color:#fff;
max-width:460px;
margin:0 auto;
border:1px solid rgba(255, 255, 255, 0.4);;
background-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.2);
margin-top:40px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.32);
-moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.32);
box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.32);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
}
@media(max-width:460px){
.auth .auth-box{
margin:0 10px;
}
}
.auth .auth-box input::-webkit-input-placeholder { /* WebKit browsers */
color: #fff;
font-weight:300;
}
.auth .auth-box input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fff;
font-weight:300;
}
.auth .auth-box input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fff;
font-weight:300;
}
.auth .auth-box input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #fff;
font-weight:300;
}
.auth span.input-group-addon,
.input-group-btn button{
border:none;
background: #fff!important;
color:#000!important;
}
.auth form{
font-weight:300!important;
}
.auth form input[type="text"],
.auth form input[type="password"],
.auth form input[type="email"],
.auth form input[type="search"]{
border:none;
padding:10px 0 10px 0;
background-color: rgba(255, 255, 255, 0)!important;
background: rgba(255, 255, 255, 0);
color:#fff;
font-size:16px;
border-bottom:1px dotted #fff;
border-radius:0;
box-shadow:none!important;
height:auto;
}
.auth textarea{
background-color: rgba(255, 255, 255, 0)!important;
color:#fff!important;
}
.auth input[type="file"] {
color:#fff;
}
.auth form label{
color:#fff;
font-size:21px;
font-weight:300;
}
/*for radios & checkbox labels*/
.auth .radio label,
.auth label.radio-inline,
.auth .checkbox label,
.auth label.checkbox-inline{
font-size: 14px;
}
.auth form .help-block{
color:#fff;
}
.auth form select{
background-color: rgba(255, 255, 255, 0)!important;
background: rgba(255, 255, 255, 0);
color:#fff!important;
border-bottom:1px solid #fff!important;
border-radius:0;
box-shadow:none;
}
.auth form select option{
color:#000;
}
/*multiple select*/
.auth select[multiple] option,
.auth select[size] {
color:#fff!important;
}
/*Form buttons*/
.auth form .btn{
background:none;
-webkit-transition: background 0.2s ease-in-out;
-moz-transition: background 0.2s ease-in-out;
-ms-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}
.auth form .btn-default{
color:#fff;
border-color:#fff;
}
.auth form .btn-default:hover{
background:rgba(225, 225, 225, 0.3);
color:#fff;
border-color:#fff;
}
.auth form .btn-primary:hover{
background:rgba(66, 139, 202, 0.3);
}
.auth form .btn-success:hover{
background:rgba(92, 184, 92, 0.3);
}
.auth form .btn-info :hover{
background:rgba(91, 192, 222, 0.3);
}
.auth form .btn-warning:hover{
background:rgba(240, 173, 78, 0.3);
}
.auth form .btn-danger:hover{
background:rgba(217, 83, 79, 0.3);
}
.auth form .btn-link{
border:none;
color:#fff;
padding-left:0;
}
.auth form .btn-link:hover{
background:none;
}
.auth label.label-floatlabel {
font-weight: 300;
font-size: 11px;
color:#fff;
left:0!important;
top: 1px!important;
}
(function(e,t,n,r){function o(t,n){this.$element=e(t);this.settings=e.extend({},s,n);this.init()}var i="floatlabel",s={slideInput:true,labelStartTop:"20px",labelEndTop:"10px",transitionDuration:.3,transitionEasing:"ease-in-out",labelClass:"",typeMatches:/text|password|email|number|search|url/};o.prototype={init:function(){var e=this;var n={"-webkit-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,"-moz-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,"-o-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,"-ms-transition":"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing,transition:"all "+this.settings.transitionDuration+"s "+this.settings.transitionEasing};if(this.$element.prop("tagName").toUpperCase()!=="INPUT"){return}if(!this.settings.typeMatches.test(this.$element.attr("type"))){return}var r=this.$element.attr("id");if(!r){r=Math.floor(Math.random()*100)+1;this.$element.attr("id",r)}var i=this.$element.attr("placeholder");var s=this.$element.data("label");var o=this.$element.data("class");if(!o){o=""}if(!i||i===""){i="You forgot to add placeholder attribute!"}if(!s||s===""){s=i}this.inputPaddingTop=parseFloat(this.$element.css("padding-top"))+10;this.$element.wrap('<div class="floatlabel-wrapper" style="position:relative"></div>');this.$element.before('<label for="'+r+'" class="label-floatlabel '+this.settings.labelClass+" "+o+'">'+s+"</label>");this.$label=this.$element.prev("label");this.$label.css({position:"absolute",top:this.settings.labelStartTop,left:this.$element.css("padding-left"),display:"none","-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"});if(!this.settings.slideInput){this.$element.css({"padding-top":this.inputPaddingTop})}this.$element.on("keyup blur change",function(t){e.checkValue(t)});t.setTimeout(function(){e.$label.css(n);e.$element.css(n)},100);this.checkValue()},checkValue:function(e){if(e){var t=e.keyCode||e.which;if(t===9){return}}var n=this.$element.data("flout");if(this.$element.val()!==""){this.$element.data("flout","1")}if(this.$element.val()===""){this.$element.data("flout","0")}if(this.$element.data("flout")==="1"&&n!=="1"){this.showLabel()}if(this.$element.data("flout")==="0"&&n!=="0"){this.hideLabel()}},showLabel:function(){var e=this;e.$label.css({display:"block"});t.setTimeout(function(){e.$label.css({top:e.settings.labelEndTop,"-moz-opacity":"1","-khtml-opacity":"1","-webkit-opacity":"1",opacity:"1"});if(e.settings.slideInput){e.$element.css({"padding-top":e.inputPaddingTop})}},50)},hideLabel:function(){var e=this;e.$label.css({top:e.settings.labelStartTop,"-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"});if(e.settings.slideInput){e.$element.css({"padding-top":parseFloat(e.inputPaddingTop)-10})}t.setTimeout(function(){e.$label.css({display:"none"})},e.settings.transitionDuration*1e3)}};e.fn[i]=function(t){return this.each(function(){if(!e.data(this,"plugin_"+i)){e.data(this,"plugin_"+i,new o(this,t))}})}})(jQuery,window,document)
$(document).ready(function(){
//Floatlabel
$('input').floatlabel();
$('a, button').click(function(e){
e.preventDefault();
});
});
