HTML5 Básico: Formulários (aula 2)

prof. Gustavo Zimmermann | contato@gust4vo.com
Objetos

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

Novos
Objetos

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>

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>

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>

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>

Novos tipos
de Campos

Novos tipos de Campos
Novos valores para o atributo type
tel

search

email

url

Datas e horas
datetime, date, month, week, time, datetime-local

number
min max

range
step

color
com type="color"

Tipos de Dados
e Validadores

Tipos de Dados e Validadores
autofocus
<input name="login" autofocus >

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'; } '" />

required
<input name="login" required>

maxlength
<textarea maxlength=“30”></textarea>

novalidate e formnovalidate
<input type="submit" name="action" value="Salvar rascunho" formnovalidate>

Detalhes e
Conteúdo
Editável

Detalhes e Conteúdo Editável
Conteúdo editável
contenteditable
<div contenteditable="true">
Edite-me...
</div>

<fim />

HTML5 Básico: Formulários (aula 2)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Mais de Gustavo Zimmermann

Mais de Gustavo Zimmermann (20)

HTML5 Básico: Formulários (aula 2)