O documento apresenta uma aula sobre formulários em HTML5 ministrada pelo professor Gustavo Zimmermann, abordando os elementos novos, tipos de campos e atributos como 'required', 'autofocus' e 'placeholder'. Inclui exemplos práticos de uso de elementos como <form>, <fieldset>, <legend>, <datalist> e novos tipos de campos como 'tel', 'email', 'color', entre outros. Também discute as características de dados, validadores e a edição de conteúdo com 'contenteditable'.

1. Aula 2:

2. prof. Gustavo Zimmermann | contato@gust4vo.com
Objetos

3. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Objetos
Elementos
form
<form>
</form>
Objetos do Formulário:
<label>
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
Guia completo:
http://www.w3schools.com/tags/tag_input.asp

4. prof. Gustavo Zimmermann | contato@gust4vo.com
Novos
Objetos

5. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos Objetos
Elementos
fieldset e legend
<form>
<fieldset>
<legend>LOGON</legend>
Login: <input type=“text” /><br />
Senha: <input type=“password” />
</fieldset>
<input type=“button” value=“Logar” />
</form>

6. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos Objetos
Elementos
for
id
<form>
<input type=“radio” name=“sexo” id=“m” />
<label for=“m”>Masculino</label>
<br />
<input type=“radio” name=“sexo” id=“f” />
<label for=“f”>Feminino</label>
</form>

7. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos Objetos
Elementos
datalist
<form>
<label>Cidade:</label><br />
<input type="text" list="cidades" />
<datalist id="cidades">
<option>Santa Maria</option>
<option>Palma</option>
<option>Santuário</option>
<option>Restinga Seca</option>
<option>Agudo</option>
<option>Paraiso do Sul</option>
<option>Novo Cabrais</option>
<option>Cachoeira do Sul</option>
</datalist>
</form>

8. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos Objetos
Elementos
optgroup
<select>
<optgroup label=“Cidades”>
<option>Santa Maria</option>
<option>Cachoeira do Sul</option>
<option>Porto Alegre</option>
</optgroup>
<optgroup label=“Frutas”>
<option>Uva</option>
<option>Laranja</option>
</optgroup>
</select>

9. prof. Gustavo Zimmermann | contato@gust4vo.com
Novos tipos
de Campos

10. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
tel

11. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
search

12. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
email

13. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
url

14. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
Datas e horas
datetime, date, month, week, time, datetime-local

15. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
number
min max

16. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
range
step

17. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
color
com type="color"

18. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
color
com type="color"

19. prof. Gustavo Zimmermann | contato@gust4vo.com
Tipos de Dados
e Validadores

20. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Tipos de Dados e Validadores
autofocus
<input name="login" autofocus >

21. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Tipos de Dados e Validadores
placeholder
onfocus
<input type="text" placeholder="Procure aqui">
<input type="text" value=“Procure aqui" onfocus="if(this.value== 'Procure aqui')
{ this.value='' }"onblur="if(this.value==''){ this.value='Procure aqui'; } '" />

22. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Tipos de Dados e Validadores
required
<input name="login" required>

23. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Tipos de Dados e Validadores
maxlength
<textarea maxlength=“30”></textarea>

24. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Tipos de Dados e Validadores
novalidate e formnovalidate
<input type="submit" name="action" value="Salvar rascunho" formnovalidate>

25. prof. Gustavo Zimmermann | contato@gust4vo.com
Detalhes e
Conteúdo
Editável

26. prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Detalhes e Conteúdo Editável
Conteúdo editável
contenteditable
<div contenteditable="true">
Edite-me...
</div>

27. prof. Gustavo Zimmermann | contato@gust4vo.com
<fim />