Formulários em HTML - O que são e para que servem

Tamanho: px
Começar a partir da página:

Download "Formulários em HTML - O que são e para que servem"

Transcrição

1 Formulários em HTML - O que são e para que servem A tag <form> - Os atributos action e method A primeira coisa que iremos fazer é usar a tag <form> para podermos usarmos formulários. Antes de entrarmos em detalhes sobre os atributos e uso desta tag, devemos nos lembrar que o HTML serve apenas para definir a maneira como as informações, inclusive os formulários, estão localizados em uma página de um site. Assim, vamos criar botões, caixas de texto, caixas de senha etc. Mas ao clicar, nada vai ocorrer, pois para fazer alguma ação (como efetuar o login), devemos entrar mais a fundo nos códigos e usar códigos de programação, como em PHP ou JavaScript. Mas antes de aprendermos essas linguagens, precisamos entender o HTML. O atributo action Quando clicamos em um botão ou escrevemos em uma caixa de texto, estamos fazendo uma ação. A ação pode ser o envio de e senha para fazer o login, ou pode ser que ao pressionar um botão todos os campos de textos sejam limpos. Uma ação, como a abertura de uma janela, pode ser tomada se marcamos uma opção numa lista. Enfim, as ações são infinitas, e é o programador que vai decidir o que será feito quando o usuário interagir com o formulário. Essa interação e comandos da ação está definida em um arquivo que contém um script, que são códigos de programação. Logo, este atributo action vai armazenar o endereço, a URL deste arquivo: <form action="url_do_script"> O atributo method Já para o atributo method usaremos dois tipos de valores: get e post Os dois valores, get e post servem para enviar as informações obtidas pelo formulário para o handler, que é o código de programação que vai trabalhar, lidar com as informações inseridas no formulário. Quando usamos o valor get, o dado é passado direto na URL do documento. Por exemplo, se tiver um formulário de nome 'lingua' e você insere no formulário a informação que a língua é o português do Brasil, o 'pt_br', e no código do formulário você usa o get, a URL vai ficar: ANTIGA.com.br/algo.html&lingua=pt_BR

2 Já se você usar o post, vai passar a informação do mesmo jeito, mas não vai ser de uma maneira visível, como no caso do get que mostra a informação na URL.. Assim, a sintaxe geral de um formulário é <form action="url_do_script" method="post"> <form action="url_do_script" method="get"> Para que servem as caixas de senha em HTML Assim como as caixas de textos simples, as caixas de senha são um tipo especial de formulário devido a sua importância, visto que usamos diversas, ao longo do dia. Ao entrar em seu , você preenche seu login e senha. Faz o mesmo para entrar na rede social e até mesmo para usar seu celular. Se você usa o sistema operacional Linux, então, sabe como é comum fornecer a senha para instalar, desinstalar ou fazer qualquer coisa que vá um pouco além do básico, visto que é um sistema extremamente seguro e estável. Na verdade, as caixas de senha (password input boxes, em inglês) não muito diferentes da de texto. A grande vantagem destas é que elas escondem a informação que está sendo digitada, seja através de um asterisco ou a figura de uma bolinha sempre que inserimos algum caractere naquele campo de um formulário de algum site em HTML. Com este tipo de elemento de um formulário, seus usuários podem digitar a senha sem que esta seja vista por pessoas que estejam próximas. Ou seja, elas servem como uma maneira de encriptar ou esconder uma informação segura. Como usar o formulário de Campo de Password: type="password" De fato, a única diferença é no atributo type, que antes era "text", e agora será "password", que significa senha em inglês. E assim como no text input box, vamos usar o atributo name para dar um nome ao nosso campo de senha, pois será necessário identificar cada elemento de um formulário (isso é primordial para tratar os formulários com uma linguagem de programação). Assim, a sintaxe de nossa caixa de password fica: <input type="password" name="senha">

3 Cujo efeito é a seguinte caixa de senha: Tente escrever algo, verá que não vai aparecer, exatamente como ocorre nos formulário de login e senha que você usa por aí, pela internet, mas dessa você foi você que criou o seu form :) Basicamente só fazemos mudar de "text" para "password" o atributo type da tag <input> que o HTML já reconhece e sabe que queremos usar senha naquele campo. Além disso, o seu navegador, junto com o HTML, ao notar que aquele campo é de senha, já disponibiliza alguns recursos de segurança. Por exemplo, escreva algo na caixa de senha e depois selecione o que escreveu e tente copiar para colar em outro lugar: não dá. O HTML é esperto e sabe que isso não deve ocorrer, afinal, senhas são coisas confidenciais. As tags < label >, < legend > e < fieldset >: Nomeando e agrupando campos de um Formulário O campo <label>: Como criar rótulos e etiquetas para os formulários Sempre que formos usar algum campo de um formulário, por mais óbvio que ela possa ser, é necessário deixar bem claro para o usuário e leitor de seu site o propósito daquele campo. Ou seja, devemos fazer um processo de rotulação, colocar etiquetas, algum tipo de marcados nos campos, que explique para que serve cada um daqueles elementos do form. Fizemos isso, algumas vezes, como no uso das caixas de texto, apenas escrevendo "Login" ou "Insira seu aqui" com valor inicial de uma caixa de texto. Sintaxe da tag <label>: O atributo for Assim, para nomearmos de maneira mais correta os campos de um formulário, devemos usar a tag <label> (rótulo ou etiqueta, em inglês), cuja sintaxe é: <label for="nome_do_campo">texto que visível</label> Ou seja, devemos colocar no atributo for o nome do campo de formulário na qual aquele label se refere. Por exemplo, vamos criar uma caixa de texto chamada " " e uma caixa de

