open_in_new content_copy 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="FormStyles.css" rel="stylesheet" />
</head>
<body>
    <section>
    <h1>My Form Example</h1>
    <form action="ThankYou.html" method="get">
        <label for="txtName">Name:</label>
        <input id="txtName" type="text" />
        <br />
        <label for="txtEmail">Email:</label>
        <input id="txtEmail" type="email" />
        <br />
        <label for="txtDOB">Date of Birth:</label>
        <input id="txtDOB" type="date" />
        <br />
        <label for="txtCountry">Country:</label>
        <input id="txtCountry" type="text" list="countries"/>
        <datalist id="countries">
            <option value="Australia"></option>
            <option value="Mongolia"></option>
            <option value="China"></option>
        </datalist>
            <br />

            <input id="Submit" type="submit" value="submit" />
            <input id="Reset" type="reset" value="reset" />
</form>
</section>
</body>
</html>



body {
    background-color:blue;
}

h1{
    color:white;
    text-transform:uppercase;
    text-align:center; 
    text-shadow:5px 5px #444444; 
}

section{
    width:430px; 
    margin:auto; 
    background-color:#c9d0de;
    border: 5px solid #888888;
    border-radius: 5px; /*rounded borders*/
    padding:30px; 
    box-shadow:10px 10px 5px #888888;
}

label{
    display:inline-block; 
    width:100px; 
}

input{
    width:260px; 
    border-radius:5px; 
}
input[type=submit], input[type=reset]{
    width: 125px; 
    height: 52px; 
    margin-top:5px; 
}
 input[type=submit]{
     margin-left:100px; 
 }

 input:focus{
     background-color:#c9d0de; 
 }