16/12/2016 Development / html5
  • autocorrect="off"
  • autocapitalize="off"

É muito normal desenvolvedores esquecerem esses atributos, mas isso é sem dúvida muito útil, porque no celular, campos de email, senha, nome de usuario, se nao estiverem com essa marcacao, irao ficar com letra maiuscula, e dependendo da validacao do backend, nao vai coincidir.

Isso aqui ajuda! Espero que ajude

01/10/2014 Development / html5

Este é um exemplo de como customizar aquelas mensagens de alerta quando o formulário identifica que os campos não foram preenchidos ou não estão preenchidos corretamente.

<form>
    <p>Para submeter o formulário, preenche os campos abaixo.</p>
    <label for="one">Email: </label><input type="email" id="one" required data-errormessage-value-missing="Preencha o campo de e-mail" data-errormessage-type-mismatch="E-mail Inválido!">
    <label for="another">Email: </label><input type="email" id="another" data-errormessage="Generic error message">
    <label for="textarea">Textarea: </label><textarea id="textarea" required data-errormessage-value-missing="Adicione um mensagem"></textarea>

    <select required data-errormessage-value-missing="Por favor, escolhe um!">
        <option selected disabled value="">Opção 1</option>
        <option value="1">Um</option>
    </select>
    <button>Enviar</button>
</form>

Espero que sirva!

15/05/2013 Development / html5

Esse eh um template que eu fiz de loja virtual usando bootstraap

 

http://www.felipehuggler.com/bike

 

 

20/09/2012 Development / html5

Hoje vou postar um exemplo de como usar o input type="color"

<h2>HTML5 Color Picker + Javascript Tutorialh2>
Choose Color 1: <input type="color" name="color1" id="color1" onchange="alert(this.value)" /><br /><br />
Choose Color 2: <input type="color" name="color2" id="color2" /><br /><br />
<input type="button" id="btn" value="Submit" />

function processData(c1,c2) {
    var cv1 = document.getElementById(c1).value;
    var cv2 = document.getElementById(c2).value;
    alert(cv1+" - "+cv2);
}


$().ready(function(){
    $("#btn").click(function(){ processData('color1','color2'); });
});​

http://jsfiddle.net/Phfaz/

 

17/09/2012 Development / html5

De vez enquando eu fuço as novas tags do html5 para saber em qual pé estão essas novas tags. Hoje eu pesquisei pelo input type="range"

Segue um exemplo de como utiliza-lo.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 11 | Developer's Blog</title>
<meta charset="utf-8">
<style>
#rounded-example{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;   
    background-color:#CCC;   
    padding:20px;
    font-size:14px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    box-shadow: 5px 5px 5px #888;
    -moz-box-shadow:5px 5px 5px #888;
    -webkit-box-shadow:5px 5px 5px #888;
    width:300px;
   
    }
</style>

</head>
 
  <body>
 
  <div id="rounded-example">
  This div can be rounded by you!<br><br>

  Value: <span id="rounded-border-value"></span>
  </div>
 
  <p><input type="range" onchange="changeRounded(event)" value="0" max="50" min="0" id="rounded-border"></p>
  <script>
     function changeRounded() {
              var el = document.getElementById('rounded-example');

              var borderVal = document.getElementById('rounded-border').value;
              document.getElementById('rounded-border-value').innerHTML = borderVal;

              el.style.borderRadius = borderVal + 'px';
            }

    </script>  

  </body> 
 
</html>