Programação para Web I

Formulários são um dos principais pontos de interação entre um usuário e uma aplicação/site web. Estas estruturas permitem a entrada de dados, que geralmente é enviado ao servidor web para processamento e armazenamento ou usado pelo próprio front-end para alterar o comportamento da interface de alguma forma. Este último comportamento é ainda mais comum para as aplicações atuais, através da utilização de Javascript e frameworks para front-end.

O HTML dispõe de diversos controles de entrada (como texto, botões, checkboxes, calendário...) que são geralmente integrados dentro da estrutura de um formulario (form). Esses diverentes tipos de estruturas permitem que os dados entrados pelo usuário sejam rapidamente forçadois, validados e/ou formatados.

Antes de iniciar a estrutura de um formulário no HTML, é importante esquematizar a quantidade, tipo de dado e localização das entradas. Isso é especialmente importante para que a entrada de dados pelo usuário seja praticamente auto guiada, sem a necessidade de incluir extensos parágrafos orientando como preencher os dados na entrada.

Os principais elementos HTML utilizados em um formulário são os seguintes:

Formulário (form)

O elemento form é utilizado para encapsular e definir a estrutura de formulário. Este elemento é semântico (como section e footer). Este elemento possui dois atributos que geralmente são definidos por boa prática

• O atributo action define o endereço (URI) para a onde o formulário será enviado os dados contidos dentro da estrutura do formulário
• O atributo method define qual o tipo de método HTTP será utilizado para enviar os dados (geralmente get ou post)

Exemplo:

<form action="venson.net.br/valida" method="GET"></form>

Entradas (input)

O elemento input é utilizado para ofercer uma entrada de dados ao usuário. Este elemento possui diversos atributos configuráveis, porém existem alguns que devem ser observados:

• O atributo name define um identificador nominal para uma variável a ser enviada através do formulário. Em alguns casos, diferentes entradas podem ter um mesmo nome.
• O atributo id define um identificador único para um elemento específico. Nesse caso, não é possível que dois elementos input possuam identificadores iguais. Esse atributo é utilizado principalmente para identificar elementos particulares com a finalidade de estilização (CSS) ou tratamento (javascript)
• O atributo method define qual o tipo de método HTTP será utilizado para enviar os dados (geralmente get ou post)

Exemplo:

<input type="text" name="usuario" placeholder="Digite seu email">

Rótulos (label)

O elemento label é utilizado como um identificador semântico para cada uma das entradas de dadados (os inputs) presentes no formulário.

• Opcionalmente, podemos usar o atributo for para definir o elemento ao qual pertence (usando seu id)

Este elemento exige fechamento. Exemplo:

<label>Nome de Usuário: <input type="text" id="User" name="Name" /></label>

Botões (button)

O elemento button representa um botão na interface com o usuário, geralmente utilizado para enviar os dados de um formulário ou executar uma ação mais específica. Apesar de alternativamente podemos utilizar um input do tipo button, o uso do elemento button é recomendado por razões semânticas.

• O atributo form especifica a qual formulário (identificado com id) representa a ação desse botão.
• O atributo type especifica o tipo de uso do botão (submit,reset ou button).

Este elemento exige fechamento. Exemplo:

<button form="Cadastro"&gt type="submit">Cadastrar</button>

Agrupadores (fieldset)

O elemento fieldset permite agrupar elementos de formulário. Pode ser usado para agrupar elementos do tipo radio, por exemplo.

Alguns atributos são comuns para praticamente todos os tipos de entrada listados acima:

• id deve especificar uma descrição única para aquele componente
• name deve especificar nome para o componente. Em componentes como radio, vários componentes podem ter o mesmo nome para agrupar os resultados.
• form pode ser usado para especificar o ID de um formulário caso o elemento não esteja diretamente aninhado a ele.
• value o valor inicial de um campo pode ser definido através deste atributo.
• disabled (booleano) desabilita a entrada de dados no elemento.

Um campo de entrada de texto que permite apenas uma linha. Podemos utilizar o atributotype com os seguintes valores:

• Texto type="text"

  Entrada de texto genérico

• Email type="email"

  Entrada de email

• Senha type="password"

  Entrada de texto com caracteres omitidos (asterisco *)

• Pesquisa type="search"

  Entrada de texto genérico, porém alguns navegadores usam esse tipo com características especiais de pesquisa

• Telefone type="tel"

  Entrada de número de telefone. Em dispositivos móveis, abre teclado específico

• Endereço Virtual type="url"

  Entrada de endereço virtual. Exige que o texto possua o formato de URL

• Númerico type="number"

  Entrada que permite apenas números. Pode ser combinada com os atributos minemax para garantir validação automática do campo na interface.

Repare que na maioria dos casos, os diferentes tipos possuem função semântica e de pré validação dos campos de um formulário.

Alguns atributos podem ser utilizados com praticamente todos os elementos acima:

• placeholder permite definir texto de "ajuda" quando não há nada digitado no campo.
• required (booleano) obriga que o campo possua um valor antes de ser submetido

A caixa de seleção (checkbox) é um atributo de entrada que permite valores binários (verdadeiro/falso). O campo type deve ter o valor checkbox:

Repare que é possível usar os atributos binários checked e disabledpara, respectivamente, iniciar a caixa marcada e desabilitar a mesma.

A caixa de opção (Radio Buttom) é um atributo de entrada que permite valores binários (verdadeiro/falso). No entanto, esse tipo de caixa de entrada é utilizado para agrupar mais de um valor, criando grupos de opções onde apenas UM dos itens pode ser verdadeiro/selecionado. O campotype deve ter o valor radio, e todos os botões de um mesmo grupo devem possuir o mesmo atributo name. Outro atributo importante que precisa ser usado é ovalue. Para cada um dos inputs, o value deve possuir um valor que corresponda ao elemento.

<input type="radio" id="radioOpcao01" name="radioOpcao" value="laranja"> <label>Laranja</label>
<input type="radio" id="radioOpcao02" name="radioOpcao" value="limao" checked> <label>Limão</label>
<input type="radio" id="radioOpcao03" name="radioOpcao" value="maca" disabled> <label>Maçã</label>

Repare que é possível usar os atributos binários checked e disabledpara, respectivamente, iniciar a caixa marcada e desabilitar a mesma.

O uso de controles deslizantes permite definir a entrada de números dentro de um intervalo específico, definindo inclusive níveis de precisão. O campo type deve ter o valorrange:

Repare que não há nenhuma resposta númerica do controle deslizante para qual número está selecionado no nomento, por isso usamos no exemplo abaixo um código javascript para apresentar esse dado:

Não se preocupe no momento com este javascript ;)

Os campos de data e hora utilizam interfaces dos próprios navegadores para seleção de datas e horários. O campotype deve ter os seguintes valores:

A implementação de alguns desses tipos de entrada de dados ainda não estão implementadas nas versões estáveis de vários navegadores, como Firefox e Safari. Nesse caso, a utilização de tipos como datetime-local, month e week podem ser forçadamente convertidos para campos de text

Os campos de seleção de cor permitem selecionar facilmente uma cor no formato hexadecimal. O campotype deve possuir o valor color:

Os campos de seleção de arquivo permitem selecionar o caminho de um arquivo ou pasta no sistema de arquivos do usuário. O campotype deve possuir o valor file:

Você pode enviar vários arquivos de uma só vez nesse campo usando o atributo bináriomultiple e criar um filtro de arquivos usando o atributo accept. Repare que este campo armazena apenas o caminho do arquivo

Os campos de texto multi-linha permitem a inserção de texto com quebra de linha, geralmente necessário em entradas de comentários e textos com maior complexidade. Ao contrário dos elementos anteriores, o texto de multiplas linhas usa sua própria tag, chamada textarea, que deve possuir elemento inicial e de fechamento, como no exemplo a seguir:

<textarea cols="30" rows="8">
    Texto pré inserido
</textarea>

O texto de multiplas linhas podem conter atributos como o rows e cols, que especificam número de linhas e colunas, respectivamente, que serão exibidas. Porém esses valores são geralmente definidos através do CSS. Outro atributo importante é o wrap, um atributo binário que define se o texto enviado através do formulário terá ou não quebra de linha de acordo com o número de colunas do campo de texto.

Listas suspensas permitem exibir um conjunto de opções . Por boa prática, é importante não usar listas suspensas para um número muito grande de opções. Listas suspensas são criadas usando o elemento select aninhando elementos do tipo option, como no exemplo abaixo:

<select id="fruta" name="fruta">
    <option>Banana</option>
    <option selected>Maçã</option>
    <option>Limão</option>
</select>

O uso do atributo binário selected em uma das opções (e somente em uma) permite automaticamente definir o elemento como seleção padrão.

Usando o elemento optgroup também é possível agrupar as opções por categorias:

<select id="fruta" name="fruta">
    <optgroup label="Cítrica">
        <option>Abacaxi</option>
        <option>Limão</option>
    </opgroup>
    <optgroup label="Outras">
        <option>Banana</option>
        <option>Abacate</option>
    </optgroup>
</select>

O valor de uma opção pode ser definido usando o atributo value. Caso contrário, o valor repassado será exatamente o que está descrito dentro do elementooption

Também é possível alterar o comportamento da lista para permitir mais de um valor selecionado. Para isso, basta adicionar o atributo booleano multiple:

Nesse caso, é possível selecionar mais de um elemento utilizando os botões Ctrl + Clique

Para campos de texto abertos, como type="text" podemos criar listas de autopreenchimento, que permitem ao usuário selecionar uma opção pré-definida ao mesmo tempo que possui liberdade para definir uma nova opção. Para isso, utilizamos o elementodatalist. Este elemento deve aninhar outros elementos do tipo option, e deve obrigatoriamente possuir um id, que será repassado no elementoinputna forma do atributo list. Observe o exemplo:

<label for="time">Qual seu time do coração?</label>
    <input type="text" name="time" id="time" list="listaTimes">

<datalist id="listaTimes">
    <option>Criciúma</option>
    <option>Flamengo</option>
    <option>Vasco</option>
    <option>Grêmio</option>
    <option>Internacional</option>
    <option>Figueirense</option>
    <option>Avaí</option>
    <option>Chapeoense</option>
    <option>Brusque</option>
</datalist>

Os campos escondidos não possuem nenhuma interface com o usuário. Eles permanecem apenas no HTML da página e não são renderizados pelo navegador. A utilidade desses campos é que ele permite adicionar valores conjunto do formulário que não foram definidos pelo usuário de maneira direta. Ele pode, por exemplo, armazenar uma variável específica daquele documento, como versão da página ou do formulário. O campotype deve possuir o valor hidden.

O objetivo de estruturar entradas de dados dentro de um form é permitir que esses dados sejam enviados através de uma requisição HTML. Por padrão, todo formulário HTML é enviado através do método GET. Vamos visualizar o comportamento através do seguinte exemplo:

<form action="valida.html">
    <label>Usuário: </label><input type="text" id="usuario" name="usuario">
    <label>Senha: </label><input type="password" id="senha" name="senha">
    <button type="submit">Enviar</button>
</form>

Após clicar no botão 'Enviar', o navegador imediatamente envia uma requisição para o endereço definido no atributo action, junto dos dados do formulário. Repare que esses dados podem ser visualizados através da URL no navegador:

http://localhost:8080/aulas/valida.html?usuario=ramon&senha=teste123

Também podemos visualizar estes dados usando o Inspetor do navegador. Para isso, antes de enviar o formulário, clique com a direita no navegador, selecione a opçãoInspecionar Elementoou equivalente. Em seguida, encontre a guia Rede na janela que se abriu. Realize o envio do formulário e selecione a requisição que corresponde ao endereço inserido no atributoaction. O resultado a ser exibido deve ser semelhante a este (guiaParams):.

