Created
August 20, 2018 01:53
-
-
Save nunomazer/6ea986e6a3e61f977ccdc4b5397f8bd7 to your computer and use it in GitHub Desktop.
Primeira página HTML com CSS e validação JavaScript, Livro Desenvolvimento Web com Java
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Contato com Minha Empresa.com</title> | |
| <meta author="Ademir Mazedr Junior" /> | |
| <meta description="Página HTML de exemplo com formulário" /> | |
| <style> | |
| body { | |
| margin:0; | |
| border-top: 6px solid #0066aa; | |
| padding: 1em; | |
| } | |
| h1 { | |
| font-family: Comic Sans MS, Comic Sans, cursive; | |
| color: #6699ff; | |
| } | |
| h2 { | |
| color: #666; | |
| } | |
| hr { | |
| border: 0.5px solid #bbb; | |
| } | |
| ul { | |
| border-left: 3px solid #ff6666; | |
| background-color: #f6f6f6; | |
| list-style-type: none; | |
| padding: 10px 20px; | |
| } | |
| form { | |
| border: 1px solid #c0c0c0; | |
| padding: 1em; | |
| } | |
| label { | |
| font-family: Courier, monospace; | |
| font-weight: bold; | |
| color: #666666; | |
| } | |
| input, textarea { | |
| width: 100%; | |
| margin-bottom: 0.5em; | |
| } | |
| input[type=submit] { | |
| width: 25%; | |
| padding:5px 15px; | |
| background:#666; | |
| border:0 none; | |
| cursor:pointer; | |
| -webkit-border-radius: 5px; | |
| border-radius: 5px; | |
| font-weight:bold; | |
| color: #ffffff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Minha Empresa.com</h1> | |
| <hr /> | |
| <section> | |
| <h2> | |
| Contatos: | |
| </h2> | |
| <ul> | |
| <li>Telefone: (99) 9999-9999</li> | |
| <li>E-mail: <a href="mailto:[email protected]">[email protected]</a></li> | |
| <li> | |
| <address> | |
| Endereço: Rua dos Alfineiros, 4 - Surrey, Londres | |
| </address> | |
| </li> | |
| </ul> | |
| </section> | |
| <form action="/pagina-processa-dados-do-form" method="post" id="formContato"> | |
| <div> | |
| <label for="nome">Nome:</label> | |
| <input type="text" id="nome" name="usuario_nome" /> | |
| </div> | |
| <div> | |
| <label for="email">E-mail:</label> | |
| <input type="email" id="email" name="usuario_email" /> | |
| </div> | |
| <div> | |
| <label for="msg">Mensagem:</label> | |
| <textarea id="msg" name="usuario_msg"></textarea> | |
| </div> | |
| <div class="button"> | |
| <input type="submit" /> | |
| </div> | |
| </form> | |
| <script> | |
| var formContato = document.getElementById('formContato'); | |
| formContato.onsubmit = function(ev) { | |
| var nome = document.getElementById('nome').value; | |
| var email = document.getElementById('email').value; | |
| var msg = document.getElementById('msg').value; | |
| if (nome == '' || email == '' || msg == '') { | |
| ev.preventDefault(); | |
| alert ('Todos os campos devem ser preenchidos!'); | |
| return false; | |
| } | |
| alert('O form será enviado'); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment