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 />