Dynamic Placeholder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery_ui.css">
    <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
    <label>Enter your name</label>
    <input id="fname" type="text" placeholder="First name">
    <input id="lname" type="text" placeholder="Last name">
    <p></p>
    <button id="submit">Submit</button>
    <button id="reset">Reset</button>
</div>
<script src="main.js"></script>
</body>
</html>


#container{
    margin:20px auto;
    width: 700px;
    height:400px;
}
label,input,p{
    font-size: 20px;

}
button{
    font-size: 20px;
    border-radius:5px;
    outline: none;
    margin-top: 10px;
}

$(document).ready(function (){
    $("#submit").click(function (){
        $("p").show().html("Welcome " + $("#fname").val() + " " + $("#lname").val() +"!");
    });


    $("#reset").click(function (){
        $("p").hide();
        $("#fname").val("").attr("placeholder" ,"First name");
        $("#lname").val("").attr("placeholder" ,"Last Name");
    })

})