API tools faq
paste
Advertisement
hercioneto

Formulario HTML

hercioneto
Sep 5th, 2023
1,036
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.53 KB | None | 0 0
raw download clone embed print report
  1. <!Doctype html>
  2. <html lang="pt-br">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <meta name="Author" content="Hercio Neto">
  7.     <title>Aula HTML - Formulários</title>
  8.  
  9.     <style type="text/css">
  10.         body {
  11.             font-family: Arial, sans-serif;
  12.             font-size: 16px;
  13.             background-color: #f0f0f0;
  14.         }
  15.         .container {
  16.             max-width: 800px;
  17.             margin: 0 auto;
  18.             padding: 20px;
  19.             background-color: #fff;
  20.             box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  21.         }
  22.         form label {
  23.             display: block;
  24.             margin-bottom: 5px;
  25.             font-weight: bold;
  26.  
  27.         }
  28.         form input[type="text"], form input[type="email"], form select {
  29.  
  30.             width: 98%;
  31.              
  32.             padding: 10px;
  33.              
  34.             border: 1px solid #ccc;
  35.              
  36.             border-radius: 4px;
  37.              
  38.             margin-bottom: 20px;
  39.  
  40.         }
  41.  
  42.         form input[type="submit"] {
  43.  
  44.         background-color: #4CAF50;
  45.          
  46.         color: #fff;
  47.          
  48.         padding: 10px 20px;
  49.          
  50.         border: none;
  51.          
  52.         border-radius: 4px;
  53.          
  54.         cursor: pointer;
  55.          
  56.         }
  57.  
  58.         form input[type="submit"]:hover {
  59.  
  60.         background-color: #3e8e41;
  61.          
  62.         }
  63.  
  64.  
  65.         @media screen and (max-width: 480px) {
  66.  
  67.         form input[type="text"], form input[type="email"], form select {
  68.  
  69.             width: 90%;
  70.              
  71.         }
  72.  
  73.         form input[type="submit"] {
  74.  
  75.         width: 90%;
  76.          
  77.         }
  78.  
  79.         }
  80.  
  81.     </style>
  82.     <script type="text/javascript">
  83.        
  84.         function exibeMsg(){
  85.             alert("Olá, informe seus dados no formulário");
  86.         }
  87.     </script>
  88.  
  89. </head>
  90.  
  91. <body onload="exibeMsg()">
  92.  
  93.     <div class="container">
  94.  
  95.     <h1>Cadastro de Endereço</h1>
  96.    
  97.     <form method="POST" action="resposta.php">
  98.  
  99.         <label for="nome">Nome:</label>
  100.         <input type="text" id="nome" name="nome" required>
  101.  
  102.         <label for="endereco">Endereço</label>
  103.         <input type="text" id="endereco" name="endereco" required>
  104.  
  105.         <label for="cidade">Cidade:</label>
  106.         <input type="text" id="cidade" name="cidade" required>
  107.  
  108.         <label for="estado">Estado:</label>
  109.  
  110.         <select id="estado" name="estado" required>
  111.          
  112.         <option value="" disabled selected>Selecione um estado</option>
  113.          
  114.         <option value="AC">Acre</option>
  115.          
  116.         <option value="AL">Alagoas</option>
  117.          
  118.         <option value="AP">Amapá</option>
  119.          
  120.         <option value="AM">Amazonas</option>
  121.          
  122.         <option value="BA">Bahia</option>
  123.          
  124.         <option value="CE">Ceará</option>
  125.          
  126.         <option value="DF">Distrito Federal</option>
  127.          
  128.         <option value="ES">Espírito Santo</option>
  129.          
  130.         <option value="GO">Goiás</option>
  131.          
  132.         <option value="MA">Maranhão</option>
  133.          
  134.         <option value="MT">Mato Grosso</option>
  135.          
  136.         <option value="MS">Mato Grosso do Sul</option>
  137.          
  138.         <option value="MG">Minas Gerais</option>
  139.          
  140.         <option value="PA">Pará</option>
  141.          
  142.         <option value="PB">Paraíba</option>
  143.          
  144.         <option value="PR">Paraná</option>
  145.          
  146.         <option value="PE">Pernambuco</option>
  147.          
  148.         <option value="PI">Piauí</option>
  149.          
  150.         <option value="RJ">Rio de Janeiro</option>
  151.          
  152.         <option value="RN">Rio Grande do Norte</option>
  153.          
  154.         <option value="RS">Rio Grande do Sul</option>
  155.          
  156.         <option value="RO">Rondônia</option>
  157.          
  158.         <option value="RR">Roraima</option>
  159.          
  160.         <option value="SC">Santa Catarina</option>
  161.          
  162.         <option value="SP">São Paulo</option>
  163.          
  164.         <option value="SE">Sergipe</option>
  165.          
  166.         <option value="TO">Tocantins</option>
  167.          
  168.         </select>
  169.  
  170.         <label for="email">E-mail:</label>
  171.         <input type="email" id="email" name="email" required>
  172.  
  173.         <input type="submit" value="Enviar">
  174.        
  175.     </form>
  176.  
  177.     </div>
  178.    
  179. </body>
  180.  
  181. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!