Baixe o app para aproveitar ainda mais
Prévia do material em texto
Construção de Formulários Iniciaremos nossa atividade fazendo uma revisão sobre formulários. É importante lembrar que antes de iniciarmos vamos criar um projeto com o nome Revisão. Assim, anote os passos para criação de um projeto, você vai precisar: 1 – Inicialize o xampp e start o botão do Apache 2 – Inicialize o NetBeans 3 – clique em Arquivo (file) -> Novo Projeto (new Project) -> escolha PHP 4- Escolha PHP -> PHP -> clique em próximo (next): 5- Coloque o nome do projeto no campo em destaque (RevisaoSegundoSemestre) e clique em finalizar (finish): • Atenção nos de projetos, páginas e variáveis não podem conter caracteres especiais (~, ^, ´, `, ç), nem espaços em branco, por isso o nome ‘RevisaoSegundoSemestre’ sem acento e sem espaço em branco. 6- O Netbeans criará um projeto com o nome RevisaoSegundoSemestre, dentro deste projeto, por padrão ele cria uma página com o nome index. Php Essa página já tem a estrutura básica de uma página em HTML, com espaço definido para programação em PHP, vejamos: Este é o projeto. Ele está gravado no C:\xampp\htdocs. Página padrão do html criada pelo Netbeans. <!DOCTYPE html> - Indica para o navegador que tipo de página será inicializado <!-- To change this license header, choose License Headers in Project Properties. Comentário em html To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <meta charset="UTF-8"> Cabeçalho <title></title> </head> <body> <?php // put your code here Corpo, onde iremos criar a página ?> </body> </html> A – <html> </html> – Início e fim da página html. B – <head> </head>– Início e fim do cabeçalho, onde são feitas as configurações da página. C - <body></body> - Corpo, onde será construída a página D - <?php Programação em php ?> Revisão Vamos usar algumas tags para montar um formulário, que é um objeto do HTML que nos permite interagir com o usuário, disponibilizando campos onde o usuário pode fornecer informações que serão recebidas e tratadas pela página. Dentro do corpo do HTML – vamos criar um formulário A - Dá um enter depois de <body>, pois vamos trabalhar no HTML B – Ao digitar a tag <form> aparece o fechamento da tag, basta dá enter e vai ficar assim: Assista o vídeo disponibilizado no link a seguir e monte o formulário apresentado abaixo: O link da aula está na sala virtual, são 6 vídeos, bem pequenos que vão ajudar você a montar o formulário. Depois de montar o formulário do auxílio emergencial, faça a atividade avaliativa disponível na aula 3. Resumo das principais Tags Tag Descrição --> Define um comentário <!DOCTYPE> Define o tipo de documento; <a> Define um hyperlink <abbr> Define uma abreviação <address> Define um endereço. <area> Define uma área dentro de um mapa de imagem <b> Define um texto em negrito; <base> Define uma base URL para todos os links da página <bdo> Define uma base URL para todos os links da página <blockquote> Define uma citação longa <body> Define o corpo da página <br> Insere uma quebra de linha simples <button> Define um botão de comando; <caption> Define o "caption" de uma tabela; <cite> Define uma citação; <code> Define o código texto do computador; <col> Define os atributos da coluna da tabela; <colgroup> Define um grupo de colunas da tabela; <dd> Define uma descrição de definição; <del> Define um texto deletado; <dfn> Define um termo de definição; <div> Define uma seção no documento; <dl> Define uma lista de definição; <dt> Define um termo de definição; <em> Define um texto em ênfase; <fieldset> Define um conjunto de campos (fieldset); <form> Define um formulário; <h1> até <h6> Define do cabeçalho 1 até o cabeçalho 6; <head> Define uma informação sobre o documento. (Não aceita mais elementos Child como filho); <hr> Define uma regra horizontal. (Tem o mesmo nível que um parágrafo, mas também é utilizado para fazer separações e quebras de linha); <html> Define um documento html; <i> Define um texto em itálico; (Possui o mesmo nível semântico que um SPAN. O texto continua sendo itálico e para usuários de leitores de tela, a voz utilizada é modificada para indicar ênfase. É de grande valor e utilidade para marcar, termos técnicos, termos em outras linguagens etc.) <iframe> Define uma linhas sobre a janela (frame); <img> Define uma imagem; <input> Define um campo de inserção; <ins> Define um texto inserido; <kbd> Define um texto do teclado; <label> Define uma "label" para o formulário; <legend> Define um título para os campos (fields); <li> Define os itens da lista; <link> Define uma referência; <map> Define uma imagem de mapa; <menu> Define uma lista de "menus"; <meta> Define informações meta; <noscript> Define uma seção noscript; <object> Define um objeto incorporado; <ol> Define uma lista ordenada; <optgroup> Define um grupo de opção; <option> Define uma opção em uma lista suspensa (drop-down list); <p> Define um parágrafo; <param> Define um parâmetro para determinado objeto; <pre> Define um texto pré-formatado; <q> Define uma citação curta; <s> Define um texto que não é mais correto. <samp> Define um código de amostra; <script> Define um script; <select> Define uma lista selecionável; <small> Define um pequeno texto; <span> Define uma seção no documento; <strong> Define um texto forte (similar ao negrito); <style> Define um estilo; <sub> Define um texto subscrito; <sup> Define um texto sobrescrito; <table> Define uma tabela; <tbody> Define o corpo da tabela; <td> Define uma célula da tabela; <textarea> Define um área de texto; <tfoot> Define o rodapé da tabela; <th> Define o cabeçalho da tabela; <thead> Define o cabeçalho da tabela; <title> Define o título do documento; <tr> Define uma linha da tabela; <ul> Define uma lista desordenada; <var> Define uma variável;
Compartilhar