Pesquisar este blog

quinta-feira, 17 de março de 2011

EXERCÍCIO DAS CONTAS -FORMULÁRIO

Crie uma aplicação Web no NetBeans com um formulário como abaixo:


<%--
    Document   : novaconta
    Created on : 17/03/2011, 11:03:15
    Author     : Leonardo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
         <h1>Prencha os dados</h1>
          <form name="form1" method="get" action="calcula.jsp">
            <p>
              <label><strong>Consumo de agua</strong>
              <input name="agua" type="text" id="agua" value="300.0" size="25">
              </label>
            </p>
            <p>
              <label><strong>Consumo de Energia Elétrica </strong>
              <input name="energia" type="text" id="energia" value="330.0" size="25">
              </label>
            </p>
            <p>Conta:<label>
              <input name="tipo" type="radio" id="conta_0" value="social" >
Social</label>
              <label>
              <input type="radio" name="tipo" value="padrao" id="conta_1" checked>
              Padr?o</label>
              <br>
            </p>
            <p>
              <label></label>
              <input type="submit" name="Calcular" id="Calcular" value="Submit">
            </p>
            <label></label>
          </form>
      
    </body>
</html>

Neste código vale observar o input do tipo radio, onde  cada elemento tem um id diferente, mas o atributo name tem o mesmo valor para ambos. Fazendo desta forma garante que os dois sejam tratados  como um grupo de botão de radio.
Note também que um dos valores tem o atributo checked. Isto garante que esta opção será exibida como selecionada quando a página for aberta.
Um grupo de botão de radio permite que o usuário selecione um opção entre várias.

Nenhum comentário:

Postar um comentário