SlideShare uma empresa Scribd logo
Aula 2:
prof. Gustavo Zimmermann | contato@gust4vo.com
Objetos
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
prof. Gustavo Zimmermann | contato@gust4vo.com
Novos
Objetos
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>
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>
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>
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>
prof. Gustavo Zimmermann | contato@gust4vo.com
Novos tipos
de Campos
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
tel
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
search
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
email
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
url
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
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
number
min max
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
range
step
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
color
com type="color"
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
color
com type="color"
prof. Gustavo Zimmermann | contato@gust4vo.com
Tipos de Dados
e Validadores
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Tipos de Dados e Validadores
autofocus
<input name="login" autofocus >
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'; } '" />
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Tipos de Dados e Validadores
required
<input name="login" required>
prof. Gustavo Zimmermann | contato@gust4vo.com
HTML5 - Formulários
Tipos de Dados e Validadores
maxlength
<textarea maxlength=“30”></textarea>
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>
prof. Gustavo Zimmermann | contato@gust4vo.com
Detalhes e
Conteúdo
Editável
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>
prof. Gustavo Zimmermann | contato@gust4vo.com
<fim />

Mais conteúdo relacionado

Mais procurados

DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
Thiago Poiani
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
ledsifes
 
Curso Básico de Word 2013 - Parte II
Curso Básico de Word 2013 - Parte IICurso Básico de Word 2013 - Parte II
Curso Básico de Word 2013 - Parte II
ABCursos OnLine
 
Aula 1 - Introdução a POO
Aula 1 -  Introdução a POOAula 1 -  Introdução a POO
Aula 1 - Introdução a POO
Daniel Brandão
 
JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)
Gustavo Zimmermann
 
Linguagem C - Vetores
Linguagem C - VetoresLinguagem C - Vetores
Linguagem C - Vetores
Elaine Cecília Gatto
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
Word basico 2016
Word basico 2016Word basico 2016
Word basico 2016
Tiago Dill
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
Rodrigo Branas
 
Lista de exercicios algoritmos com pseudocodigo
Lista de exercicios   algoritmos com pseudocodigoLista de exercicios   algoritmos com pseudocodigo
Lista de exercicios algoritmos com pseudocodigo
Mauro Pereira
 
Introdução CSS
Introdução CSSIntrodução CSS
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 
Tutorial - Criando Banco com MySQL Workbench
Tutorial - Criando Banco com MySQL WorkbenchTutorial - Criando Banco com MySQL Workbench
Tutorial - Criando Banco com MySQL Workbench
Daniel Brandão
 
Algoritmo aula 01-f
Algoritmo   aula 01-fAlgoritmo   aula 01-f
Algoritmo aula 01-f
Professor Samuel Ribeiro
 
Apostila Microsoft Office Excel 2016
Apostila Microsoft Office Excel 2016Apostila Microsoft Office Excel 2016
Apostila Microsoft Office Excel 2016
Cibele Kanegae
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
Aula 1 Excel básico
Aula 1   Excel básicoAula 1   Excel básico
Aula 1 Excel básico
Saulo Said
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
Vinícius Roggério da Rocha
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
Leonardo Soares
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
Centro Paula Souza
 

Mais procurados (20)

DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Curso Básico de Word 2013 - Parte II
Curso Básico de Word 2013 - Parte IICurso Básico de Word 2013 - Parte II
Curso Básico de Word 2013 - Parte II
 
Aula 1 - Introdução a POO
Aula 1 -  Introdução a POOAula 1 -  Introdução a POO
Aula 1 - Introdução a POO
 
JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)
 
Linguagem C - Vetores
Linguagem C - VetoresLinguagem C - Vetores
Linguagem C - Vetores
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Word basico 2016
Word basico 2016Word basico 2016
Word basico 2016
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
Lista de exercicios algoritmos com pseudocodigo
Lista de exercicios   algoritmos com pseudocodigoLista de exercicios   algoritmos com pseudocodigo
Lista de exercicios algoritmos com pseudocodigo
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Tutorial - Criando Banco com MySQL Workbench
Tutorial - Criando Banco com MySQL WorkbenchTutorial - Criando Banco com MySQL Workbench
Tutorial - Criando Banco com MySQL Workbench
 
Algoritmo aula 01-f
Algoritmo   aula 01-fAlgoritmo   aula 01-f
Algoritmo aula 01-f
 
Apostila Microsoft Office Excel 2016
Apostila Microsoft Office Excel 2016Apostila Microsoft Office Excel 2016
Apostila Microsoft Office Excel 2016
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Aula 1 Excel básico
Aula 1   Excel básicoAula 1   Excel básico
Aula 1 Excel básico
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 

Destaque

HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)
Gustavo Zimmermann
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
Tim Koch-Grünberg
 
CSS3: Start (aula 1)
CSS3: Start (aula 1)CSS3: Start (aula 1)
CSS3: Start (aula 1)
Gustavo Zimmermann
 
Farol: Os 4 ciclos
Farol: Os 4 ciclosFarol: Os 4 ciclos
Farol: Os 4 ciclos
Gustavo Zimmermann
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
Jose Berardo
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
Jose Berardo
 
HTML5 Básico: Multimídia 2 (aula 4)
HTML5 Básico: Multimídia 2 (aula 4)HTML5 Básico: Multimídia 2 (aula 4)
HTML5 Básico: Multimídia 2 (aula 4)
Gustavo Zimmermann
 
Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016
Léo Dias
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
PeslPinguim
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Fábio Flatschart
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
Gustavo Zimmermann
 
JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)
Gustavo Zimmermann
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
Aula html5
Aula html5Aula html5
Aula html5
Rodrigo Gidra
 
The Appy Hour
The Appy HourThe Appy Hour
The Appy Hour
BigRock India
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
Campus Party Brasil
 
Html (formulário)
Html (formulário)Html (formulário)
Html (formulário)
andreluizlc
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
Afonso Gomes
 
Precisa testar? - Parte 1
Precisa testar? - Parte 1Precisa testar? - Parte 1
Precisa testar? - Parte 1
Fernando Fabricio
 

Destaque (20)

HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
 
CSS3: Start (aula 1)
CSS3: Start (aula 1)CSS3: Start (aula 1)
CSS3: Start (aula 1)
 
Farol: Os 4 ciclos
Farol: Os 4 ciclosFarol: Os 4 ciclos
Farol: Os 4 ciclos
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
 
HTML5 Básico: Multimídia 2 (aula 4)
HTML5 Básico: Multimídia 2 (aula 4)HTML5 Básico: Multimídia 2 (aula 4)
HTML5 Básico: Multimídia 2 (aula 4)
 
Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
 
JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Aula html5
Aula html5Aula html5
Aula html5
 
The Appy Hour
The Appy HourThe Appy Hour
The Appy Hour
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
 
Html (formulário)
Html (formulário)Html (formulário)
Html (formulário)
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
 
Precisa testar? - Parte 1
Precisa testar? - Parte 1Precisa testar? - Parte 1
Precisa testar? - Parte 1
 

Mais de Gustavo Zimmermann

Aula 13 - Livros Proféticos
Aula 13 - Livros ProféticosAula 13 - Livros Proféticos
Aula 13 - Livros Proféticos
Gustavo Zimmermann
 
Aula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-AvaliaçãoAula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-Avaliação
Gustavo Zimmermann
 
Aula 11 - Livros Poéticos
Aula 11 - Livros PoéticosAula 11 - Livros Poéticos
Aula 11 - Livros Poéticos
Gustavo Zimmermann
 
Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)
Gustavo Zimmermann
 
Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)
Gustavo Zimmermann
 
Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)
Gustavo Zimmermann
 
Aula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-AvaliaçãoAula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-Avaliação
Gustavo Zimmermann
 
Aula 6 - Deuteronômio
Aula 6 - DeuteronômioAula 6 - Deuteronômio
Aula 6 - Deuteronômio
Gustavo Zimmermann
 
Aula 5 - Números
Aula 5 - NúmerosAula 5 - Números
Aula 5 - Números
Gustavo Zimmermann
 
Aula 1 - História da Bíblia
Aula 1 - História da BíbliaAula 1 - História da Bíblia
Aula 1 - História da Bíblia
Gustavo Zimmermann
 
Aula 3 - Êxodo
Aula 3 - ÊxodoAula 3 - Êxodo
Aula 3 - Êxodo
Gustavo Zimmermann
 
Aula 4 - Levíticos
Aula 4 - LevíticosAula 4 - Levíticos
Aula 4 - Levíticos
Gustavo Zimmermann
 
Aula 2 - Gênesis
Aula 2 - GênesisAula 2 - Gênesis
Aula 2 - Gênesis
Gustavo Zimmermann
 
Aula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas MetodologiasAula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas Metodologias
Gustavo Zimmermann
 
Aula 2 - Teologia Natural
Aula 2 - Teologia NaturalAula 2 - Teologia Natural
Aula 2 - Teologia Natural
Gustavo Zimmermann
 
Conciência Política
Conciência PolíticaConciência Política
Conciência Política
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Gustavo Zimmermann
 

Mais de Gustavo Zimmermann (20)

Aula 13 - Livros Proféticos
Aula 13 - Livros ProféticosAula 13 - Livros Proféticos
Aula 13 - Livros Proféticos
 
Aula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-AvaliaçãoAula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-Avaliação
 
Aula 11 - Livros Poéticos
Aula 11 - Livros PoéticosAula 11 - Livros Poéticos
Aula 11 - Livros Poéticos
 
Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)
 
Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)
 
Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)
 
Aula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-AvaliaçãoAula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-Avaliação
 
Aula 6 - Deuteronômio
Aula 6 - DeuteronômioAula 6 - Deuteronômio
Aula 6 - Deuteronômio
 
Aula 5 - Números
Aula 5 - NúmerosAula 5 - Números
Aula 5 - Números
 
Aula 1 - História da Bíblia
Aula 1 - História da BíbliaAula 1 - História da Bíblia
Aula 1 - História da Bíblia
 
Aula 3 - Êxodo
Aula 3 - ÊxodoAula 3 - Êxodo
Aula 3 - Êxodo
 
Aula 4 - Levíticos
Aula 4 - LevíticosAula 4 - Levíticos
Aula 4 - Levíticos
 
Aula 2 - Gênesis
Aula 2 - GênesisAula 2 - Gênesis
Aula 2 - Gênesis
 
Aula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas MetodologiasAula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas Metodologias
 
Aula 2 - Teologia Natural
Aula 2 - Teologia NaturalAula 2 - Teologia Natural
Aula 2 - Teologia Natural
 
Conciência Política
Conciência PolíticaConciência Política
Conciência Política
 
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
 
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
 
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
 

HTML5 Básico: Formulários (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 />