Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <section id="agenda" class="secao">
        <div class="content rt">
            <div class="display">
                <h3>agende sua visita</h3>
                
                <div class="campo">
                    <div class="campo-inteiro">
                        <input class="valida" data-type="text" type="text" name="nome" alt="nome" autocomplete="off" required onChange="val()" />
                        <div class="placeholder">nome completo</div>
                        
                        <div class="descricao bdr">
                            Precisamos de seu nome completo para validar a participação
                            <img src="http://www.areapropaganda.com/teste/seta.svg" class="seta" />
                        </div>
                        <div class="alerta spr spr-inputs"></div>
                    </div>
                </div> 
                
                <div class="campo">
                    <div class="campo-metade" id="nascimento">
                        <input class="valida" data-type="number" type="number" name="nascimento" alt="nascimento" autocomplete="off" required maxlength="8" onKeyPress="return digitos(event, this);" onChange="val()" />
                        <div class="placeholder">Data de nascimento</div>
                        
                        <div class="descricao bdr">
                            Muito importante para o cadastro <span class="importante">(somente números)</span>
                            <img src="http://www.areapropaganda.com/teste/seta.svg" class="seta" />
                        </div>
                        <div class="alerta spr spr-inputs"></div>
                    </div>
                    
                    <div class="campo-metade">
                        <input class="valida" data-type="number" type="number" name="telefone" alt="telefone" autocomplete="off" required  maxlength="11" onKeyPress="return digitos(event, this);" onChange="val()"/>
                        <div class="placeholder">Telefone</div>
                        
                        <div class="descricao bdr">
                            Entraremos em contato com você <span class="importante">(somente números)</span>
                            <img src="http://www.areapropaganda.com/teste/seta.svg" class="seta" />
                        </div>
                        <div class="alerta spr spr-inputs"></div>
                    </div>
                </div>
                
                <div class="campo">
                    <div class="campo-inteiro">
                        <input class="valida" data-type="email" type="email" name="email" alt="email" autocomplete="off" required onChange="val()"/>
                        <div class="placeholder">Endereço de e-mail</div>
                        
                        <div class="descricao bdr">
                           Validaremos sua participação junto a instituição
                            <img src="http://www.areapropaganda.com/teste/seta.svg" class="seta" />
                        </div>
                        <div class="alerta spr spr-inputs"></div>
                    </div>
                </div> 
                
                <div class="campo">
                    <div class="campo-tres-quartos" id="instituicao">
                        <select class="valida" data-type="select" name="instituicao" onChange="val()">
                            <option selected value="">Instituição de ensino...</option>
                            <option value="Unopar - Catuaí">Instituição fulana de tal</option>
                        </select>
                        <div class="alerta spr spr-inputs spr-select"></div>
                    </div>
                    <div class="campo-um-quarto"></div>
                </div>
                
                <div class="campo">
                    <div class="campo-inteiro">
                        <select class="valida" data-type="select" name="curso" onChange="val()">
                            <option selected value="">Curso desejado...</option>
                            <option value="Administração">Administração</option>
                        </select>
                        <div class="alerta spr spr-inputs spr-select"></div>
                    </div>
                </div>  
                
                <div class="campo" style="display:none">
                    <div class="campo-inteiro">
                        <input type="hidden" name="coordenador" alt="coordenador" required readonly />
                        <div class="placeholder">Coordenador</div>
                    </div>
                </div>
                
                <div class="campo">
                    <div class="campo-inteiro">
                        <select class="valida" data-type="select" name="periodo" onChange="val()">
                            <option selected value="">Período desejado...</option>
                            <option value="Período matutino">Período matutino</option>
                            <option value="Período vespertino">Período vespertino</option>
                            <option value="Período noturno">Período noturno</option>
                        </select>
                        <div class="alerta spr spr-inputs spr-select"></div>
                    </div>
                </div> 
                
                <div class="campo">
                    <div class="campo-inteiro">
                        <select class="valida" data-type="select" name="periodo" onChange="val()">
                            <option selected value="">Dia e horário disponíveis...</option>
                            <option value="29/05/2015 - Sexta-feira - 14h00">29/05/2015 - Sexta-feira - 14h00</option>
                        </select>
                        <div class="alerta spr spr-inputs spr-select"></div>
                    </div>
                </div> 
                
                <div class="campo">
                    <div class="campo-inteiro">
                        <input class="valida" data-type="text" type="text" name="responsavel" alt="responsavel" autocomplete="off" required onChange="val()"/>
                        <div class="placeholder">Nome do responsável legal</div>
                        
                        <div class="descricao bdr">
                           É necessário o acompanhamento de um responsável legal
                            <img src="http://www.areapropaganda.com/teste/seta.svg" class="seta" />
                        </div>
                        <div class="alerta spr spr-inputs"></div>
                    </div>
                </div>
                
                <div class="campo">
                    <div class="campo-inteiro">
                        <input type="submit" name="agendar" alt="agendar" onClick="return val()"/>  
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>
 
.spr{
    display:block;
    background-image:url(http://www.areapropaganda.com/teste/spr.svg);
    background-repeat:no-repeat}
​
.content{
    position:relative;
    width:50%}
    
.campo{
    width:100%;
    margin-bottom:3%}
    
.campo-inteiro, .campo-metade, .campo-tres-quartos, .campo-um-quarto{display:inline-block}
​
.campo-inteiro{width:100%}
.campo-metade{width:48%}    
.campo-tres-quartos{width:80%}  
.campo-um-quarto{
    width:16%;
    height:52px}
    
input,
select{
    min-height:30px;
    background-color:transparent;
    border:1px solid #ddd;
    border-top-color:#ccc;
    line-height:1;
    color:#999;
    font-size:1em;
    border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    -webkit-border-radius:3px;
    box-shadow:inset 0 1px 4px 0 rgba(0,0,0,0.1);
    -moz-box-shadow:inset 0 1px 4px 0 rgba(0,0,0,0.1);
    -ms-box-shadow:inset 0 1px 4px 0 rgba(0,0,0,0.1);
    -o-box-shadow:inset 0 1px 4px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 0 1px 4px 0 rgba(0,0,0,0.1)}
    
    input:focus,
    select:focus{
        outline:none;
        border:1px solid #6AF!important;
        color:#333}
        
    input:focus ~ .placeholder{display:none}
    
    .placeholder{
        display:inline;
        position:absolute;
        top:11px;
        z-index:-1;
        color:#999}
        
    input[readonly]:focus ~ .placeholder{display:inline}
        
        .campo-inteiro .placeholder{left:2.4%}
        
        .campo-metade .placeholder{left:4.4%}
​
.campo-inteiro input,
.campo-inteiro select{width:95%}
​
.campo-inteiro input,
.campo-inteiro select,
.campo-tres-quartos select{padding:10px 2.4%}
​
.campo-inteiro,
.campo-metade,
.campo-tres-quartos{position:relative}
​
.campo-metade input{
    padding:10px 4.4%;
    width:91%}
​
.campo-tres-quartos select,
.campo-inteiro select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width:100%;
    height:52px}
        
    
#nascimento,
#instituicao{margin-right:3%}
​
.campo-um-quarto{
    float:right;
    background-color:#fff);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat}
        
input[type=submit]{
    width:100%;
    min-height:35px;
    padding:1.4%;
    background-color:#8ac43f;
    border:1px solid transparent;
    border-bottom:2px solid #85b73d;
    line-height:1.5;
    color:#fff;
    font-size:1em;
    cursor:pointer}
    
    input[type=submit]:hover{
        background-color:#88bc3f;
        border-bottom-color:#81b23b}
    
    input[type=submit]:active{
        margin-top:2px;
        border-bottom:none}
    
.spr-inputs{
    position:absolute;
    width:52px;
    height:101%;
    right:0;
    top:0;
    background-color:transparent;
    background-position:-576px}
    
    .spr-select{
        background-position:-243px}
​
.descricao{
    position:absolute;
    display:none;
    padding:10px;
    bottom:130%;
    left:0;
    background:#fff;
    border:1px solid #CCC;
    border-top-color:#DDD;
    border-bottom-color:#aaa;
    color:#666;
    font-size:0.8em;
    line-height:1.4;
    z-index:2}
    
    .descricao .importante{color:#F30}
    
    input:focus ~ .descricao{display:inline}
    
.seta{
    position:absolute;
    width:12px;
    height:12px;
    bottom:-12px;
    left:4%}
 
function val(){
    //pega os campos para digitação
    var campo = document.getElementsByClassName('valida');
    //pega os campos
    var alerta = document.getElementsByClassName('alerta');
    //exucuta o laço
    for(i=0;i<campo.length;i++){
        //pega o tipo de elemento
        var tipo = campo.item(i).getAttribute('data-type');
        
        //se for text...
        if(tipo == "text" || tipo == "number" || tipo == "select"){
            if(campo.item(i).value === "" || campo.item(i).value.length < 8){
                alerta.item(i).setAttribute('style', 'background-position:-525px');
                campo.item(i).setAttribute('style', 'background-color:#fff;border:1px solid #f00');
                campo.item(i).focus();
                return false;
                break;}
                alerta.item(i).removeAttribute('style');
                campo.item(i).setAttribute('style', 'background-color:#fff');
        }
        
        //se for email...
        else if(tipo == "email"){
            if(campo.item(i).value.length < 10 || campo.item(i).value.indexOf('@')==-1 || campo.item(i).value.indexOf('.')==-1 || campo.item(i).value.indexOf('.com')==-1){
                alerta.item(i).setAttribute('style', 'background-position:-525px');
                campo.item(i).setAttribute('style', 'background-color:#fff;border:1px solid #f00');
                campo.item(i).focus();
                return false;
                break;}
                alerta.item(i).removeAttribute('style');
                campo.item(i).setAttribute('style', 'background-color:#fff');
            }       
    }
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers