Programação WEB I Aula 08 – Formulários Web

Roteiro da Aula

• Formulários Web

Formulários

• Um dos recursos mais interessantes da linguagem Html é a possibilidade de criar formulários eletrônicos.

• Usando um formulário o usuário pode interagir com o servidor, enviando dados que serão processados no servidor e posteriormente devolvidos ao cliente.

• Esses comandos são os principais responsáveis pela viabilização da troca de informações entre o cliente e o servidor. Eles podem ser usados em qualquer tipo de atividade.

Formulários

• Os formulários são iniciados com a tag de abertura <form> e encerrados com a tag de fechamento </form>.

• É muito importante que todo o conteúdo do corpo do formulário esteja entre essas duas tags de abertura e fechamento.

<form> </form>

Formulários

• Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários.

• Em especial, colocamos dentro da marcação de <FORM> as formatações para campos de entrada de dados, que são três:

• <INPUT>

• <SELECT>

• <TEXTAREA>.

Tag <input>

• A forma mais simples de campo de entrada é a marcação text utilizando a tag <input>.

• A tag <input> tem um atributo TYPE, ao qual atribuímos seis valores diferentes para gerar seis tipos diferentes de entrada de dados:

• Text

• Radio

• Checkbox

• Password

• Hidden

• File

Tag <input>

• Além do atributo type, a tag <input> apresenta os seguintes atributos:

• O atributo name identifica o campo através de um nome

• O atributo size representa a largura da caixa

• O maxlength representa o número máximo de caracteres a serem digitados

• O atributo value representa o conteúdo da caixa de texto

Tag <input type=“text”>

• Quando INPUT não apresenta atributos, é assumido que TYPE=TEXT (valor padrão);

• Veja a marcação HTML:

• A marcação acima produz o resultado:

Nome: <input type=text name="nome“>

Nome: <input name="nome“>

OU

Tag <input type=“password”>

• Configurando o atributo type com o valor password, a entrada de texto passa a ter os caracteres escondidos por asteriscos, como se pode ver no exemplo:

• A marcação acima produz o resultado:

Login: <input type=text name="login"><br>

Password: <input type=password name="senha">

Tag <input type=“checkbox”>

• Esse é um campo que permite ao usuário a escolha de várias opções diante de uma série de alternativas.

• O <input type=“checkbox”> aceita múltiplas seleções, logo a pergunta feita ao usuário pode ter mais de uma resposta possível.

<input type=“checkbox”>

Tag <input type=“checkbox”> • Considere a marcação HTML abaixo:

• Note que o nome do campo (NAME) é o mesmo para toda a lista de valores.

• Além disso pode ser usado o atributo CHECKED, que marca uma escolha inicial, isto é, se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida":

Esportes que você pratica:<br>

<input name="esporte" value="futebol" type="checkbox">Futebol<br>

<input name="esporte" value="volei" type="checkbox">Vôlei<br>

<input name="esporte" value="natacao" type="checkbox">Natação<br>

<input name="esporte" value="basquete" type="checkbox">Basquete<br>

<input name="esporte" value="tenis" type="checkbox">Tênis<br>

<input name="esporte" value="bocha" type="checkbox">Atletismo<br>

Tag <input type=“checkbox” • A marcação HTML do slide anterior produz o seguinte resultado

• Caso você queira adicionar o atributo checked para o esporte natação, a marcação HTML é:

<input name="esporte" value="natacao"

type="checkbox" checked="checked">Natação<br>

Tag <input type=“radio”>

• O <input type=“radio”> não aceita múltiplas seleções como o checkbox, logo a pergunta feita ao usuário e que será respondida através da seleção de um dos campos rádio só poderá ter uma resposta possível.

• Considere a marcação HTML abaixo:

Você tem mais de 30 anos?<br/>

<form>

Sim <input type="radio" name="cor" value="sim">

Não <input type="radio" name="cor" value="nao">

</form>

Tag <input type=“radio”>

• A marcação HTML do slide anterior, produz o seguinte resultado:

• Assim como acontece na checkbox, pode ser usado o atributo CHECKED, que marca uma escolha inicial, isto é, se o usuário não escolher nenhuma opção, o formulário irá considerar a alternativa "pré-escolhida":

A tag <textarea> ... </textarea>

• A marcação TEXTAREA não utiliza o formato convencional INPUT TYPE="text" dos exemplos anteriores.

• Ao contrário, uma marcação <TEXTAREA> delimita o seu início e a marcação </TEXTAREA> o seu fim.

• O tamanho da caixa de texto é determinada pelos atributos de colunas (cols) e de linhas ( rows).

• O atributo name é responsável por identificar esse campo.

<textarea> </textarea>

A tag <textarea> ...</textarea>

• Considere a marcação HTML abaixo:

• A marcação acima, produz o seguinte resultado:

Digite um comentário: <br>

<form>

<textarea name="identificador" rows="10" cols="50"> Texto da

Caixa de Formulário

textarea </textarea>

</form>

A tag <select>

• As tags <select>...</select> apresentam uma lista com diversos itens que podem ser selecionados.

• É possível configurar essa tag para aceitar uma seleção simples ou múltiplas seleções.

• Dentro de <select>...</select> fica as tags <option> responsáveis por apresentarem os itens da lista, e o atributo value guarda o valor quando o item é selecionado.

A tag <select> • Veja a marcação HTML abaixo:

• A marcação acima, produz o seguinte resultado

• A tag <option> representa os itens da lista, que será visível assim que o usuário clicar na lista

<select name="sabor">

<option>abacaxi

<option>creme

<option>morango

<option>chocolate

</select>

A tag <select>

• Também é possível estabelecer uma escolha-padrão, através do atributo SELECTED

• Com o atributo SIZE, escolhe-se quantos itens da lista serão mostrados (no exemplo, SIZE=4):

• Veja o resultado da marcação acima:

<option selected> creme

<select name="sabor" size=4>

A tag <select>

• Com o atributo MULTIPLE, define-se que se pode selecionar mais de um item (pressionando a tecla Shift do teclado enquanto se selecionam os itens):

<select name="sabor" size=4 multiple>

Botões • A tag responsável pela criação do botão de envio é o <input> e os seus atributos são:

• type:

• type=”submit” – indica que a função desse botão e de enviar o formulário.

• type=”reset” – indica que os dados preenchidos serão todos apagados e o formulário não será enviado.

• type=”button” – esse type não tem nenhuma função e normalmente é utilizado em conjunto com um comportamento de Javascript que será acionado pelo evento onClick.

• type: texto que aparecerá no botão.

• name= texto para identificar esse input.

Botões

• Considere a marcação HTML:

• O código acima produz o seguinte resultado:

<input type="submit" value="Enviar">

Botões

• Considere a marcação HTML abaixo:

<form>

Nome:<br> <input type="text" size="53"> <br>

Comentário:<br> <textarea name="identificador" rows="10"

cols="50"> Texto da Caixa de Formulário

textarea </textarea>

<br>

<input type="submit" value="Enviar">

</form>

Botões

• A marcação HTML apresentada no slide anterior produz o seguinte resultado:

Botões

• Caso seja necessário substituir o botão de submit por uma imagem que tenha a mesma função, é possível utilizando a tag: <input type=”image”>

<input type=”image” src=”local da imagem” alt=”texto”

border=”0” >

HTML 5: Novos valores para <input type=“”>

• date

• number

<input type=”date”/>

<input type="number" min="1" max="5">

HTML 5: Novos valores para <input type=“”>

• range

• search

• time

<input type="range" min="0" max="10">

<input type="search" />

<input type=“time" />

Próxima Aula

• Noções básicas de JavaScript