forked from zenorocha/diveintohtml5
/
forms.html
556 lines (394 loc) · 43.9 KB
/
forms.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
<!DOCTYPE html>
<meta charset=utf-8>
<title>Web Forms - Dive Into HTML5</title>
<title>Formulários Web - Dive into HTML5</title>
<!--[if lt IE 9]><script src=j/html5.js></script><![endif]-->
<link rel=alternate type=application/atom+xml href=https://github.com/diveintomark/diveintohtml5/commits/master.atom>
<link rel=stylesheet href=screen.css>
<style>
body{counter-reset:h1 9}
</style>
<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<link rel=prefetch href=index.html>
<a href="https://github.com/zenorocha/diveintohtml5"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<p>Você está aqui: <a href=index.html>Home</a> <span class=u>‣</span> <a href=table-of-contents.html#forms>Dive Into <abbr>HTML5</abbr></a> <span class=u>‣</span>
<h1><br>Uma Forma De Loucura</h1>
<p id=toc>
<p class=a>❧
<h2 id=divingin>Mergulhando</h2>
<p class=f><img src=i/aoc-t.png alt=t width=107 height=105>odo mundo conhece sobre formulários web, certo? Crie uma marcação <code><form></code>, alguns campos <code><input type="text"></code>, ou talvez <code><input type="password"></code>, no final um botão <code><input type="submit"></code> , e pronto está feito.
<p>Você não conhece nem a metade deles. A <abbr>HTML5</abbr> definiu mais de meia dúzia de novos tipos de campos que você pode usar em seus formulários. E quando digo "usar", é usar agora - sem nenhuma gambiarra, hack ou soluções alternativas. Só não se entusiasme tanto; Eu não disse que todos estes recursos são suportados por todos os navegadores da atualidade. Oh, meu Deus, eu também não disse em nenhum. Em navegadores modernos, seus formulários irão arrebentar. Nos mais antiquados eles irão apenas cumprir sua função. Ou seja, os recursos irão se adaptar e degradar para funcionar em todos os navegadores. Até no IE6.
<p class=a>❧
<h2 id=placeholder>Placeholder</h2>
<table class=bc>
<caption>
Suporte ao Placeholder
</caption>
<thead>
<tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
<tbody>
<tr><td>·<td>3.7+<td>4.0+<td>4.0+<td>11.0+<td>4.0+<td>·
</table>
<p>O primeiro aperfeiçoamento que a <abbr>HTML5</abbr> trouxe aos formulários web é o recurso para definir um <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute>texto como placeholder</a>, em campos input. Este texto é exibido dentro do input enquanto o campo estiver vazio ou sem foco. Logo que é clicado (ou acessado por tab) o texto placeholder desaparece.
<p>Você provavelmente já viu o placeholder antes. Por exemplo, o Mozilla Firefox possui um texto placeholder na barra de endereço onde se lê “Search Bookmarks and History”:
<p class=c><img src=i/location-bar-empty-unfocused.png alt="barra de endereço com texto placeholder" width=268 height=30>
<p>Quando voce clica (ou acessa por tab) a barra de endereço, o texto desaparece:
<p class=c><img src=i/location-bar-empty-focused.png alt="barra de endereço com foco e sem o texto placeholder" width=268 height=30>
<p>Aqui como você pode incluir um texto placeholder em seu formulário web:
<pre><code><form>
<input name="q" <mark>placeholder="Search Bookmarks and History"</mark>>
<input type="submit" value="Search">
</form></code></pre>
<p>Navegadores que não suportam o atributo <code>placeholder</code> irão simplesmente ignorá-lo. <a href=examples/input-placeholder.html> Veja se o seu navegador suporta o texto placeholder.</a>.
<div class="pf clear">
<h4>Pergunte ao Professor Marcação</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>P: Eu posso usar marcações <abbr>HTML</abbr> no atributo <code>placeholder</code>? Eu gostaria de inserir uma imagem, ou talvez mudar as cores.<br>
R: O atributo <code>placeholder</code> só pode conter texto, nenhuma marcação <abbr>HTML</abbr>. Porém há algumas <a href=http://trac.webkit.org/export/37527/trunk/LayoutTests/fast/forms/placeholder-pseudo-style.html>extensões do CSS especificamente proprietárias</a> que permitem estilizar o texto placeholder em alguns navegadores.
</blockquote>
</div>
</div>
<p class=a>❧
<h2 id=autofocus>Campos com foco automático</h2>
<table class=bc>
<caption>Suporte ao Autofocus</caption>
<thead>
<tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
<tbody>
<tr><td>·<td>4.0+<td>4.0+<td>3.0+<td>10.0+<td>·<td>·
</table>
<p class=ss><img src=i/openclipart.org_johnny_automatic_angry_guy.png alt="rapaz nervoso com os braços levantados" width=188 height=262>
<p>Web sites podem usar JavaScript para criar um foco automático no primeiro campo de um formulário. Por exemplo, a página inicial do <a href=http://www.google.com.br/>Google</a> foca automaticamente no campo de busca para você poder digitar suas palavras-chaves. Enquanto isto é conveniente para a maioria das pessoas, pode ser irritante para usuários experientes ou pessoas com necessidades especiais. Caso você pressione a barra de espaço esperando que a página role, ela não irá, pois o foco está em um campo de formulário. (Você terá um espaço no campo ao invés da rolagem). Se seu foco estiver em um outro campo enquanto a página ainda estiver carregando, o código de foco automático, que deveria ajudar, irá mover o foco para o campo original, interrompendo seu fluxo e fazendo com que digite no lugar errado.
<p>Por causa do foco automático ser processado pelo JavaScript, torna complicado lidar com estes casos específicos, e isto é um pequeno ajuste para as pessoas que não querem que o website “roube” o foco.
<p>Para resolver este problema, a <abbr>HTML5</abbr> introduziu <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofocusing-a-form-control>um atributo de <code>autofocus</code> para todos elementos de formulário web</a>. O atributo <code>autofocus</code> executa exatamente o que ele diz, foco automático. O truque: logo que a página carrega, ele move o foco para um campo em particular. Mas como ele é apenas uma marcação ao invés de um script, o comportamento se torna consistente durante todo o website. Além disso, navegadores (ou extensões) podem oferecer que o usuário desabilite o foco automático.
<p>Abaixo como você pode definir um campo de formulário com foco automático:
<pre><code><form>
<input name="q" <mark>autofocus</mark>>
<input type="submit" value="Search">
</form></code></pre>
<p>Navegadores que não suportam o atributo <code>autofocus</code> simplesmente irão ignorá-lo. <a href=examples/input-autofocus.html>Veja se o seu navegador suporta o campo de foco automático.</a>.
<p>Como assim? Você quer dizer que deseja que o autofocus funcione em todos os navegadores, não apenas nestes navegadores cheios de <abbr>HTML5</abbr>? Bom, Você pode manter seu script atual de foco automático. Faça apenas estas duas pequenas alterações:
<ol>
<li>Adicione o atributo <code>autofocus</code> na sua marcação <abbr>HTML</abbr>
<li><a href=detect.html#input-autofocus>Detecte se o navegador suporta o atributo <code>autofocus</code></a>, e execute o seu próprio script de foco automático, apenas se o navegador não suportar autofocus nativamente.</ol>
<p class="legend top" style="margin-left:10em"><span class=arrow>↶</span> Autofocus com fallback
<pre><code><form name="f">
<input id="q" <mark>autofocus</mark>>
<script>
if (<mark>!("autofocus" in document.createElement("input"))</mark>) {
document.getElementById("q").focus();
}
</script>
<input type="submit" value="Go">
</form>
…</code></pre>
<p><a href=examples/input-autofocus-with-fallback.html>Veja um exemplo de <code>autofocus</code> com fallback</a>.
<h3 id=more-on-focus>Defina um foco o mais cedo possível</h3>
<p>Muitas páginas da web esperam o carregamento do <code>window.onload</code> para definir um foco. Mas o evento <code>window.onload</code> não executa nenhuma ação <em>até que</em> todas as imagens tenham sido carregadas. Se sua página possui diversas imagens, seu script pode atrapalhar e refazer o foco em um campo, enquanto o usuário já estiver interagindo em outra parte da página. Por isso que usuários experientes odeiam scripts de foco automático.
<p>O exemplo a seguir executa o script de foco automático imediatamente depois que os campos de formulário são declarados. Esta é a solução ideal, mas pode ofender seu ego, por colocar um bloco de código JavaScript no meio da página. (Ou, mais prático, seu sistema de back-end, pode não ter esta flexibilidade.) Se você não pode colocar um script no meio da página, você deverá definir o foco durante um evento personalizado. Por exemplo, o <a href="http://docs.jquery.com/Tutorials:Introducing_$(document).ready()"><code>$(document).ready()</code></a> do jQuery ao invés de <code>window.onload</code>.
<p class="legend top" style="margin-left:10em"><span class=arrow>↶</span> Autofocus com jQuery fallback
<pre><code><head>
<script src=jquery.min.js></script>
<script>
<mark>$(document).ready</mark>(function() {
if (!("autofocus" in document.createElement("input"))) {
$("#q").focus();
}
});
</script>
</head>
<body>
<form name="f">
<input id="q" autofocus>
<input type="submit" value="Go">
</form>
</code></pre>
<p><a href=examples/input-autofocus-with-fallback-document-ready.html>Veja um exemplo do <code>autofocus</code> com jQuery fallback</a>.
<p>jQuery executa o evento personalizado <code>ready</code> logo que o <abbr>DOM</abbr> estiver disponível — isto é, ele espera até que todo o texto da página carregue, mas não espera até todas as imagens. Não está perto do ideal - se a página for consideravelmente grande ou a conexão de internet for extremamente baixa, o usuário pode começar a interagir com a página antes do seu script de foco automático execute. Mas é muito melhor que esperar o <code>window.onload</code>.
<p>Se você estiver hesitante ou não puder inserir um bloco isolado de código em seu <abbr>HTML</abbr>, há um meio termo menos ofensivo que a primeira opção e mais otimizado que a segunda. É possível utilizar eventos personalizados do jQuery para definir seu próprio, digamos <code>autofocus_ready</code>. Assim você pode acioná-lo manualmente, imediatamente depois que o campo com autofocus fique disponível. <i>Obrigado a E. M. Sternberg por me ensinar sobre está técnica.</i>
<p class="legend top" style="margin-left:10em"><span class=arrow>↶</span> Autofocus com fallback utilizando evento personalizado
<pre><code><head>
<script src=jquery.min.js></script>
<script>
<mark>$(document).bind('autofocus_ready',</mark> function() {
if (!("autofocus" in document.createElement("input"))) {
$("#q").focus();
}
});
</script>
</head>
<body>
<form name="f">
<input id="q" autofocus>
<script><mark>$(document).trigger('autofocus_ready');</mark></script>
<input type="submit" value="Go">
</form>
</code></pre>
<p><a href=examples/input-autofocus-with-fallback-custom-event.html>Veja um exemplo de <code>autofocus</code> com fallback utilizando evento personalizado</a>.
<p>Esta abordagem é melhor que a primeira; o foco será definido o mais cedo que a técnica permitir, enquanto o texto da página ainda estiver carregando. Mas ele transfere a maior parte da lógica da sua aplicação (foco do campo de formulário) para fora do corpo da página. Este exemplo é baseado em jQuery, mas o conceito de eventos personalizados não é único do jQuery. Outras bibliotecas JavaScript como YUI e Dojo oferecem capacidades similares.
<p>Para resumir:
<ul>
<li>Definir o foco corretamente é importante.
<li>De todas as possibilidades, deixe o navegador trabalhar definindo o atributo <code>autofocus</code> no campo de formulário no qual deseja o foco.
<li>Se codificar um fallback para navegadores antigos, detecte o suporte do atributo <code>autofocus</code> e garanta que o fallback será executado <em>apenas</em> em navegadores antigos.
<li>Defina o foco o mais cedo possível. Insira o script de foco dentro da marcação imediatamente após o campo de formulário. Se isto ofender você, use bibliotecas JavaScript que suportem eventos personalizados para acionar um evento personalizado imediatamente depois que o campo de formulário estiver disponível. Se não for possível, use apenas algo como o evento <code>$(document).ready()</code>.
<li>Sobre outras circunstâncias espere até carregar <code>window.onload</code> para ter o foco definido.
</ul>
<p class=a>❧
<h2 id=type-email>Endereços de Email</h2>
<p>Por mais de uma década, existiam apenas alguns tipos de campos nos formulários web. Os mais comuns eram:
<table class=st>
<tr class=ho><th>Tipo do Campo<th>Código <abbr>HTML</abbr><th>Notas
<tr class=zebra><th>checkbox<td><code><input type="checkbox"></code><td>pode ser marcado ou não
<tr><th>radio button<td><code><input type="radio"></code><td>pode ser agrupado com outros
<tr class=zebra><th>password field<td><code><input type="password"></code><td>exibe pontos ao invés dos caracteres digitados
<tr><th>drop-down lists<td><code><select><option>…</code><td>
<tr class=zebra><th>file picker<td><code><input type="file"></code><td>abre uma janela para “abrir arquivos”
<tr><th>submit button<td><code><input type="submit"></code><td>
<tr class=zebra><th>plain text<td><code><input type="text"></code><td>o atributo <code>type</code> pode ser omitido
</table>
<p>Todos esses campos continuam funcionando em <abbr>HTML5</abbr>. Se você “atualizar para <abbr>HTML5</abbr>” (quem sabe, <a href=semantics.html#the-doctype>mudando o DOCTYPE</a>), não vai ser preciso fazer nenhuma mudança nos formulários. Viva a compatibilidade!
<p>No entanto, há 13 novos tipos de campos na <abbr>HTML5</abbr>, e por razões que ficarão claras em breve <em>não</em> há porque não começar a utilizá-los.
<p>O primeiro destes novos campos é o <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state>endereço de email</a>. Se declara assim:
<pre><code><form>
<mark><input type="email"></mark>
<input type="submit" value="Go">
</form></code></pre>
<p>Eu estava prestes a escrever uma frase que começava com “nos navegadores que não suportam <code>type="email"</code>…” mas me impedi. Por que? Porque eu não tenho certeza do que quer dizer um navegador não suportar <code>type="email"</code>. Todos os navegadores “suportam” <code>type="email"</code>. Eles só não fazem nada de especial com ele (você verá alguns exemplos especiais de tratamento em breve), mas navegadores que não reconhecem <code>type="email"</code> irão tratá-lo como <code>type="text"</code> e renderizar um tipo de campo simples.
<p>Eu não consigo enfatizar quão importante ele é. A internet possui milhões de formulários que pedem para digitar um endereço de email, e todos eles usam <code><input type="text"></code>. Você vê um campo de texto, você digita um endereço de email na caixa, e é isto. Com a <abbr>HTML5</abbr> utilize a definição <code>type="email"</code>. Os navegadores vão surtar? Não. Todo o tipo de navegador da Terra trata um atributo <code>type</code> nulo como <code>type="text"</code> — inclusive o IE6. Então você pode “atualizar” seu formulário para <code>type="email"</code> agora.
<p>O que você quer dizer com os navegadores <em>AINDA</em> suportam <code>type="email"</code>? Bom, significa várias coisas. A especificação da <abbr>HTML5</abbr> não exige nenhuma interface particular para este novo tipo de campo. A maioria dos navegadores desktop como Safari, Chrome, Opera e Firefox simplesmente renderizam uma caixa de texto — exatamente como <code>type="text"</code> — logo, seu usuário nunca irá notar a diferença (<a href=#validation>até tentar enviar o formulário</a>).
<p>Então surge o iPhone.
<p>O iPhone não possui um teclado físico. A digitação é feita por toque no teclado virtual, que surge nos momentos apropriados. Por exemplo, quando você seleciona um campo de um formulário web. A Apple fez algo inteligente no navegador do iPhone. Ele reconhece vários dos novos tipos de campos da <abbr>HTML5</abbr> e <em>dinamicamente altera o teclado virtual</em> adaptado para o campo específico.
<p>Por exemplo, o campo de endereço de email é um texto, certo? Certo, mas ele precisa de um tipo especial de texto, praticamente todos os endereços de email contém o símbolo <code>@</code> e pelo menos um ponto (<code>.</code>), e não costumam ter nenhum espaço. Então quando você usa o iPhone e foca em um campo <code><input type="email"></code> , você tem um teclado virtual que possui uma barra de espaço menor que a usual, mais teclas especificas para os caracteres <code>@</code> e (<code>.</code>).
<p class=c><img src=i/input-type-email.png alt="Renderização do iPhone do campo type=email" title="observe as teclas específicas para os caracteres @ e . ao lado da barra de espaço" width=222 height=333 class=fr><br><a href=examples/input-type-email.html>Faça você o teste do campo <code>type="email"</code></a>.
<p>Para resumir: Não há nenhuma desvantagem em converter todos os seus campos de email para <code>type="email"</code>. Praticamente ninguém vai notar, exceto os usuários do iPhone, que provavelmente não vão notar também. Mas aqueles que notarem irão sorrir timidamente e agradecer a você por tornar a experiência na web um pouco mais fácil.
<p class=a>❧
<h2 id=type-url>Endereços web</h2>
<p>Endereços web - que a maioria dos usuários avançados de internet chamam de <abbr>URLs</abbr>, exceto por alguns poucos <a href="http://www.douglasadams.com/dna/pedants.html">pedantes</a> que chamam de <abbr>URIs</abbr> — outro tipo de texto especializado. A sintaxe dos endereços web é definida pelos padrões de relevância da Internet. Se alguém pedir para você digitar um endereço web em um formulário, é esperado algo como “<code>http://www.google.com/</code>”, não “Rua Getulio Vargas, 160.” Barras são comuns — inclusive a página inicial do Google possui três delas. Pontos são tão comuns quanto, mas espaços são proibidos. E todos os endereços web possuem um sufixo relacionado a um domínio como: “.com” ou “.org”.
<p>Observem... (rufar de tambores, por favor)... o <code><input type="url"></code>. No iPhone:
<p class=c><img src=i/input-type-url.png alt="Renderização do iPhone do campo tipo=url" width=222 height=333 class=fr><br><a href=examples/input-type-url.html>Faça você o teste do campo <code>type="url"</code></a>.
<p>O iPhone altera seu teclado virtual, do mesmo modo que ele faz para os campos de <a href=#type-email>endereço de email</a>, só que desta vez otimizado para endereços web. A barra de espaço é trocada por três teclas virtuais: um ponto, uma barra, e um botão “.com”. (Você pode pressionar por um tempo o botão “.com” para escolher outros sufixos comuns como “.org” ou “.net”.)
<p>A maioria dos navegadores modernos, simplesmente irão renderizar um campo <code>type="url"</code> como uma caixa de texto, logo seus usuários não irão notar a diferença <a href=#validation>até enviarem o formulário</a>. Navegadores que suportam a <abbr>HTML5</abbr> irão tratar o <code>type="url"</code> exatamente como um <code>type="text"</code>, por isso não há desvantagem em usá-los para todos os campos que requerem um endereço web.
<p class=a>❧
<h2 id=type-number>Números em caixas rotativas</h2>
<p>Em seguida: Números. Pedir um número é mais complicado do que pedir um endereço de e-mail ou endereço de web. Primeiro de tudo, números são mais complicados do que você imagina. Rápido: escolha um número. -1? Não, eu quero um número entre 1 e 10. 7½? Não, não uma fração, bobo. <span class=u>π</span>? Agora você está começando a ser irracional.
<p>Meu ponto é, você geralmente não pede “apenas um número.” É mais provável que você queira um número em determinado intervalo. E você deseja apenas certo tipo de número neste intervalo - talvez todos os números, mas não frações ou decimais, ou algo mais esotérico como números divisíveis por 10. A <abbr>HTML5</abbr> lhe dá cobertura.
<p class="legend top" style="margin-left:8em"><span class=arrow>↶</span> Escolha um número, (quase) qualquer número
<pre><code><input <mark>type="number"</mark>
min="0"
max="10"
step="2"
value="6"></code></pre>
<p>Vamos analisar um atributo por vez. (Você pode <a href=examples/input-type-number-min-max-step.html>acompanhar com este exemplo real</a>, se quiser.)
<ul>
<li><code>type="number"</code> significa que este é um campo numérico.
<li><code>min="0"</code> específica o valor mínimo aceitável para este campo.
<li><code>max="10"</code> é o valor maximo aceitável.
<li><code>step="2"</code>, combinado com o valor <code>min</code> define o número aceitável dentro do intervalo: <code>0</code>, <code>2</code>, <code>4</code>, e adiante, até o valor <code>max</code>
<li><code>value="6"</code> é o valor padrão. Isto deve parecer familiar. É o mesmo atributo que você sempre usou para especificar valores em um campo de formulário. (Eu mencionei ele aqui para chegar no ponto que a <abbr>HTML5</abbr> é baseada nas versões anteriores da <abbr>HTML</abbr>. Você não precisa reaprender como fazer as coisas que você já está fazendo.)</ul>
<p>Está é a marcação para campos numéricos. Tenha em mente que todos os atributos são opcionais. Se você tiver um mínimo e não um máximo, você pode especificar o atributo <code>min</code> mas não o <code>max</code>. O intervalo padrão é 1, podendo omitir o atributo <code>step</code>, se não for preciso um intervalo diferente. Se não existir um valor padrão, então o atributo <code>value</code> pode ser vazio ou até mesmo omitido.
<p>Mas a <abbr>HTML5</abbr> não acaba aqui. Pelo mesmo preço, de banana, você recebe estes métodos JavaScript super úteis:
<ul>
<li><code>input.stepUp(n)</code> aumenta o valor do campo por <code>n</code>.
<li><code>input.stepDown(n)</code> diminui o valor do campo por <code>n</code>.
<li><code>input.valueAsNumber</code> retorna o valor atual como ponto flutuante. (A propriedade <code>input.value</code> sempre retorna como string.)
</ul>
<p>Problemas pra visualizar? Bem, a interface exata do controle numérico depende do seu navegador, os fabricantes dos navegadores implementaram o suporte de diferentes formas. No iPhone, onde digitar é incômodo, o navegador <a href=#type-email>mais uma</a> <a href=#type-url>vez</a> otimiza o teclado virtual para entradas numéricas.
<p class=c><img src=i/input-type-number.png alt="Renderização do iPhone do campo type=number" width=222 height=333 class=fr>
<p>Na versão desktop do Opera, o mesmo campo <code>type="number"</code> é renderizado com uma "caixa rotativa", com pequenas setas para cima e para baixo que você pode clicar e alterar o valor.
<p class=c><img src=i/input-type-number-opera.png alt="Renderização do Opera do campo type=number" width=227 height=203 class=fr>
<p>O Opera respeita os atributos <code>min</code>, <code>max</code>, and <code>step</code>, você sempre irá acabar com um valor númerico aceitável. Caso você aumente o valor até o máximo, a seta superior da caixa rotativa fica desabilitada.
<p class=c><img src=i/input-type-number-at-max-opera.png alt="Renderização do Opera do campo type=number com um valor máximo" width=142 height=28 class=fr>
<p>Como acontece com todos os tipos de campos que comentei neste capítulo, navegadores que não suportam <code>type="number"</code> irão trata-lo como <code>type="text"</code>. O valor padrão irá aparecer no campo (já que é armazenado no atributo <code>value</code>), mas os outros atributos como <code>min</code> e <code>max</code> serão ignorados. Você é livre para implementá-los como quiser, ou pode reutilizar uma biblioteca Javascript que já possui um controle de caixa rotativa. Apenas <a href=detect.html#input-types>cheque o suporte nativo da <abbr>HTML5</abbr> primeiro</a>, deste jeito:
<pre><code>if (!<a href=detect.html#modernizr>Modernizr</a>.inputtypes.number) {
// sem suporte nativo ao campo type=number
// talvez use Dojo ou outra biblioteca Javascript
}</code></pre>
<p class=a>❧
<h2 id=type-range>Números em controles deslizantes</h2>
<p><a href=#type-number>Números em caixas rotativas</a> não são o único modo de representar campos numéricos. Você provavelmente já deve ter visto "controles deslizantes" como este:
<p class=c><img src=i/input-type-range.png alt="Chrome rendering of input type=range field as slider control" width=175 height=25><br><a href=examples/input-type-range.html>Faça você o teste do campo <code>type="range"</code></a>.
<p>Agora você pode ter controles deslizantes no seu formulário web também. A marcação é bem semelhante com as <a href=#type-range>caixas rotativas</a>:
<p class="legend top" style="margin-left:8em"><span class=arrow>↶</span> A imagem para comprovar
<pre><code><input <mark>type="range"</mark>
min="0"
max="10"
step="2"
value="6"></code></pre>
<p>Todos os atributos válidos são os mesmos do <code>type="number"</code> — <code>min</code>, <code>max</code>, <code>step</code>, <code>value</code> — e funcionam do mesmo modo. A única diferença é a interface. Ao invés de ser um campo para digitar, é esperado dos navegadores renderizarem <code>type="range"</code> como um controle deslizante. Safari, Chrome e Opera fazem isto. (Infelizmente, o iPhone renderiza uma caixa de texto simples. Que nem ao menos otimiza o seu teclado virtual para entradas numéricas). Todos os outros navegadores simplesmente tratam o campo como <code>type="text"</code>, então não há razão para não começar a usá-lo imediatamente.
<p class=a>❧
<h2 id=type-date>Selecionadores de data</h2>
<p><abbr>HTML</abbr> não possui selecionadores de data. As bibliotecas JavaScript tiveram que resolver esta negligência (<a href=http://docs.dojocampus.org/dijit/form/DateTextBox>Dojo</a>, <a href=http://docs.jquery.com/UI/Datepicker>jQuery UI</a>, <a href=http://developer.yahoo.com/yui/calendar/>YUI</a>, <a href=http://closure-library.googlecode.com/svn/docs/class_goog_ui_DatePicker.html>Closure Library</a>), mas é claro estas soluções exigem assumir o uso da biblioteca que o selecionador de data é construído.
<p><abbr>HTML5</abbr> finalmente definiu um modo para incluir selecionadores de data nativos. Sem uso de scripts personalizados. Na verdade, é definido seis: data, mês, semana, hora, data + hora, e data + hora - fuso horário.
<p>Até agora, o suporte é… escasso.
<table class=bc>
<caption>Suporte ao selecionadores de data</caption>
<thead>
<tr><th style="text-align:left">Tipo de Campo<th>Opera<th>Qualquer outro navegador
<tbody>
<tr><th><code>type="date"</code><td>9.0+<td>·
<tr><th><code>type="month"</code><td>9.0+<td>·
<tr><th><code>type="week"</code><td>9.0+<td>·
<tr><th><code>type="time"</code><td>9.0+<td>·
<tr><th><code>type="datetime"</code><td>9.0+<td>·
<tr><th><code>type="datetime-local"</code><td>9.0+<td>·
</table>
<p>Assim é como o Opera renderiza <a href=examples/input-type-date.html><code><input type="date"></code></a>:
<blockquote>
<p><img src=i/input-type-date.png alt="Opera selecionador type=date" width=210 height=190>
</blockquote>
<p>Se você precisar da hora junto com a data. O Opera também suporta <a href=examples/input-type-datetime.html><code><input type="datetime"></code></a>:
<blockquote>
<p><img src=i/input-type-datetime.png alt="Opera selecionador type=datetime" width=225 height=191>
</blockquote>
<p>Se você só precisar de mês e ano (por exemplo, a data de vencimento de um cartão de crédito). O Opera pode renderizar <a href=examples/input-type-month.html><code><input type="month"></code></a>:
<blockquote>
<p><img src=i/input-type-month.png alt="Opera selecionador type=month" width=210 height=189>
</blockquote>
<p>Menos comum, mas também válido, é a possibilidade de selecionar uma semana específica do ano com <a href=examples/input-type-week.html><code><input type="week"></code></a>:
<blockquote>
<p><img src=i/input-type-week.png alt="Opera selecionador type=week" width=210 height=191>
</blockquote>
<p>Último e não menos importante, você poder selecionar uma hora com <a href=examples/input-type-time.html><code><input type="time"></code></a>:
<blockquote>
<p><img src=i/input-type-time.png alt="Opera selecionador type=time" width=98 height=22>
</blockquote>
<p>É provável que os outros navegadores, eventualmente, venham a suportar os selecionadores de data. Mas como <a href=#type-email><code>type="email"</code></a> e os outros tipos campos, eles serão renderizado como uma caixa de texto, nos navegadores que não reconhecerem o <code>type="date"</code> e as outras variações. Se você preferir, pode simplesmente usar <code><input type="date"></code> e companhia, e fazer usuários do Opera felizes, e esperar o suporte dos outros navegadores. Mais realístico, você pode usar <code><input type="date"></code>, <a href=detect.html#input-types>detectar se o navegador possui suporte nativo para seletores de data</a>, e utilizar um fallback para um script utilizando a biblioteca a sua escolha (<a href=http://docs.dojocampus.org/dijit/form/DateTextBox>Dojo</a>, <a href=http://docs.jquery.com/UI/Datepicker>jQuery UI</a>, <a href=http://developer.yahoo.com/yui/calendar/>YUI</a>, <a href=http://closure-library.googlecode.com/svn/docs/class_goog_ui_DatePicker.html>Closure Library</a>, ou outra solução).
<p class="legend top" style="margin-left:6em"><span class=arrow>↶</span> Selecionador de data com fallback
<pre><code><form>
<input type="date">
</form>
...
<script>
var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
// Sem suporte nativo ao selecionador de data :[
// Utilize Dojo/jQueryUI/YUI/Closure para criar um,
// então dinamicamente substitua este <input> element.
}
</script></code></pre>
<p class=a>❧
<h2 id=type-search>Caixas de busca</h2>
<p>OK, este assunto é sutil. Bem, a ideia é bastante simples, mas as implementações requerem algumas explicações. Aqui vai…
<p>Busca. Não só o buscador do Google ou do Yahoo. (Os demais.) Pense em qualquer caixa de busca de uma página de um site. A Amazon possui uma caixa de busca. Neweeg possui uma caixa de busca. A maioria dos blogs possui uma caixa de busca. Como eles são marcados? <code><input type="text"></code>, assim como todas as outras caixas de texto da web. Vamos corrigir isto.
<pre style="float:left"><code><form>
<input name="q" <mark>type="search"</mark>>
<input type="submit" value="Find">
</form></code></pre>
<p class="legend right" style="margin-top:2.75em"><span class=arrow> ⇜</span> Nova era dos campos de pesquisa
<p class="clear"><a href=examples/input-type-search.html>Teste <code><input type="search"></code> no seu próprio navegador</a>. Em alguns navegadores, você não irá notar diferença de uma caixa de texto normal. Mas se você utilizar Safari no Mac OS X, ele irá aparecer assim:
<p class=c><img src=i/input-type-search-safari.png alt="Renderização do Safari/Mac do campo type=search" width=191 height=121>
<p>Você pode ver a diferença? O campo possui cantos redondos! Eu sei, Eu sei, você mal consegue conter a empolgação. Mas espere, tem mais! Quando você começa digitar na caixa <code>type="search"</code>, o Safari inseri um pequeno botão "x" no canto direito da caixa. Clicando no "x" o conteúdo do campo é limpo. (O Google Chrome, que divide muitas tecnologias com o Safari debaixo do capô, também possui este comportamento. ) Ambas dessas pequenas modificações são feitas para combinar com a aparência e comportamento das caixas de buscas nativas no iTunes e outras aplicações do Mac OS X.
<p class=c><img src=i/input-type-search-safari-typing.png alt="Digitando no campo type=search no Safari" width=191 height=121>
<p><a href=http://www.apple.com/>Apple.com</a> usa <code><input type="search"></code> para os campos de pesquisa dos seus sites, de forma a incrementar a experiência "Mac". Mas não há nenhuma especificação do Mac sobre. É apenas uma marcação, então cada navegador em cada plataforma pode escolher a renderização de acordo com as especificações e convenções. Como todos os outros novos tipos de campo, navegadores que não reconhecem <code>type="search"</code> irão tratá-lo como <code>type="text"</code>, logo não existe absolutamente nenhuma razão para na começar usar <code>type="search"</code> para todas as suas caixas de pesquisa hoje.
<div class="pf clear">
<h4>Professor Marcação diz</h4>
<div class=inner>
<blockquote class=note>
<p>Por padrão, versões antigas do Safari não aplicam nem os mais básicos estilos <abbr>CSS</abbr> no campo <code><input type="search"></code>. Se você quer forçar o Safari tratar seus campos de pesquisa como um campo de texto normal (para poder inserir seus próprios estilos <abbr>CSS</abbr>), adicione esta regra em sua folha de estilo:
<blockquote><pre><code>input[type="search"] {
-webkit-appearance: textfield;
}</code></pre></blockquote>
<p><i>Obrigado a Jonh Lein por me ensinar este truque.</i>
</blockquote>
</div>
</div>
<p class=a>❧
<h2 id=type-color>Selecionadores de cor</h2>
<p><abbr>HTML5</abbr> também possui <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#color-state><code><input type="color"></code></a>, que permite você selecionar uma cor e retornar sua representação hexadecimal. <del>Nenhum navegador suporta por enquanto, o que é uma vergonha, porque eu sempre adorei <a href=http://earthlingsoft.net/ssp/blog/2006/04/colour_me_picked>o selecionador de cor do Mac OS</a>. Talvez algum dia.</del> Boas notícias, pessoal! <a href=http://dev.opera.com/articles/view/new-form-features-in-html5/#input-color>Opera 11 agora suporta <code>type=color</code></a>. No Mac e no Windows, o campo é integrado com o selecionador de cor nativo da plataforma. No Linux, desce um seletor de cores básico. Em todas as outras plataformas, o campo possui um limite de seis caracteres hexademical de cor RGB, apropriado para utilizar onde aceitar uma cor CSS.
<p class=c><img src=i/input-type-color.png alt="Renderização do Opera do campo type=color em múltiplas plataformas" width=582 height=444><br><a href=examples/input-type-color.html>Teste você mesmo o campo <code>type="color"</code></a>.
<p><i>Obrigado ao Patrick Lauke e Chris Mills por liberar esta imagem para ser inclusa no livro.</i> Você deveria <a href=http://dev.opera.com/articles/view/new-form-features-in-html5/>ler o artigo deles sobre as novas características dos formulários no Opera 11</a>.
<p class=a>❧
<h2 id=validation>Validação de formulários</h2>
<table class=bc>
<caption>Suporte a validação de formulário</caption>
<thead>
<tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
<tbody>
<tr><td>·<td>4.0+<td>5.0+<td>10.0+<td>9.0+<td>·<td>·
</table>
<p>Neste capítulo, eu falo sobre os novos tipos de campos e suas características, como foco automático, mas eu não mencionei o que é, talvez, a parte mais emocionante nos formulários <abbr>HTML5</abbr>: validação automática dos campos. Considerando o problema comum de digitar um endereço de email em um formulário web. Você provavelmente possui uma validação no lado do cliente em JavaScript, seguido por uma no lado do servidor em PHP ou Python ou outra linguagem de servidor. <abbr>HTML5</abbr> nunca poderá substituir a validação do servidor, mas pode um dia substituir a do lado do cliente.
<p>Há dois grandes problemas em validar um endereço de email em JavaScript:
<ol>
<li>Um número surpreendente do seus visitantes (provavelmente cerca de 10%) não possui JavaScript habilitado
<li>Você vai fazer errado.
</ol>
<p>Sério, você vai fazer errado. Determinar se uma seqüência aleatória de caracteres é um endereço de email válido <a href="http://www.regular-expressions.info/email.html">é inacreditavelmente complicado</a>. Quanto mais você olha, <a href="http://www.ex-parrot.com/pdw/Mail-RFC822-Address.html">mais complicado fica</a>. Eu já falei que é <a href="http://haacked.com/archive/2007/08/21/i-knew-how-to-validate-an-email-address-until-i.aspx">muito, muito complicado</a>? Não seria mais fácil deixar esta dor de cabeça para o navegador?
<p class="legend top" style="width:500px;text-align:center">Navegadores modernos validam o type=“email” <span class=arrow>↷</span><br></p>
<p class=c><img src=i/input-type-email-validation.png alt="mensagem de erro na validação do campo type=email" width=243 height=76>
<p>A imagem de tela pertence ao Opera 10, porém a funcionalidade está presente desde o Opera 9. <a href=http://blog.mozilla.com/webdev/2011/03/14/html5-form-validation-on-sumo/>Firefox 4 e Chrome 10 também fornecem a mesma funcionalidade</a>. A única marcação envolvida é <a href=#type-email>setar o atributo <code>type</code> para <code>"email"</code></a>. Quando o usuário tentar enviar o formulário com um campo <code><input type="email"></code> o navegador automaticamente oferece uma validação <abbr>RFC</abbr>-compliant, mesmo se os scripts estiverem desabilitados.
<p><abbr>HTML5</abbr> também oferece validação para endereços web no campo <code><input type="url"></code> e de números no <code><input type="number"></code>. A validação de números também leva em conta os atributos <code>min</code> e <code>max</code> attributes, ou seja os navegadores não irão permitir enviar o formulário se você digitar um número que seja muito grande.
<p class=c><img src=i/input-type-number-validation.png alt="mensagem de erro na validação do campo type=number" width=135 height=76>
<p>Não há nenhuma marcação para ativar a validação de formulário do <abbr>HTML5</abbr>; é feita por padrão. Para desligar, use o atributo <code>novalidate</code>.
<p class="legend top">Não me valide, parceiro <span class=arrow>↷</span><br></p>
<pre><code><form <mark>novalidate</mark>>
<input type="email" id="addr">
<input type="submit" value="Subscribe">
</form></code></pre>
<p class=a>❧
<h2 id=required>Campos obrigatórios</h2>
<table class=bc>
<caption>Suporte aos campos obrigatórios</caption>
<thead>
<tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
<tbody>
<tr><td>·<td>4.0+<td>·<td>10.0+<td>9.0+<td>·<td>·
</table>
<p><a href=#validation>Validação de formulários com <abbr>HTML5</abbr></a> não se limita a cada tipo de campo. Você pode também especificar que certo campo é obrigatório. Os campos obrigatórios precisam de um valor antes de serem enviados.
<p>A marcação para um campo obrigatório é a mais simples possível:
<pre><code><form>
<input id="q" <mark>required</mark>>
<input type="submit" value="Search">
</form></code></pre>
<p class="clear"><a href=examples/input-required.html>Teste <code><input required></code> em seu navegador</a>. Navegadores podem alterar a aparência padrão dos campos obrigatórios. Por exemplo, assim é como um campo obrigatório parece no Mozilla Firefox 4.0
<p class=c><img src=i/input-required.png alt="aparência padrão de um campo obrigatório no Firefox" width=250 height=122>
<p>Além disso, se você tentar enviar o formulário sem preencher o valor requerido, o Firefox irá mostrar uma mensagem informando que o campo é obrigatório e não pode ser deixado em branco.
<p class=a>❧
<h2 id=further-reading>Leitura Complementar</h2>
<p>Especificações e normas:
<ul>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attribute>tipos de <code><input></code></a>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute>o atributo <code><input placeholder></code></a>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofocusing-a-form-control>o atributo <code><input autofocus></code></a>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fs-novalidate>o atributo <code><form novalidate></code></a>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-required-attribute>o atributo <code><input required></code></a>
</ul>
<p>Bibliotecas JavaScript
<ul>
<li><a href=http://www.modernizr.com/>Modernizr</a>, biblioteca de detecção de <abbr>HTML5</abbr>
</ul>
<p>Artigos Úteis
<ul>
<li><a href=http://www.alistapart.com/articles/forward-thinking-form-validation/>Pensando pra frente Validação de formulários</a>
<li><a href=http://dev.opera.com/articles/view/new-form-features-in-html5/>Novos recursos de formulários no Opera 11</a>
<li><a href=https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5>Mozilla Developer Center: Formulários na HMTL5</a>
<li><a href=https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5>Formulários na <abbr>HTML5</abbr> no Mozilla Firefox 4.0+</a>
<li><a href=http://blog.mozilla.com/webdev/2011/03/14/html5-form-validation-on-sumo/>Validação de formulários na HTML5</a>
</ul>
<p class=a>❧
<p>Isso foi o “Uma forma de loucura.” Consulte o <a href=table-of-contents.html>Sumário</a> caso queria continuar com a leitura.
<div class=pf>
<h4>Você Sabia?</h4>
<div class="moneybags">
<blockquote><p>Em associação a <span lang="en">Google Press</span>, O’Reilly está distribuindo este livro em variados formatos, incluindo papel, ePub, Mobi, <abbr>DRM</abbr>-free e <abbr>PDF</abbr>. A edição paga é chamada <span lang="en">“HTML5: Up & Running”</span> e está disponível agora. Este capítulo está incluído na versão paga.
</p><p>Se você gostou deste capítulo e quer mostrar sua apreciação, basta <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=0596806027">comprar o livro “<abbr>HTML5</abbr>: Up & Running” com esse link afiliado</a> ou <a href="http://oreilly.com/catalog/9780596806033">comprar a edição eletrônica diretamente da O’Reilly</a>. Você vai ganhar um livro, e eu vou ganhar um trocado. Atualmente, não aceito doações diretas.
</p></blockquote>
</div>
</div>
<p class=c>Copyright MMIX–MMXI <a href=about.html>Mark Pilgrim</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014437924039265546826:2nmoshc8y3y><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google™"> <input type=submit name=sa value=Pesquisar></div></form>
<script src=j/jquery.js></script>
<script src=j/modernizr.js></script>
<script src=j/dih5.js></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4114546-27']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>