4 password chamada "senha", o uso correto do label seria como mostra o seguinte código HTML: <label for=" "> </label> <input type="text" name=" "> <br /> <label for="senha">senha: </label> <input type="password" name="senha"> Cujo resultado será: Senha: Note que o valor contido no atributo for da tag <label> deve igual ao nome do formulário na qual aquele label se refere. Isto é importante. E isso aparentemente é igual a simplesmente colocar um texto qualquer. Mas só aparentemente, pois o uso de label, além de deixar seu código e formulário HTML mais organizado, fornece algumas funcionalidades, principalmente se o leitor não puder ver os formulários. Como criar botões em HTML, de Reset (limpar) e Submit (enviar) em Formulários Como criar Botões HTML: type="button" Felizmente, como em quase todos os campos de um formulário HTML, para criar um botão vamos precisar apenas apenas alterar o valor do atributo type, da tag <input>. Ou seja, criar um button em um site é algo bem simples. A ação que ocorre quando se cria um botão é que é algo mais complexo, e para isso se exige alguma linguagem de programação, como o JavaScript. Assim, a simples sintaxe, portanto, para se criar um botão é: <input type="button"> Cujo resultado é este botãozinho ao lado: Porém, um botão assim não serve para nada, para começar a criar buttons mais úteis em seus sites, é necessário usar o atributo value, pois o que fornecermos de valor para este atributo, é o nome que vai aparecer no botão. E para deixar nosso código pronto para ser usado com um script de programação, vamos dar também um nome para nosso botão, através do atributo name. Assim, o código HTML mais completo e correto do nosso botão fica: <input type="button" name="botao-ok" value="ok"> E o resultado é um botão OK

5 Como criar um menu drop down em formulários HTML: <select> e <option> Para criar um menu do tipo drop down nos formulários de seu site, vamos fazer uso da tag <select>, pois esse menu é do tipo seleção, já que devemos escolher apenas um campo, que ficará em evidência. A sintaxe básica para criar este menu é: <select> <option>opção 1</option> <option>opção 2</option> <option>opção 3</option> <option>opção 4</option> </select> Ou seja, a tag <select> é que define o escopo do menu. E para cada opção deste que menu que queiramos adicionar, temos que inserir uma tag <option>. O resultado do código apresentado é: Os atributos name e value Mas como dissemos, essa é a sintaxe básica, só para você fazer um teste rápido e criar seu menu drop down. Para criar um site bom, bem feito e robusto, temos que usar alguns atributos já conhecidos nossos: name e value. É importante que usemos o atributo name para dar nome ao nosso menu. Ou seja, usamos esse atributo dentro da tag <select>, para definir um nome a este drop down. Isto é extremamente importante pois é isso que vai identificar o menu no formulário, e se tiver outro menu deste tipo, aí que é obrigatório mesmo dar o nome. Já o nome que demos na tag <option> serve para o seu leitor ver o que está escrito. Porém, para o programador que vai receber os dados do formulário o que vai importar de verdade é o que tem no atributo value, que fica dentro de cada tag <option>. Por exemplo, suponha que você fez um site para uma empresa e no formulário vai perguntar que dia do mês quer que o funcionário receba o pagamento, o código HTML será: <select name="diadepagamento"> <option value="1">1</option> <option value="10">10</option> <option value="20">20</option> </select>

6 E o resultado será: Que dia do mês deseja receber seu pagamento? Note que para o usuário não vai fazer diferença alguma, pois ele não vê nem sabe o que são os atributos name e value. Mas quando ele clicar para enviar o formulário para o site, o script responsável por receber as informações vai saber certinho o nome do formulário "diadepagamento" e vai saber o valor, o número do dia do mês que foi escolhido. É importante você adquirir o costume de usar esses atributos agora, enquanto aprende HTML, pois isso é essencial em seus estudos de PHP e JavaScript, no futuro. Agrupando opções: a tag <optgroup> e o atributo label Uma outra possibilidade que o HTML nos fornece para trabalhar com menus do tipo drop down em formulários, é agrupar algumas opções juntas. Para isso, temos que usar uma tag chamada <optgroup>, dentro da tag <select>. Esta tag optgroup tem um atributo especial chamado label (rótulo ou etiqueta, em inglês), que vai nos permitir criar subgrupos dentro do menu, e o nome desses grupos internos é definido no atributo label. A sintaxe para agrupar elementos em um menu drop down é: <select name="nomemenu"> <optgroup label="grupo 1"> <option value="valor1">opção 1</option> <option value="valor2">opção 2</option> <option value="valor3">opção 3</option> </optgroup> <optgroup label="grupo 2"> <option value="valor1">opção 1</option> <option value="valor2">opção 2</option> </optgroup> </select> O resultado do código é seguinte menu: O atributo size: o tamanho visível do menu - Caixa de Lista Por padrão, ao usar o menu do tipo dropdown, ele exibe apenas uma opção visível. No exemplo passado, sem clicar no menu vemos apenas "Opção 1". Assim, existe um atributo da tag <select> que permite você quantas opções (<option>) você dezena que seja exibida, ou seja, quantas linhas do menu, é o atributo size, que recebe um número inteiro como valor. No exemplo passado, há 5 linhas com as opções e mais 2 linhas com os nomes dos grupo, totalizando um total de 7 linhas no menu.

7 Vamos colocar o atributo size de modo que exiba todas as 7 linhas do menu. Nosso código HTML se torna: <select name="nomemenu" size="7"> <optgroup label="grupo 1"> <option value="valor1">opção 1</option> <option value="valor2">opção 2</option> <option value="valor3">opção 3</option> </optgroup> <optgroup label="grupo 2"> <option value="valor1">opção 1</option> <option value="valor2">opção 2</option> </optgroup> </select> E o resultado é o seguinte menu: Opção 1 Opção 2 Opção 3 Opção 1 Opção 2 Caso você escolha um número menor de linhas para serem exibidas, o HTML cria automaticamente uma barra de rolagem, vamos colocar size="5", veja o que acontece: Opção 1 Opção 2 Opção 3 Opção 1 Opção 2 Podemos dizer que este tipo de menu é uma Caixa de Lista. O atributo multiple: Escolhendo mais de uma opção no menu drop down Tente marcar mais de uma opção no menu do código passado. Segure control e vá marcando mais de uma opção. É, não dá. Mas e se você quiser que seja possível que o leitor selecione mais de uma opção, como no caso das checkbox? Para variar, fazer isso é algo bem simples, basta usar o atributo multiple, da tag <select>. O valor que este deve receber é "multiple". Vamos testar no exemplo passado: <select name="nomemenu" size="7" multiple="multiple"> <optgroup label="grupo 1"> <option value="valor1">opção 1</option> <option value="valor2">opção 2</option> <option value="valor3">opção 3</option> </optgroup> <optgroup label="grupo 2"> <option value="valor1">opção 1</option> <option value="valor2">opção 2</option> </optgroup> </select>

