Ambiente web 12

Ambiente WebFormulários

HTMLAula Especial

Elementos de um site bastante úteis para:

- Envio de Mensagens- Cadastro de Pessoas

- Provas Online- Áreas Restritas

- Pesquisas de Opinião

Para que serve um formulário?

Todos os formulários utilizam um código específico para inserir os elementos

gráficos:

Campo de Texto <textfield>Campo de Senha <password>

Botão Rádio <radiobutton>Campo de Data <date>

Área de Texto <textarea>

Quais Elementos Importantes?

Campo para números <number>Campo para Seleção <selection>

Botão para Enviar <submit>Botão para Limpar <reset>

O formulário é inserido na página HTML através da TAG <form>

Todos os formulários utilizam dois atributos principais:

<method> Representa o método pelo qual as informações contidas nos campos serão

enviadas<function> Representa o local para onde esse formulário enviará os dados contidos

nos campos

Atributos de um Formulário

Analise a sintaxe abaixo:<HTML><HEAD><BODY>

<FORM method=“post” action=“recebe.php”>

</FORM></BODY></HTML>

A sintaxe para Iniciar um Formulário

O método utilizado acima foi o POST, poderíamos também utilizar o método GET

As informações desse formulário serão enviadas para uma página chamada

“recebe.php”, a qual armazenará os dados (DATE) contidos nos campos desse

formulário.

Percebam que neste formulário não foi inserido nenhum CAMPO, neste exemplo

utilizaremos apenas alguns campos:

<nome completo><email>

<data de nascimento><sexo>

<escolaridade><comentários>

<FORM method=“post” action=“recebe.php”>

Nome Completo <input type=“text”>E-mail <input type=“email”>

Data Nascimento <input type=“date”>Sexo <selection>

<option>Masculino</option><option>Feminino</option>

</selection>Escolaridade

<input type=“radiobutton”>Ensino Fundamental

<input type=“radiobutton”>Ensino Médio

O código que faz acontecer:

Comentários <textarea></textarea><input type=“submit” value=“Enviar”><input type=“reset” value=“Limpar”>

</FORM>

Principais atributos dos Campos de um formulário:

Size – especifica o tamanho do campoMaxlength – delimita a quantidade de

caracteres podem ser digitados

name – especifica um nome pelo qual o campo será identificado

Cols - especifica a quantidade de colunasRows – especifica a quantidade de linhas

Um pouco de HTML 5Required name – não permite que o campo

permaneça em brancoPlaceholder – digita um valor inicial dentro

do campo servindo como legenda

Atributos de um campo

autofocus – faz com que um campo seja automaticamente selecionado quando a página for carregada (focar no campo)

Value – determina qual valor será armazenado quando o campo for

selecionado (muito utilizado nos campos (select, radio, checkbox)

Pattern – permite criar uma máscara obrigado o usuário respeitar a forma de

escrita do campoAprendendo a utilizar o atributo pattern:

pattern="[0-9]{4}[\-][0-9]{4}

pattern="[0-9]{4}[\-][0-9]{4}O intervalo de números que se encontram entre colchetes determina quais números

podem ser aceitos nesse campoO número que se encontra entre chaves

determina a quantidade de números que o campo pode receber

[0-9] o usuário pode utilizar os números dentro desse intervalo Ex: 3639 no máximo

utilizar 4 números.[\-] o usuário deverá digitar o caractere –

pois a máscara é determinada pelo \ contido entre colchetes.

Ambiente web 12

Documents

Transcript of Ambiente web 12