Folha Prática Nº3. HTML : Formulários e Formatações. UNIVERSIDADE DA BEIRA INTERIOR Faculdade de Engenharia Departamento de Informática

Transcrição

1 Folha Prática Nº HTML : Formulários e Formatações

2 . Formulário NOTA: A caixa de seleção da massa deverá ter como opções: Fina, Normal, Extra <h>nota de Encomenda</h> <form action="mailto:númeroaluno@ubi.pt" method="post enctype="text/plain"> Nome: <input type="text" name="nome"><br> Telefone: <input type="text" name="numero"><br> Menu:<br> <input> : Declaração de elementos de edição de dados <input type="radio" checked name="menu" value="est"> Estações<br> <input type="radio name="menu" value="que"> Queijos<br> <input type="radio name="menu" value="tro">tropical<p> Massa: <select name="massa"> <option value="f">fina <option value="n">normal <option value="e">extra </select><p> <select> : Definição de lista de valores <option> : Define os elementos da lista de valores Ingredientes adicionais:<br> <input type="checkbox" name= azeitona">azeitona<br> <input type="checkbox" name="cebola">cebola<br> <input type="checkbox" name= cogumelos">cogumelos<br> <input type="checkbox" name= milho">milho<br> <input type="checkbox" checked name= oregãos">oregãos<p> <textarea rows="" cols="0">observações...</textarea></p> <input type="reset" value="limpar"> <input type="submit" value="encomendar"> </form>

3 . Formulário Agrupamento de Elementos 0 0 <h>nota de Encomenda</h> <form action="mailto:númeroaluno@ubi.pt" method="post enctype="text/plain"> <legend>dados Pessoais</legend> Nome: : Permite agrupar elementos do formulário <input type="text" <legend> name="nome"><br> : Define o título do agrupamento de elementos Telefone: <input type="text" name="numero"><br> <legend>faça você mesmo...</legend> Menu:<br> <input type="radio name="menu" value="est"> Estações<br> <input type="radio" checked name="menu" value="que"> Queijos<br> <input type="radio name="menu" value="tro">tropical<p> Massa: <select name="massa"> <option value="f">fina <option value="n">normal <option value="e">extra </select><p>

4 . Formulário Agrupamento de Elementos 0 0 <legend>complemente a seu gosto...</legend> Ingredientes adicionais:<br> <input type="checkbox" name= azeitona">azeitona<br> <input type="checkbox" name="cebola">cebola<br> <input type="checkbox" name= cogumelos">cogumelos<br> <input type="checkbox" name= milho">milho<br> <input type="checkbox" name= oregãos">oregãos<p> <textarea rows="" cols="0">observações...</textarea></p> <input type="reset" value="limpar"> <input type="submit" value="encomendar"> </form>

5 . Formulário Rádio OnLine 0 0 <h>rádio OnLine</h> <form action="mailto:númeroaluno@ubi.pt" method="post" enctype="text/plain"> <legend>dados Pessoais</legend> <table border="" width=> <td width=>nome:</td> <td width=0><input type="text" name="nome" style="width:0px;"></td> <td width=>apelido: </td> <td width=0><input type="text" name="apelido" style="width:0px;"></td> <td width=>morada:</td> <td width=0><input type="text" name="morada" style="width:0px;"></td> <td width=>código Postal:</td> <td width=0><input type="text" name="codpostal" style="width:0px;"></td>

6 . Formulário Rádio OnLine <td width=>localidade:</td> <td width=0><input type="text" name="localidade" style="width:0px;"></td> <td width=>país:</td> <td width=0><select name="pais"> <option value="pt">portugal <option value="es">espanha <option value="it">itália <option value="gr">grécia </select><p></td> <td width=>estilos Musicais:</td> <td width=0> <input type="checkbox" name="estilo" value="rock">rock n' Roll<br> <input type="checkbox" name="estilo" value="jazz">jazz<br> <input type="checkbox" name="estilo" value="metal">heavy Metal<br> <input type="checkbox" name="estilo" value="rap">rap<br><p> </select><p></td> </table>

7 . Formulário Rádio OnLine 0 <textarea rows="" cols="0">observações...</textarea></p> <legend>dados de Acesso</legend> Utilizador: <input type="text" name="codutilizador"><br> Password: <input type="password" name="password"><br> <input type="reset" value="limpar"> <input type="submit" value="confirmar"> </form>

8 . Mapa de Imagens 0 <img src="imagemap.jpg" width="" height="0" usemap="#meumapa"> <map name="meumapa"> <area shape="circle" coords=",0,0" href= nome_ficheiro.html"> <area shape="rect" coords=",,," href="nome_ficheiro.html"> <area shape="poly" coords="0,,,,," href="nome_ficheiro.html"> </map>

9 . Formatação 0 <p> A marca div determina a cor (vermelho) do texto seguinte</p> <div style="color:#ff0000;"> <h>este é um titulo dentro da secção div</h> <p>este é um paragrafo dentro da secção</p> </div> <p>este texto já aparece com a cor por omissão: preto</p> Ambos são elementos agrupadores: <div> é um elemento de bloco que pode conter outros elementos. Geralmente usado para absoluto de conteúdo. 0 <span> é um elemento inline que é usado para formatar texto. Ela é normalmente usada para alterar o estilo de um elemento ou texto <p> Este texto está normal dentro de uma frase, ou um bloco como <p>, <div>, ou <table>. <span style="color:#0000ff;"> este está no mesmo parágrafo mas esta a azul</span> este está no mesmo parágrafo e está normal outra vez</p> <p> <span style="color:#00ff00;">este é outro parágrafo</span> </p>