HTML5 Básico: Formulários (aula 2)
-
Upload
gustavo-zimmermann -
Category
Documents
-
view
761 -
download
3
description
Transcript of HTML5 Básico: Formulários (aula 2)
Aula 2:
prof. Gustavo Zimmermann | [email protected]
Objetos
prof. Gustavo Zimmermann | [email protected]
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 | [email protected]
Novos Objetos
prof. Gustavo Zimmermann | [email protected]
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 | [email protected]
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 | [email protected]
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 | [email protected]
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 | [email protected]
Novos tipos de Campos
prof. Gustavo Zimmermann | [email protected]
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
tel
prof. Gustavo Zimmermann | [email protected]
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
search
prof. Gustavo Zimmermann | [email protected]
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
prof. Gustavo Zimmermann | [email protected]
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
url
prof. Gustavo Zimmermann | [email protected]
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 | [email protected]
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
number
min max
prof. Gustavo Zimmermann | [email protected]
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
range
step
prof. Gustavo Zimmermann | [email protected]
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
color
com type="color"
prof. Gustavo Zimmermann | [email protected]
HTML5 - Formulários
Novos tipos de Campos
Novos valores para o atributo type
color
com type="color"
prof. Gustavo Zimmermann | [email protected]
Tipos de Dados e Validadores
prof. Gustavo Zimmermann | [email protected]
HTML5 - Formulários
Tipos de Dados e Validadores
autofocus
<input name="login" autofocus >
prof. Gustavo Zimmermann | [email protected]
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 | [email protected]
HTML5 - Formulários
Tipos de Dados e Validadores
required
<input name="login" required>
prof. Gustavo Zimmermann | [email protected]
HTML5 - Formulários
Tipos de Dados e Validadores
maxlength
<textarea maxlength=“30”></textarea>
prof. Gustavo Zimmermann | [email protected]
HTML5 - Formulários
Tipos de Dados e Validadores
novalidate e formnovalidate
<input type="submit" name="action" value="Salvar rascunho" formnovalidate>
prof. Gustavo Zimmermann | [email protected]
Detalhes e Conteúdo Editável
prof. Gustavo Zimmermann | [email protected]
HTML5 - Formulários
Detalhes e Conteúdo Editável
Conteúdo editável
contenteditable
<div contenteditable="true">
Edite-me...
</div>
prof. Gustavo Zimmermann | [email protected]
<fim />