Curso de Design Responsivo Aula 21 Complementando e estilizando formulário

Nessa vídeo aula vamos continuar aprendendo sobre formulários, complementaremos nosso formulário com campos não vistos e conheceremos um atributo muito interessante chamado pattern que nos permite validar os campos de formulário usando expressões regulares de acordo com as nossas necessidades.

Pattern

No atributo Pattern nós usamos uma Expressão Regular para determinar qual padrão de preenchimento o formulário deve seguir.

Por exemplo: se quero um formulário em que o usuário escreve uma sequência de 3 números e 3 letras em Uppercase, uso o seguinte pattern:

<input pattern="[0-9]{3}[A-Z]{3}" />

Neste outro exemplo, o usuário deverá colocar um número decimal, onde ele usa a vírgula como separador e duas casas decimais:

<input pattern="[0-9],[0-9][0-9]" />

Veja mais exemplos no site http://html5pattern.com

Código CSS desenvolvido na vídeo aula

form {
    width: 90%;
    margin: 0 auto
}
::-webkit-input-placeholder {
    font-style: italic;
    opacity: .5
}
fieldset {
    border: 1px solid #269526;
    padding: 10px;
    margin: 10px
}
legend {
    margin: 15px
}
label {
    text-align: left;
    display: block
}
input,select,textarea {
    color: #007138;
    text-align: left;
    width: 100%;
    padding: 15px;
    background: #83e083;
    border: 2px solid #006600;
    margin-top: 5px;
    margin-bottom: 5px
}
meter, progress {
    margin: 5px
}
input[type="checkbox"],input[type="radio"]{
    width: 10%
}
input[type="submit"],input[type="reset"]{
    width: auto
}

 



Hospedagem Profissional de Sites