Mais sobre uso de formulários Site sem Ajax

Transcrição

1 Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1

2 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2

3 Site usando Ajax para preencher a listagem de informações que coincidem com a parte digitada. 3

4 Atualização apenas da área da direita da página. 4

5 Atualização da área após um filtro ser selecionado. Animação sendo exibida para demonstrar execução. Tag form Engloba todos os campos do formulário. Quando um formulário é enviado, somente os campos em seu interior é enviado. Podem existir vários formulários em uma página, todos são independentes. Algumas ferramentas incluem um formulário em volta do campo quando esse não está sendo inserido dentro de um formulário existente, existe o risco de cada campo ficar em um formulário diferente. atributo id Todas as marcações XHTML podem possuir "id", ele é usado para se fazer referência ao elemento através da linguagem Javascript. atributo action 5

6 Informa o caminho e nome do arquivo que receberá os dados do formulário, chama o arquivo atual quando não é informado. atributo method Informa como os dados do formulário serão enviados, se eles serão incluídos após do nome do arquivo informado na action (get) ou se vão junto com a requisição HTTP (post). atributo name Era usado em linguagens script para fazer referência ao formulário e acessar os seus campos. A recomendação atual é de que se use o id. atributo enctype Informa qual a codificação que será usada para enviar os dados do formulário. O padrão de envio é o "application/x-www-form-urlencoded", é usado o "multipart/formdata" quando for realizar um upload de arquivo. atributo target Informa onde será carregado o código gerado pelo arquivo informado em action. Pode ser informado o nome de um "frame" em uma página com quadros, o nome de um "iframe", o nome de uma janela existente ou uma das palavras padrões. Padrões: _blank, _self, _parent e _top. Não pode ser usado com a DTD strict pois está obsoleto. <form name= meu_form id= meu_form action= processa.aspx method= get > </form> Tag input type="text" Campo de formulário usado para o usuário digitar informações de uma linha. atributo id Todas as marcações XHTML podem possuir "id", ele é usado para se fazer referência ao elemento através da linguagem Javascript. atributo name Atributo de um campo de formulário que é usado para recuperar a informação digitada pelo usuário no arquivo informado na action. Quando é usado o method "get" pode se verificar o par feito pelo valor do "name" e a informação digitada no endereço que é exibido pelo navegador do arquivo que é chamado pelo formulário. atributos size e maxlemgth 6

