Last active
August 14, 2017 22:51
-
-
Save DenysMenfredy/0c92363d10aedf5f8230a8909a039c99 to your computer and use it in GitHub Desktop.
Form Simples JS
This file contains 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
<!DOCTYPE html> | |
<html lang="pt-br"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Teste</title> | |
</head> | |
<style type="text/css"> | |
*{ | |
margin: 0; | |
padding: 0; | |
font-family: arial; | |
} | |
html, body{ | |
width: 100%; | |
height: 100%; | |
background-color: #eee; | |
} | |
#form{ | |
width: 100%; | |
height: auto; | |
background-color: #eee; | |
border-bottom: 1px solid gray; | |
} | |
#form fieldset{ | |
width: 300px; | |
margin: auto; | |
max-width: 300px; | |
margin-bottom: 10px; | |
} | |
#form label{ | |
font-family: arial; | |
color: #129; | |
font-size: 1.3em; | |
float: left; | |
margin:5px 10px 10px 5px; | |
} | |
#form input{ | |
width: auto; | |
height: auto; | |
margin-bottom: 5px; | |
padding: 7px; | |
text-align: center; | |
display: inline-block; | |
font-size: 1em; | |
} | |
#enviar{ | |
background-color: rgba(0,0,0,0.9); | |
color: #fff; | |
box-shadow: 3px 4px 2px rgba(0,0,0,0.5); | |
font-size: 1em; | |
} | |
</style> | |
<body> | |
<form id="form"> | |
<fieldset> | |
<label for="nome">Nome:</label> | |
<input type="name" placeholder="Digite seu nome" id="nome" name="nome"><br><br> | |
<label for="idade" >Idade:</label> | |
<input type="number" placeholder="Digite sua idade" id="idade" name="idade"><br><br> | |
<label for="cidade">Cidade:</label> | |
<input type="name" placeholder="Digite sua cidade" id="cidade" name="cidade"><br><br> | |
<input type="submit" id="enviar" value="Enviar" onclick="mostrar()" name="enviar"> | |
</fieldset> | |
</form> | |
<script type="text/javascript"> | |
function mostrar() { | |
var nome = document.getElementById('nome').value; | |
var idade = document.getElementById('idade').value; | |
var cidade = document.getElementById('cidade').value; | |
document.write("Seu nome é " + nome + " você tem " + idade + " anos e mora em " + cidade) | |
} | |
</script> | |
</body> | |
<html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment