Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}


input[type=button] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=button]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}


</style>
<script type="text/javascript">

function validAge()
  {
       var alertMsg = "Anna oikea ikä";
       var age = document.getElementById('age').value;;
       // If age is Not a Number,  not at least 1, greater than 100,  or has a decimal place.

       if(isNaN(age) || age <= 0 || age > 100 || age.indexOf(".") >= 0)
       {
              alert(alertMsg);
              return false;
       }
       alert('Ei virheitä');
       return true;


 }
    function showInput() {
    var a = document.forms["myform"]["fname"].value;
    var b = document.forms["myform"]["lname"].value;
    var c = document.forms["myform"]["address"].value;
    var d = document.forms["myform"]["city"].value;
    var e = document.forms["myform"]["age"].value;

    var display=document.getElementById("display")
    display.innerHTML=a + "<br/>"
                    + b + "<br/>"
                    + c + "<br/>"
                    + d + "<br/>"
                    + e;
    return false;

}
</script>
</head>
<body>

<h3>Syötä yhteystietosi</h3>

<div class="container">
  <form id="myform" role="form">
    <label for="fname">Etunimi</label>
    <input type="text" id="fname" name="firstname" placeholder="Etunimesi..">

    <label for="lname">Sukunimi</label>
    <input type="text" id="lname" name="lastname" placeholder="Sukunimesi..">

    <label for="address">Katuosoite</label>
    <input type="text" id="address" name="youraddress" placeholder="Katuosoitteesi..">

    <label for="city">Postitoimipaikka</label>
    <input type="text" id="city" name="yourcity" placeholder="Postitoimipaikkasi..">

    <label for="age">Ikä</label>
    <input type="text" id="age" name="yourage" placeholder="Ikäsi..">

    <input type="button" value="Tallenna tiedot" onClick="return showInput()">
      <input type ="button" value="Tarkasta tiedot" onClick="validAge()">
        <label> <br/></br/>Syöttämäsi tiedot: </label>
  <p><span type ="textarea" id='display'></span></p>
  </form>
</div>

</body>
</html>