8 O resultado é o seguinte: Opção 1 Opção 2 Opção 3 Opção 1 Opção 2 Experimente segurar control e clicar em mais de uma opção. Você verá que é possível selecionar diversas opções. Exercício sobre menus drop down em HTML Crie um menu que pergunte quais linguagens o usuário deseja aprender. Divida essas linguagens em dois grupos: para Desktop e para Web. O leitor de seu site pode optar por assinalar mais de uma opção. Código HTML: <select name="linguagens" size="7" multiple="multiple"> <optgroup label="linguagens para Web"> <option value="html">html (linguagem de marcação)</option> <option value="css">css (linguagem de estilo)</option> <option value="js">javascript (linguagem de programação)</option> <option value="php">php (linguagem de programação)</option> </optgroup> <optgroup label="linguagens para Desktop"> <option value="c">c (linguagem de programação)</option> <option value="cmm">c++ (linguagem de programação)</option> <option value="java">java (linguagem de programação)</option> </optgroup> </select> Resultado do código: HTML (linguagem de marcação) CSS (linguagem de estilo) JavaScript (linguagem de programação) PHP (linguagem de programação) C (linguagem de programação) C++ (linguagem de programação) Java (linguagem de programação) Botões de Rádio (radio button) - Escolhendo uma opção Para que serve um Radio Button O primeiro tipo de campo que vamos usar para fazer uma escolha, é o radio button (botão do tipo rádio, ou botão radial), que nada mais é que aquele bolinha onde clicamos e apenas uma das opções podem ser escolhidas. Essa é a característica principal deste tipo de campo de um formulário: usamos os radio buttons quando queremos escolher apenas UMA opção, dentre as várias listadas.

9 Ou seja, devemos fazer uma pergunta ou pedir uma informação cuja a resposta seja única. Por exemplo, ao pedir o gênero, estamos querendo saber se a pessoa é homem OU mulher. Ao perguntar se um cliente tem plano de saúde ou não, a resposta só pode ser SIM ou NÃO. A faixa de salário pode ser até mil, entre mil e dois mil reais, entre três e quatro mil, ou mais de quatro mil. Ou seja, só uma opção pode ser marcada. Como usar o Radio Button: type="radio" Para usar este tipo de campo de um formulário, temos que fornecer o valor "radio" ao atributo type da tag <input>. Também devemos fornecer o atributo nome, de tal modo que todas as opções, todo o grupo de botões rádio, devem ter o mesmo o nome. O que irá mudar entre uma opção e outra é o atributo value. Assim, a sintaxe para usar os botões radiais é: <input type="radio" name="nome_do_grupo" value="valor"/> Valor E o resultado é o radio button: Valor Vamos criar um grupo de botões rádio com as opções "Sim", "Não", "Talvez" e "Quem Sabe", que respondem a pergunta: "Você deseja trabalhar como Webmaster?" O código é: <input type="radio" name="webmaster" value="sim"/> Sim<br /> <input type="radio" name="webmaster" value="nao"/> Não<br /> <input type="radio" name="webmaster" value="talvez"/> Talvez<br /> <input type="radio" name="webmaster" value="quem_sabe"/> Quem sabe E o resultado, são os belos radio buttons a seguir: Você deseja trabalhar como Webmaster? Sim Não Talvez Quem sabe Aqui frisamos a importância de terem o mesmo nome, "opções".

10 Se você selecionar 'sim', por exemplo e enviar seu formulário, o programador que fez o sistema vai receber o valor 'sim' e sabe que essa resposta foi dada ao grupo de botões de nome "webmaster". Então, se tiver escolhido sim, vai abrir um site pra você fazer um curso. Se tiver escolhido não, o sistema (em PHP, por exemplo) vai te mostrar mais vantagens em ser um Webmaster, etc. O importante é notar que o valor é enviado para o site. Então o site sabe sua resposta (value) de um grupo de botões (name) específico. Caixas de checagem (checkbox) - Fazendo escolhas Para que serve uma checkbox Responda o seguinte formulário: O que deseja aprender? HTML CSS JavaScript PHP Esses campos são do tipo botão rádio, então dá pra escolher somente uma opção. Mas você quer escolher mais, quer estudar tudo: HTML, CSS, JavaScript e PHP também. E agora? É aí que entram as caixas de checagem, ou em inglês, checkbox. São campos de um formulário que permitem que você escolha mais de uma opção, todas ou até nenhuma. Como usar uma checkbox: type="checkbox" Aqui não tem muito segredo, para criar uma caixa de checagem de opções, fazemos exatamente a mesma coisa do radio buttons, a diferença é que no atributo type da tag input, nós fornecemos o valor "checkbox". Por exemplo, o código de um formulário que pergunta o que você deseja aprender seria: <input type="checkbox" name="opcoes" value="html"/> HTML<br /> <input type="checkbox" name="opcoes" value="css"/> CSS<br /> <input type="checkbox" name="opcoes" value="javascript"/> JavaScript<br /> <input type="checkbox" name="opcoes" value="php"/> PHP

11 E o belo resultado será: O que você deseja aprender? HTML CSS JavaScript PHP Resumindo: Para escolher somente uma opção de uma lista de opções, use o Radio Button. Para escolher quantas opções quiser de uma lista, use o Checkbox. Tag <input> - Formulário de Caixa de Texto (Text Input Box) Vamos começar este tutorial sobre formulário ensinando a criar o tipo mais de formulário, uma simples caixa de texto, daquela que inserimos nosso login ou nome, por exemplo. Existem algumas características que precisamos saber antes de criarmos esse tipo de formulário em nossos sites em HTML. Primeiro é que usaremos a tag <input> (input, em inglês, é entrada) para essa caixa. Como queremos que esse formulário seja do tipo texto, precisamos dar o valor "text" ao tributo type. Já que é possível criar vários formulário, é uma boa prática darmos nome aos nossos formulários, através do atributo name, que recebe o valor que quisermos (o nome que escolhermos). E se você se lembrar bem, existem caixas de texto com diversos tamanhos, pequenas e grandes, esse tamanho é definido pelo atributosize (tamanho, em inglês). Assim, a sintaxe para criarmos um formulário do tipo Caixa de Texto é: <input type="text" name="nome_do_formulario" size="tamanho_do_for MULARIO"> Por exemplo, vamos criar uma caixa de texto de nome 'Nome' e de tamanho 40 (40 caracteres): <input type="text" name="nome" size="40" /> O resultado é:

12 Exercício com caixas de texto Crie dois campos "Nome" e "Sobrenome", com suas respectivas caixas de texto, alinhadas por tabela, como se fossem um formulário real. Vamos criar uma tabela com duas linhas e duas colunas. Na primeira linha colocamos "Nome" na primeira coluna e o código da caixa de texto na segunda coluna. Fazemos o mesmo para a segunda linha, mudando apenas "Sobrenome". Nosso código fica: <table> Nome: <input type="text" name="nome" size="40"> <br /> Sobrenome: <input type="text" name="sobrenome" size="40"> <br /> </table> E o belo resultado é: Nome: Sobrenome: Atributo maxlength - Tamanho máximo da caixa de texto O atributo size que usamos no exemplo passado serve para definir o tamanho visível deste tipo de formulário, mas experimente escrever nele. Pode escrever o tanto que quiser,que vai caber. Ora, as vezes vamos querer limitar o tanto de caracteres que é possível escrever. Por exemplo, vamos supor que seja necessário pedir a idade de seu leitor, a idade dele pode ter um caractere (se for uma criança de até 9 anos), 2 caracteres (o mais comum) ou 3 (sim, pode haver pessoas com 100 ou mais anos acessando seu site, vai saber...). Para isso, usamos o atributo maxlength que serve para dizer o tamanho MÁXIMO de caracteres que é permitido escrever. Vamos fazer o caso da idade: <input type="text" name="idade" size="10" maxlength="3">

13 O resultado será: Tentem colocar 4 caracteres. Não dá. Afinal, você limitou para 3, e você é o webmaster, você que manda :) Exercício usando o atributo maxlength da tag <input> Faça um site que exiba duas caixas de texto para pedir o número do CEP da rua de seu leitor. Lembrando que o CEP tem no total de 8 caracteres, com um hífen antes dos 3 últimos dígitos. Primeiros criamos um campo para o leitor de seu site colocar os cinco primeiros dígitos. Mostramos um hífen, e em seguida outro formulário, outra caixa de texto, mas agora com o limite de 3 caracteres. O código HTML desses formulários é: CEP: <input type="text" name="cep" size="5" maxlength="5"> - <input type="text" name="cep2" size="3" maxlength="3"> E o resultado será: CEP: - Tutorial: Como criar um formulário HTML para um site com a tag <form> Vimos que para iniciar um formulário devemos usar a tag <form>, onde vamos usar dois atributos, o "action" que vai receber a URL do script de programação que vai tratar os dados do formulário preenchido pelo usuário e o atributo "method", que se refere a maneira na qual esses dados serão enviados. O que devemos saber sobre a tag form é que ela envolve uma série de campos, que no nosso caso terá a seguinte sintaxe: <form action="script_do_formulario.php" method="post"> campos do formulário aqui dentro das tags </form> Com a estrutura básica montada e explicada, vamos criar os diferentes grupos do formulário, que são os campos de dados, campos de endereço e os campos de login.

14 Campos de Dados Pessoais Vamos definir nosso primeiro bloco de fieldset, para colocar os dados pessoas, como Nome, Sobrenome, RG, CPF e Data de Nascimento. Este trecho do código começa pelo comentário: <!-- DADOS PESSOAIS--> Usamos a tag <legend> para criar uma descrição para cada tipo de fieldset, que se chamará "Dados Pessoais". Como são diversos campos, e todos terão labels (legenda descritiva do campo), usaremos os conceitos de tabelas em HTML para organizar e alinhas nossos campos. O que basicamente vamos fazer é colocar o nome do campo em uma coluna e o campo na coluna ao lado, assim teremos sempre o nome (label) lado a lado do campo (<input>). Assim, nesse primeiro grupo de campos, usaremos apenas um tipo de campo de formulário, o de Caixa de Texto. Apenas atentamos para o fato de limitar o número de caracteres no RG em 13 números. Também dividimos os campos de CPF em dois campos diferentes, para o leitor saber bem que no primeiro campo vão os 9 primeiros dígitos, depois tem um hífen e por fim um campo que cabe os dois dígitos identificadores. Como há muita confusão para preencher uma data, colocamos valores pré-definidos em cada campo, para sinalizar que queremos data no padrão: dd/mm/aaaa Campos de Dados do Endereço Para os dados de endereço, como rua, número, bairro e cidade, iremos fazer igual como fizemos com os campos de dado pessoal, usando caixas de texto. Este trecho do código é iniciado pelo comentário: <!-- ENDEREÇO -->

15 A única diferença aqui é o uso de menu através das tags <selection> e <option>. para criar todas as opções de estados brasileiros. O código é longo, mas bem simples de entender. Aqui é importante frisar o uso dos atributos name, e que cada um desses campos tenham nomes distintos, para não haver confusão na hora que enviarmos esses dados para um script no servidor. Campos de Dados de Login Essa seção, no código HTML, é identificada pelo comentário: <!-- DADOS DE LOGIN --> Para fazer os campos do formulário responsáveis pelo sistema de login, usamos caixas de texto para pedir o login e o . Já para pedir a senha e sua confirmação, usamos o que aprendemos em caixas de password. E aqui uma novidade: usamos um campo do tipo file, que automaticamente cria um botão para que possamos carregar um arquivo de nosso HD. Para usar essa ferramenta, basta colocar "file" como o valor do atributo type da tag <input>: <input type="file" name="imagem" > E por fim, criamos dois simples botões. Um botão de reset (limpar campos) e de submit (enviar). Código HTML de nosso Tutorial sobre Formulários <!DOCTYPE html> <html> <head> <title> Como criar um formulário completo em HTML </title> <meta name="description" content="aprenda a criar um site completo que usa formulários em HTML"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <h1> Bem vindo ao site HTML Progressivo</h1>