Mais adiante, poderemos tratar esses dados antes que sejam enviados e posteriormente, no lado do servidor, criando aplicações web.

Experimente criar esse exemplo e executá-lo no seu navegador para entender como funciona o processo.

Ainda que não seja o objetivo tratar estes dados no momento, devemos conhecer a diferença entre dois métodos muito utilizados para realizar requisições HTML a partir de formulários: oGETe o POST.

GET

Quando utilizamos este método, todos os dados dos elementos de entrada dentro do formulário são inseridos junto a URL a ser requisitada. Dessa forma, todos os atributos ficam visíveis ao usuário de um navegador por exemplo, permitindo que o mesmo manipule estes dados a partir da própria URL.

POST

Ao usar este método, ao contrário do anterior, não há modificação da URL usada na requisição HTTP. Todos os dados são inseridos no corpo do pacote e ficam transparentes ao usuário comum.

É importante destacar que o método POST não deve ser utilizado como medida de segurança. A grande diferença no uso desses dois métodos para formulários é forma como encapsulam os dados. Algumas pessoas podem utilizar dessa diferença para permitir a criação de links alternativos, como quando pesquisamos algo num buscador como o Google:

https://www.google.com.br/search?q=unesc

Nesse exemplo, podemos perceber que o uso do GET permite que a URL seja repassada a outro usuário, criando uma rota dinâmica para a informação desejada. O mesmo comportamento não seria interessante caso os dados repassados fossem usuário e senha, por exemplo. Porém padrões como o REST evitam esse tipo de uso dos métodos HTTP.

A diferença entre estes dois métodos vai muito além dessas duas características. Além disso, é possível utilizar uma dezena de outros métodos definidos pelo protocolo HTTP. Se tiver curiosidade, pode encontrar mais informações sobre estes métodos aqui

A S.H.I.E.L.D resolveu cadastrar todos os super heróis do mundo. Para isso, a organização deve disponibilizar em breve um formulário no seu site. Todo super-herói deve acessar a página da S.H.I.E.L.D e realizar seu cadastro com as seguintes informações:

• Nome name
• Email de Contato email
• Data de Nascimento birthday
• Alter ego alter_ego
• Telefone tel
• Ocupação employment
• Zona de Atuação zone
• Cor Preferida color
• Observações obs
• Humano (sim/não) human
• Versão do Cadastro (version)

Cada campo deve ter seu respectivo destacado ao lado

A versão do cadastro deve conter o valor 1.0 e deve ser do tipo hidden

Todos os campos devem ser formatados com o tipo especifico de dado. O campo Zona de Atuação deve obrigatoriamente ser de auto-preenchimento, com as seguintes cidades:

• Nova York
• Asgard
• Brasil
• Londres

Inclua um botão para submeter e para resetar o formulário

O formulário deve assumir o método POST, e enviar os dados para o endereço:https://venson.net.br/arquivo/professor/ppw/exercicios/forms/cadastroSuperHeroi.php. O endpoint será responsável apenas por realizar a recepção dos dados.

Crie um formulário que peça ao usuário os seguintes dados:

• Nome do personagem
• Classe (Mago, Arqueiro, Guerreiro)
• Idade
• Cidade (Thais, Carlin, Venore)
• Deseja realizar tutorial? (booleano)
• Nome do Jogador
• Senha do Jogador

Todos os campos devem ser requeridos e o formulário deve ser enviado através do métodoPOST.

Após realizar todas as alterações, empacote a pasta toda e envie ao professor.

Crie um formulário contendo um campo de texto e uma lista de auto preenchimento. Essa lista deverá conter o nome de pelo menos 10 cidades, que serão sugeridas no campo de texto. O formulário deve ser enviado por meio de um botão usando o método GET

Ao final, salve o documento de texto ou bata uma foto do esboço no papel e envie ao professor.