O HTML 5 para além de novos tipos de campos, trouxe também novos atributos para os formulários e para os próprios campos.
Os novos atributos incluem o autofocus, autocomplete, list, required, multiple, pattern, min and max, step e placeholder.
-
AUTOFOCUS: deixa o cursor já seleccionado, isto ajuda muito na parte da acessibilidade e usabilidade web.
<input name="form_text" id="form_text" type="text" value="foo" autofocus>
Experimentem:
Exemplo Autofocus/*******************************************************************/-
AUTOCOMPLETE: este atributo permite que o form ou o input tenham uma função de autocomplete, ou seja, quando o utilizador começa a digitar o campo, o browser exibe opções para preencher o campo. Este atributo funciona com o elemento form, e os seguintes elementos de input: text, search, url, tel, email, datepickers, range e color.
<form action="demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
Neste caso temos o formulário com autocomplete = on e o email com autocomplete = off.
Experimentem:
Exemplo Autocomplete/*******************************************************************/- MIN, MAX and STEP: são atributos que especificam restrinções para os input que contem números ou datas. O atributo
max especifica o valor máximo permitido no campo de texto. O atributo
min especifica o valor minimo no campo de texto, e o
step especifica um intervalo de números no campo de texto. Por exemplo se o step for igual a 3 então os numeros teriam que ser -3, 0, 3, 6, etc...
Os atributos min e max só funcionam com os inputs, date pickers, number e range.
O exemplo em baixo mostra um campo numérico que aceita valores entre 0 e 10, com um step de 3, neste caso os numeros teriam que ser: 0, 3, 6, 9....
<input type="number" name="points" min="0" max="10" step="3" />
Experimentem:
Exemplo Min e Max e Step/*******************************************************************/-
LIST: este atributo especifica uma lista de dados (datalist) para um text field, ou seja, cria um dropdown para o campo de texto. É assim uma lista de opções. Este atributo só funciona com os seguintes input’s: text, search, url, tel, email, date pickers, number, range e color.
Exemplo:
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
Experimentem:
Exemplo List/*******************************************************************/-
PLACEHOLDER: O placeholder é exibido dentro do text field enquanto o campo está vazio e não está onfocus, ou seja, assim que clicamos em cima do campo para escrever, o texto que lá estava desaparece de imediato, e se não escrevermos nada e clicarmos fora o texto que lá estava antes volta a aparecer.
Este atributo só funciona com os seguintes input’s: text, search, url, tel, email e password.
<input name="q" placeholder="Search Bookmarks and History">
Assim, não será necessário mais código jquery, para fazer o onfocus e o onblur de um text field.
Experimentem:
Exemplo Placeholder/*******************************************************************/ -
MULTIPLES: este atributo permite que sejam seleccionados vamos itens de uma lista de imagens, documentos, etc... Ao utilizar este elemento, permitimos que o utilizador seleccione vários itens para enviar uma mensagem.
Este atributo só funciona com os seguintes input’s: email, e file.
<form action="demo_form.asp" method="get">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
Experimentem:
Exemplo Multiple/*******************************************************************/-
PATTERN: é possivel validar formulários baseadas em expressões regulares. Este atributo só funciona com os input’s: text, search, url, tel, email e password.
Exemplo 1: Este exemplo mostra que o campo só vai aceitar 11 caracteres númericos obrigatoriamente.
<input pattern=”[0-9]{11}” name=”cpf” required />
Exemplo 2: Este exemplo mostra um campo de texto que pode apenas conter 3 letras, sem número ou caracteres especiais.
<input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
Experimentem:
Exemplo Pattern/*******************************************************************/-
REQUIRED: Este atributo permite que o campo seja obrigatório e que deve ser preenchido antes de se fazer submit. Este atributo só funciona com os seguintes input’s: text, search, url, tel, email, password, datepickers, number, checkbox, radio e file. Com este elemento deixa de ser necessário fazer validações com jquery ou javascript.
Exemplo: o campo ficará com uma border vermelha á volta, e o form não fará submit enquanto este campo não for preenchido
<style>
input[required] {border-color:red; }
</style>
<input name=”telefone” type=”tel” id=”telefone” required>
Experimentem:
Exemplo Required/*******************************************************************/Agora importa também mostrar quais os browsers que para já suportam estes elementos:
Browser Support