16 <h2> Preencha o formulário abaixo para participar do curso de HTML & CSS completo, online e grátis</h2><br /> <form action="script_do_formulario.php" method="post"> <!-- DADOS PESSOAIS--> <fieldset> <legend>dados Pessoais</legend> <table cellspacing="10"> <label for="nome">nome: </label> <input type="text" name=" "> <label for="sobrenome">sobrenome: </label> <input type="text" name="sobrenome"> <label>nascimento: </label> <input type="text" name="dia" size="2" maxlength="2" value="dd"> <input type="text" name="mes" size="2" maxlength="2" value="mm"> <input type="text" name="ano" size="4" maxlength="4" value="aaaa"> <label for="rg">rg: </label> <input type="text" name="rg" size="13" maxlength="13"> <label>cpf:</label> <input type="text" name="cpf" size="9" maxlength="9"> - <input type="text" name="cpf2" size="2" maxlength="2"> </table> </fieldset> <br /> <!-- ENDEREÇO --> <fieldset> <legend>dados de Endereço</legend> <table cellspacing="10">

17 <label for="rua">rua:</label> <input type="text" name="rua"> <label for="numero">numero:</label> <input type="text" name="numero" size="4"> <label for="bairro">bairro: </label> <input type="text" name="bairro"> <label for="estado">estado:</label> <select name="estado"> <option value="ac">acre</option> <option value="al">alagoas</option> <option value="am">amazonas</option> <option value="ap">amapá</option> <option value="ba">bahia</option> <option value="ce">ceará</option> <option value="df">distrito Federal</option> <option value="es">espírito Santo</option> <option value="go">goiás</option> <option value="ma">maranhão</option> <option value="mt">mato Grosso</option> <option value="ms">mato Grosso do Sul</option> <option value="mg">minas Gerais</option> <option value="pa">pará</option> <option value="pb">paraíba</option> <option value="pr">paraná</option> <option value="pe">pernambuco</option> <option value="pi">piauí</option> <option value="rj">rio de Janeiro</option> <option value="rn">rio Grande do Norte</option> <option value="ro">rondônia</option> <option value="rs">rio Grande do Sul</option> <option value="rr">roraima</option> <option value="sc">santa Catarina</option> <option value="se">sergipe</option> <option value="sp">são Paulo</option> <option value="to">tocantins</option> </select> <label for="cidade">cidade: </label>

18 <input type="text" name="cidade"> <label for="cep">cep: </label> <input type="text" name="cep" size="5" maxlength="5"> - <input type="text" name="cep2" size="3" maxlength="3"> </table> </fieldset> <br /> <!-- DADOS DE LOGIN --> <fieldset> <legend>dados de login</legend> <table cellspacing="10"> <label for=" "> </label> <input type="text" name=" "> <label for="imagem">imagem de perfil:</label> <input type="file" name="imagem" > <label for="login">login de usuário: </label> <input type="text" name="login"> <label for="pass">senha: </label> <input type="password" name="pass"> <label for="passconfirm">confirme a senha: </label> <input type="password" name="passconfirm">

19 </table> </fieldset> <br /> <input type="submit"> <input type="reset" value="limpar"> </form> </body> </html>

COMO FUNCIONA UM FORMULÁRIO

COMO FUNCIONA UM FORMULÁRIO FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que

Leia mais

Os componentes de um formulário são: Form, Input, Select e AreaText

Os componentes de um formulário são: Form, Input, Select e AreaText HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados

Leia mais

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes Desenvolvimento Web XHTML Formulários Prof. Bruno E. G. Gomes 2014 Introdução Um recurso bastante utilizado no desenvolvimento Web é o envio de dados de uma página para o servidor quando fornecemos informações,

Leia mais

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT)

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) Formulários (FORMS): Um formulário é uma área que pode conter elementos de formulário. Elementos de formulário são elementos que permitem ao usuário

Leia mais

O código acima descreve o formulário com uma caixa de texto e dois botões

O código acima descreve o formulário com uma caixa de texto e dois botões Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar formulários em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação...

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir HTML - Formulários @wre2008 1 Sumário Formulários HTML @wre2008 2 Formulários: Muitos elementos de um formulário html são definidos pela tag . Cada tipo de elemento

Leia mais

Web Design Aula 09: Formulários

Web Design Aula 09: Formulários Web Design Aula 09: Formulários Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Tag ... Tag Tag ... Rádio Checkbox Atributo name Form Um

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Linguagem de Programação IV -PHP Aula 06 Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Criação de Formulários o Um formulário consiste em uma série de campos que são preenchidos pelo usuário

Leia mais

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento.

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento. IFES - Campus Cachoeiro de Itapemirim-ES Curso Técnico em Informática Disciplina: Programação Web Professor: Flávio Izo e Rafael Vargas Data: 07/04/2015 Aluno: GABARITO Valor: 12,5 Conteúdo: HTML + Formulários

Leia mais

7. Formulários em XHTML

7. Formulários em XHTML Programação para Internet I 7. Formulários em XHTML Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt Os formulários constituem uma das principais formas de interacção entre clientes e servidores. São

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços

Leia mais

TECNOLOGIAS WEB AULA 7

TECNOLOGIAS WEB AULA 7 TECNOLOGIAS WEB AULA 7 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de formulários em HTML. Compreender as principais estruturas formadas com as

Leia mais

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está

Leia mais

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web Parte III - Hypertext

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Formulários e JavaScript Como visto anteriormente, JavaScript pode ser usada para

Leia mais

Mais sobre uso de formulários Site sem Ajax

Mais sobre uso de formulários Site sem Ajax Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher

Leia mais

LINGUAGEM DE PROGRAMAÇÃO WEB

LINGUAGEM DE PROGRAMAÇÃO WEB LINGUAGEM DE PROGRAMAÇÃO WEB GABRIELA TREVISAN Formulários e Aula 3 Relembrando HTML 5 Tag Form o Utilizada para marcar a região do formulário. o Os atributos mais importantes são o method e o action.

Leia mais

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web Introdução Formulários rios & Conteúdo Dinâmico Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA A Web surgiu inicialmente como uma nova forma de comunicação de informações, fazendo uso de

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe

Leia mais

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Listas Listas de itens são bastante

Leia mais

DWEB. Design para Web. HTML5 - Marcação de formulário. Curso Superior de Tecnologia em Design Gráfico

DWEB. Design para Web. HTML5 - Marcação de formulário. Curso Superior de Tecnologia em Design Gráfico DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico HTML5 - Marcação de formulário E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis

Leia mais

FORMULÁRIOS ACESSÍVEIS

FORMULÁRIOS ACESSÍVEIS Ministério da Educação Secretaria de Educação Profissional e Tecnológica IFRS Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul NAV Núcleo de Acessibilidade Virtual FORMULÁRIOS ACESSÍVEIS

Leia mais

Formulário (Send & Recieve) Prof. Celso H. Masotti

Formulário (Send & Recieve) Prof. Celso H. Masotti Formulário (Send & Recieve) Prof. Celso H. Masotti O Send e o Recieve A partir desse momento os exercícios serão realizados com dois arquivos, um de envio de dados (send) e o que recebe esse dados (recieve)

Leia mais

Programando em PHP. Conceitos Básicos

Programando em PHP. Conceitos Básicos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web

Leia mais

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.). HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a

Leia mais

HTML - 7. Vitor Vaz da Silva Paula Graça

HTML - 7. Vitor Vaz da Silva Paula Graça HTML - 7 Vitor Vaz da Silva Paula Graça 1 Formulários Os formulários forms no HTML, são utilizados para a introdução de dados de uma determinada aplicação Os programas JavaScript têm como um dos seus maiores

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

Formulários HTML e Introdução à Programação Web

Formulários HTML e Introdução à Programação Web Formulários Até agora tivemos uma boa visão da parte gráfica e de hipertexto do HTML. Agora vamos ver como o HTML pode ser usado para fazer parte efetiva em um programa. Dissemos que HTML não é uma linguagem

Leia mais

Scriptlets e Formulários

Scriptlets e Formulários 2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir Linguagem HTML Listas e Formulários @wre2008 1 Sumário Listas Revisão da tag Criação de formulários HTML @wre2008 2 Listas As listas são utilizadas para citar, numerar

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

DICAS PARA DESENVOLVER SITE ACESSÍVEL

DICAS PARA DESENVOLVER SITE ACESSÍVEL DICAS PARA DESENVOLVER SITE ACESSÍVEL Este arquivo contém dicas para o desenvolvimento de uma página acessível e de acordo com as normas W3C (World Wide Web). Para uma boa compreensão destas dicas é necessário

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia mais

Formulários HTML. Envio de Informação para o servidor

Formulários HTML. Envio de Informação para o servidor Programação Na Web Formulários HTML Envio de Informação para o servidor 1 António Gonçalves Agenda Envio de dados através de formulários A Marca FORM Controle para Text Botões tipo Push Botões Check boxes

Leia mais

Exercícios Práticos de HTML e JavaScript.

Exercícios Práticos de HTML e JavaScript. <FORM ACTION=mailto:teste@gmail.com METHOD=POST ENCTYPE=text/plain NAME=cadastro> Exercícios Práticos de HTML e JavaScript Exercício 1: Formulário Padrão HTML SEM JavaScript

Leia mais

Helder da Rocha. Criação de. Web Sites II. Servidor Web Aplicações Web Programas CGI e SSI. Rev.: CWS2-04-2000/01 A4

Helder da Rocha. Criação de. Web Sites II. Servidor Web Aplicações Web Programas CGI e SSI. Rev.: CWS2-04-2000/01 A4 Helder da Rocha Criação de Web Sites II Servidor Web Aplicações Web Programas CGI e SSI Rev.: CWS2-04-2000/01 A4 Copyright 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos

Leia mais

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique. Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças

Leia mais

indica o nome do campo pelo qual podemos acessar.

indica o nome do campo pelo qual podemos acessar. Formulários Em geral Com o Javascript, os formulários Html tomam outra dimensão. Não esqueça que em Javascript, podemos acessar cada elemento de um formulário para, por exemplo, ler ou escrever um valor,

Leia mais

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível SIEP / RENAPI Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Setembro de 2009 Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Cuidados em geral Separar adequadamente

Leia mais

HTML: Formulários Programação de Servidores

HTML: Formulários Programação de Servidores HTML: Formulários Programação de Servidores Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Exemplo 2 Criando um Formulário Um formulário é composto

Leia mais

HTML. Sessão 8 HTML. Criação de Páginas WEB. Formulários

HTML. Sessão 8 HTML. Criação de Páginas WEB. Formulários HTML Sessão 8 HTML Falta ver de que forma podemos trocar informações com nosso visitante. Este aspecto é primordial para a grande quantidade de acções que se podem realizar : Comprar um artigo, preencher

Leia mais

Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa

Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Colégio da Policia Militar do Estado do Tocantins HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Formulários Avançando no HTML e CSS Nesta aula vamos aprender como criar uma página de contato

Leia mais

Programação WEB II. Formulários Em PHP. Métodos GET e POST progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza

Programação WEB II. Formulários Em PHP. Métodos GET e POST progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza Formulários Em PHP Métodos GET e POST progweb2@thiagomiranda.net Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Entender o funcionamento

Leia mais

3 HTML Tabelas, frames e formulário

3 HTML Tabelas, frames e formulário 3 HTML Tabelas, frames e formulário Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Tabelas...3 Principais atributos das tabelas...4 Principais atributos

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2.

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2. Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Formulários Durante a navegação em websites é comum que sejam solicitadas informações

Leia mais

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Criação de Formulários no Google Drive Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Criação de Formulários no Google Drive Introdução...

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir Linguagem PHP Cookie e Sessão @wre2008 1 Sumário Header; Cookie; Sessão; Exemplos. @wre2008 2 Header Esta função permite que um script php redirecione para outra página.

Leia mais

Tecnologias para apresentação de dados - HTML. Aécio Costa

Tecnologias para apresentação de dados - HTML. Aécio Costa Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

Leia mais

www.coldfusionbrasil.com.br

www.coldfusionbrasil.com.br www.coldfusionbrasil.com.br 2000 TRABALHANDO COM E-MAILS 3 ENVIANDO E-MAILS COM CFMAIL 3 ENVIANDO E-MAIL BASEADO EM UM FORMULÁRIO 4 UTILIZANDO QUERY PARA ENVIAR E-MAILS 5 ENVIANDO E-MAIL PARA MÚLTIPLOS

Leia mais

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros.

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. Formulários Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. O formulário depende de outros programas no servidor, para receber e

Leia mais

Linux. Educacional. Tutorial Buzzword

Linux. Educacional. Tutorial Buzzword Linux Educacional Tutorial Buzzword Para trabalhar com o programa Buzzword online, é necessário que crie uma conta no site. Para isso acesse o endereço - https://buzzword.acrobat.com/ Para criar uma conta

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir Linguagem PHP @wre2008 1 Sumário PHP: Tipos de dados; Manipulação de dados; Utilizando formulário. @wre2008 2 Tipos de dados As variáveis são declaradas no momento de sua

Leia mais

Obtendo dados com formulários

Obtendo dados com formulários Obtendo dados com formulários Exploraremos agora uma das utilizações mais poderosas para o JavaScript: trabalhar com formulários de HTML. Você pode utilizar JavaScript para tornar um formulário mais interativo,

Leia mais

JavaScript (Funções, Eventos e Manipulação de Formulários)

JavaScript (Funções, Eventos e Manipulação de Formulários) Linguagem de Programação para Web JavaScript (Funções, Eventos e Manipulação de Formulários) Prof. Mauro Lopes 1-31 23 Objetivos Iremos avançar um pouco mais em nosso estudo sobre o JavaScript. Iremos

Leia mais

Programação Web Aula 5 - Javascript Parte 2 - Javascript e HTML

Programação Web Aula 5 - Javascript Parte 2 - Javascript e HTML Programação Web Aula 5 - Javascript Parte 2 - Javascript e HTML Departamento de Informática UFPR 17 de Março de 2014 1 Javascript e HTML 2 Ambiente Hierarquia Propriedades de Document 3 DOM Denição Hierarquia

Leia mais

6. Introdução à Linguagem PHP

6. Introdução à Linguagem PHP 6. Introdução à Linguagem PHP A comunicação na Web exige dois agentes: o cliente web e o servidor web. O cliente requer informação (a partir de uma página HTML acessada pelo navegador) e o servidor fornece

Leia mais

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO

Leia mais

Tecnologias Web. Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Notas de Aula Aula 05 1º Semestre - 2011. UNIJUÍ DETEC Ciência da Computação

Tecnologias Web. Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Notas de Aula Aula 05 1º Semestre - 2011. UNIJUÍ DETEC Ciência da Computação UNIJUÍ DETEC Ciência da Computação Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula Aula 05 1º Semestre - 2011 Tecnologias Web jgw@unijui.edu.br O que vimos até então? O

Leia mais

Tutorial de Integração HTML

Tutorial de Integração HTML Tutorial de Integração HTML Sumário Tutorial de Integração - HTML... 3 Configurando Envio... 4 Enviando Múltiplas SMS... 6 Enviando Múltiplos SMS a partir de um arquivo CSV... 7 Glossário... 8 2 Tutorial

Leia mais

Logo abaixo temos a Barra de Menus que é onde podemos acessar todos os recursos do PHP Editor.

Logo abaixo temos a Barra de Menus que é onde podemos acessar todos os recursos do PHP Editor. Nessa aula iremos estudar: A anatomia da janela do PHP Editor Iniciando o servidor Web O primeiro exemplo de PHP Anatomia da janela do PHP Editor Barra de Títulos: É a barra azul que se encontra na parte

Leia mais

Tutorial Acessibilidade na Web Construindo Formulários e Tabelas acessíveis

Tutorial Acessibilidade na Web Construindo Formulários e Tabelas acessíveis Tutorial Acessibilidade na Web Construindo Formulários e Tabelas acessíveis FISL 12 Reinaldo Ferraz W3C Brasil Possibilitar o acesso a pessoas com deficiência Web para todos Todos mesmo! Web para todos,

Leia mais

Comandos Básicos de HTML

Comandos Básicos de HTML Comandos Básicos de HTML Agora iniciaremos o estudo ao HTML, para você fazer o site utilize o bloco de notas do windows(notepad) ou um outro editor de texto como Notepad++, Geany ou PSPAD. Para fazer você

Leia mais

Como criar um formulário de pesquisa usando o Google Drive

Como criar um formulário de pesquisa usando o Google Drive 25/09/2013 07h25 - Atualizado em 25/09/2013 07h43 Como criar um formulário de pesquisa usando o Google Drive por EDIVALDO BRITO Para o TechTudo 1 comentário Se você precisa fazer alguma pesquisa de um

Leia mais

Manual 2010 Webmaster

Manual 2010 Webmaster Manual 2010 Webmaster Menu 1. Acesso ao sistema 2. Campanhas 2.1 Ver Campanhas Disponíveis 2.2 Minhas Campanhas 3. Formatos 3.1 Banners Automáticos 3.2 Banners Manuais 3.3 E-mail Marketing 3.4 Vitrines

Leia mais

Manual de Uso Wordpress

Manual de Uso Wordpress Manual de Uso Wordpress Olá! Seja bem vindo ao igual. Agora você pode transmitir todas as notícias importantes da sua comunidade de forma mais simples e eficiente. Mas para que isso aconteça, primeiro

Leia mais

IFSC-Programação para a WEB - prof. Herval Daminelli

IFSC-Programação para a WEB - prof. Herval Daminelli 1 Um script em PHP ou página HTML pode transferir dados para outro script em PHP no servidor de diversas maneiras. Algumas destas maneiras são: Por meio de formulários, usando o método GET ou POST; Através

Leia mais

Estudo Dirigido - Parte 1

Estudo Dirigido - Parte 1 Linguagem Java para Web - JSP Professora Lucélia Estudo Dirigido - Parte 1 Na primeira parte deste tutorial, vamos receber os dados de um formulário e verificar se os dados foram ou não preenchidos. Se

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

Tecnologias Web. Formulários HTML

Tecnologias Web. Formulários HTML Tecnologias Web Formulários HTML Cristiano Lehrer, M.Sc. Tag form (1/2) Todo formulário em HTML é construído usando elementos dentro de um bloco . O bloco define a URL que receberá o formulário

Leia mais

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes 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

Leia mais

6.2 - Formulários: form ... form action method POST GET exceto outros formulários form

6.2 - Formulários: form <form action=url_de_script method=método>...</form> form action method POST GET exceto outros formulários form 6.2 - Formulários: Um dos recursos mais fascinantes 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

Leia mais

Tutorial: Gestão da Central de Serviços

Tutorial: Gestão da Central de Serviços Tutorial: Gestão da Central de Serviços Orientação para acesso e edição de conteúdos de ofertas de serviços da Central de Serviços da UFABC Novembro de 2014 Autor: Nilson José Zoccaratto Versão 2 Conteúdo

Leia mais

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL.

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Procuraremos mostrar os principais procedimentos para fazer um cadastro de registros numa base de dados MySQL utilizando a linguagem

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web JavaScript Validação de Formulários Profª MSc. Elizabete Munzlinger www.elizabete.com.br JavaScript Validação de Formulários Índice 1 VALIDAÇÃO DE FORMULÁRIOS... 2 Para validar

Leia mais

PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda

PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda PROGRAMAÇÃO PARA INTERNET Introdução à AJAX Fonte: Raul Paradeda INTRODUÇÃO Para entender o que é o AJAX é necessário ter o prévio conhecimento de: HTML / XHTML; Javascript; CSS; XML. INTRODUÇÃO Ao pesquisar

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

Microsoft Excel 2003

Microsoft Excel 2003 Associação Educacional Dom Bosco Faculdades de Engenharia de Resende Microsoft Excel 2003 Módulo II Macros e Tabelas Dinâmicas Professores: Eduardo Arbex Mônica Mara Tathiana da Silva Resende 2010 Macro

Leia mais

Universidade Federal do Mato Grosso - STI-CAE. Índice

Universidade Federal do Mato Grosso - STI-CAE. Índice CAPA Universidade Federal do Mato Grosso - STI-CAE Índice 1. Página da área administrativa... 1.1 Botões e campo iniciais... 2. Explicar como funcionam as seções... 2.1. Seções dinâmicos... 2.1.1 Como

Leia mais

Desenvolvimento de Aplicações para Internet

Desenvolvimento de Aplicações para Internet Desenvolvimento de Aplicações para Internet Aula 03 Celso Olivete Júnior olivete@fct.unesp.br Na aula de hoje... Javascript: introdução, operadores lógicos e matemáticos, comandos condicionais. Javascript:

Leia mais

Formulários. Curso de PHP e MySQL EAD Moodle Desenvolvido e ministrado por William Hamilton dos Santos UTFPR

Formulários. Curso de PHP e MySQL EAD Moodle Desenvolvido e ministrado por William Hamilton dos Santos UTFPR Formulários Há várias maneiras de se criar um formulário na web, porém, é preciso considerar vários fatores para que este formulário não seja apenas uma página com um amontoado de campos, mas sim a porta

Leia mais

Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção

Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção Este procedimento corresponde ao fluxo de trabalho de Indexação de OCR com separação de código de correção no programa de treinamento do Capture Pro Software. As etapas do procedimento encontram-se na

Leia mais

CAPITULO 5 COMANDO DE FLUXO IF

CAPITULO 5 COMANDO DE FLUXO IF CAPITULO 5 COMANDO DE FLUXO IF Sempre que for necessária a tomada de decisão dentro de um programa, você terá que utilizar um comando condicional, pois é por meio dele que o PHP decidirá que lógica deverá

Leia mais

Sumário INTRODUÇÃO... 3. 1. Acesso ao Ambiente do Aluno... 4. 2. Ferramentas e Configurações... 5. 2.1 Ver Perfil... 5. 2.2 Modificar Perfil...

Sumário INTRODUÇÃO... 3. 1. Acesso ao Ambiente do Aluno... 4. 2. Ferramentas e Configurações... 5. 2.1 Ver Perfil... 5. 2.2 Modificar Perfil... Sumário INTRODUÇÃO... 3 1. Acesso ao Ambiente do Aluno... 4 2. Ferramentas e Configurações... 5 2.1 Ver Perfil... 5 2.2 Modificar Perfil... 6 2.3 Alterar Senha... 11 2.4 Mensagens... 11 2.4.1 Mandando

Leia mais

Microsoft Excel 2003

Microsoft Excel 2003 Associação Educacional Dom Bosco Faculdades de Engenharia de Resende Microsoft Excel 2003 Professores: Eduardo Arbex Mônica Mara Tathiana da Silva Resende 2010 INICIANDO O EXCEL Para abrir o programa Excel,

Leia mais

$XOD2VREMHWRVGRQDYHJDGRU

$XOD2VREMHWRVGRQDYHJDGRU $XOD2VREMHWRVGRQDYHJDGRU Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora detalhes sobre a KLHUDUTXLD GRV REMHWRV GH ZLQGRZ, que funciona como REMHWR JOREDO. Depois você aprenderá

Leia mais

Publicação web. Será ativado um assistente de publicação que lhe guiará em todas as etapas a seguir apresentadas.

Publicação web. Será ativado um assistente de publicação que lhe guiará em todas as etapas a seguir apresentadas. Publicação web Pré requisitos: Lista de questões Formulário multimídia Este tutorial tem como objetivo, demonstrar de maneira ilustrativa, todos os passos e opções que devem ser seguidos para publicar

Leia mais

Tecnologias para apresentação de dados - Java Script. Aécio Costa

Tecnologias para apresentação de dados - Java Script. Aécio Costa Tecnologias para apresentação de dados - Java Script Aécio Costa Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem

Leia mais

Manual de Utilização do PLONE (Gerenciador de página pessoal)

Manual de Utilização do PLONE (Gerenciador de página pessoal) Manual de Utilização do PLONE (Gerenciador de página pessoal) Acessando o Sistema Para acessar a interface de colaboração de conteúdo, entre no endereço http://paginapessoal.utfpr.edu.br. No formulário

Leia mais

files, que devolve um objeto do tipo FileList.

files, que devolve um objeto do tipo FileList. WEB STORAGE 199 7.4.3 FILE API A File API foi introduzida para nos fornecer maior flexibilidade no acesso ao conteúdo de ficheiros a partir de uma página HTML. Por predefinição, o acesso a um ficheiro

Leia mais