7 O atributos size especifica a largura da caixa de texto em número de caracteres e o maxlength limita o número máximo de caracteres que pode ser digitado nela. atributo value Permite que a caixa de texto já venha com uma informação inicial, usada para trazer os dados cadastrados em formulários para alteração. atributo readonly Houve uma mudança no funcionamento dele do HTML 4 para o XHTML 1.0. O XML não permite que se tenha atributos sem valor, o atributo deve se sucedido de um sinal de igual e de uma informação entre aspas, fazendo com que ele passasse a ter um valor padrão igual ao nome do atributo, o mesmo ocorreu para outros que existiam no mesmo formato no HTML. Faz com que não se possa alterar o conteúdo da caixa de texto. <input type= text name= idade id= idade maxlength= 3 /> Tag input type="password" Funciona exatamente da mesma forma que o type= text, porém é exibido um símbolo ao invés do caractere digitado. Tag input botões (type= submit, type= reset e type= button") Existem três tipos de botões, o primeiro tem a função de enviar o formulário, fazer o envio das informações para o arquivo especificado em action, o segundo deixa os campos de formulários no estado que estavam quando a página foi carregada e o último é usado junto com programação Javascript. atributo value Determina o texto que será exibido no botão, deve informar a ação que será executada pelo formulário, facilitando o entendimento do usuário. <input type= submit value= Incluir Produto name= btninc id= btninc /> Tag input type= image Funciona da mesma forma que o submit, enviando os dados do formulário, é usada uma imagem para simbolizar o botão. 7

8 atributo src Informa o arquivo da imagem que será carregado como botão. <input type= image name= btnbonito id= btnbonito src= imagens/bonito.gif /> Tag input type= checkbox Caixa de seleção permite que uma opção seja selecionada ou não. Podemos citar como exemplos de uso: revistas que o usuário lê, atividades que pratica, adornos possíveis em um produto, colocar papel de parede em uma compra. atributo value Determina o valor que será enviado se a caixa estive selecionada, o campo não é enviado se a caixa estiver desmarcada. atributo checked Informa se a caixa é apresentada como selecionada quando a página é carregada. Usa o formato XML, sendo apresentado colocado como checked= checked. Obs: Deve ser colocado um texto para informar o significado da caixa. <input type= checkbox name= explosivo id= explosivo value= 1 />Explosivo Tag input type= radio Funciona de forma parecida ao checkbox, porém, permite que apenas uma das opções seja selecionada dentro de um grupo. A página pode possuir vários grupos de opções independentes. atributo id Existe um indicação um pouco diferente, pois não podemos ter dois elementos com o mesmo valor de id e teremos vários elementos com o mesmo valor para name, eles serão diferentes na mesma marcação. Pode ser usar uma combinação com o nome do grupo e da opção por exemplo. atributo name O atributo name possui uma função a mais para o radio, todos botões de opção de um mesmo grupo tem que possuir o mesmo nome. atributo value Funciona da mesma forma que o checkbox. 8

9 Atributo checked Informa qual opção do mesmo grupo está selecionada ao carregar o formulário. Caso exista mais de um botão de opção do mesmo grupo com o atributo, o último a ser lido pelo navegador é que estará selecionado. Obs: Deve ser colocado um texto para informar o significado da opção. <input type= radio name= sexo id= sexo_m value= M />Masculino <input type= radio name= sexo id= sexo_f value= F />Feminino Tag input type= hidden O atributo oculto tem a finalidade de se enviar informações que o usuário não irá digitar e muitas vezes nem tem o conhecimento delas. Existem alguns usos comuns que podemos citar, permite passar a chave primária de um registro que será alterado, montar um formulário de paginação para se usar ao invés de links. Os atributos são os mesmo que o campo de texto, tendo o atributo value como obrigatório, pois ninguém irá interagir com a caixa. <input type= hidden name= cod id= cod value= 1532 /> Tag input type= file O campo de formulário irá exibir uma caixa de texto, que tem a função de exibir o arquivo selecionado com o seu caminho, e um botão que irá abrir uma caixa de diálogo para a escolha do arquivo. A marcação do formulário necessitará que o seu atributo enctype possua o valor "multipart/form-data". O funcionamento pode variar de acordo com cada navegador, alguns permitirão que se digite algo na caixa de texto, outros irão exibir a caixa de diálogo ao se tentar digitar. size Funcionam da mesma forma que o tipo texto para a caixa de texto. <input type= file name= foto id= foto /> Tag textarea Permite que façamos uma caixa de texto com várias linhas. Ela não possui um atributo que limite o número de caracteres, exige que esse controle seja feito com Javascript. Não possui o atributo value, a informação que deve vir preenchida na marcação deve ser colocada entre o par <textarea></ textarea>. 9

10 atributo cols Informa a largura em número de caracteres. atributo rows Informa o número de linhas de texto. <textarea name= caracteristicas id= caracteristicas >Pelo bege com manchas marrons</text area> Tag select Exibe uma lista de opções, ela pode ocupar uma única linha, chamada de caixa de combinação, ou ocupar várias linhas, chamada de caixa de listagem. Possui uma coleção de elementos internos para configurar as opções, option. artributo multiple Permite que seja selecionado mais de uma opção. Funciona da mesma forma que o readonly, exigindo que o valor do atributo seja igual ao nome do próprio atributo. É usada a tecla <CTRL> para que possamos marcar mais de uma opção. atributo size Informa o número de linhas, não deve ser informado ou coloca-se um como valor para que tenhamos uma caixa de combinação, teremos uma caixa de listagem para qualquer número maior. Tag select option A marcação option irá definir cada uma das opções, o que será apresentado e o valor enviado. Ela não possui o atributo name, pois pertence a marcação select. A informação que é exibida para cada opção fica entre o par <option></option>. atributo id Usada para que a marcação permita que o Javascript interaja com ela, o Javascript possui formas de acessá-la através da tag select. atributo value Informa o valor que será enviado caso a opção seja selecionada. atributo selected 10

11 Informa se a opção está pré-selecionada. Caso existam várias opções selecionadas, será apresentada a última que possuir a opção selected para a caixa de combinação e apresentarão marcadas as opções selecionadas para a caixa de listagem. Área de atuação: <select name= area id= area > <oprion value= 1 selected= selected >Análise de Sistemas</option> <oprion value= 2 >Desenvolvimento de Sistemas</option> <oprion value= 3 >Manutenção de Equipamentos</option> <oprion value= 4 >Suporte de Infra-estrutura</option> </select> Tag button Amplia a possibilidade em relação a marcação <input type= image />, ela só permite ter um botão gráfico do tipo submit, a tag button permite os três funcionamentos existentes para o botão. atributo type Especifica o funcionamento do botão. Valores possíveis: submit, reset, button". Obs: deve ser colocado entre o par <button></button> o que será exibido. Pode ser colocada uma imagem ou um texto. <button name= btnenvia id= btnenvia type= submit >Enviar</button> <button name= btnprocessa id= btnprocessa type= button > <img src= proc.jpg alt= botão processa > </button> 11