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

Aula 2:

prof. Gustavo Zimmermann | [email protected]

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




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)

Documents

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