How to create a simple registration form using HTML5 and CSS

on
I have tried to use as many as HTML tags as possible in order to demonstrate the use.you can avoid that in your forms and keep it simple.


HTML code

<html>
<head> <title> basic login page  </title>
<style>
body { background-color: lightgrey; }
h1{  text-align: center;text-shadow: 2px 2px white; font-family: verdana; }
p { font-family: verdana; font-size: 20px; color: white;}
input[type=text] {
    width: 40%;
    padding: 12px 12px;
    margin: 8px 0;
    box-sizing: border-box;
textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}

select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}

input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
 </head>

<body>
<h1> Form</h1>
<form action="/action_page.php">
  <p> Enter your first name </p>           
  <input type="text" value="first name" required>   <br>
  <p> Enter your last name    </p>           
  <input type="text" name="lastname" value="last name"required>   <br><br>

<fieldset>
<legend> Address details </legend>
   <span>Building name </span> <br> <input type="text" required /> <br>
    <span>Building number/wing</span>   <br>    <input type="text" required/> <br>
    <span>Postal Code</span>        <br>       <input type="text"required /> <br>
</fieldset>
 <p>     Enter your telephone number </p>
<input type="tel"required> <br>
<p>  Enter your Email ID  </p>
<input type="email"required>

 <p> Enter your date of birth  </p>
<select>
  <option>1</option> <option>2</option><option>3</option>
  <option>4</option> <option>5</option><option>6</option>
  <option>7</option><option>8</option><option>9</option>
<option>10</option> <option>11</option><option>12</option>
 <option>13</option><option>14</option> <option>15</option>
  <option>16</option> <option>17</option><option>18</option>
  <option>19</option> <option>20</option><option>21</option>
  <option>22</option> <option>23</option><option>24</option>
  <option>25</option>
  <option>26</option>
  <option>27</option>
  <option>28</option>
  <option>29</option>
  <option>30</option>
  <option>31</option>
</select>

<select>
  <option>January</option>
  <option>February</option>
  <option>March</option>
  <option>April</option>
  <option>May</option>
  <option>June</option>
  <option>July</option>
  <option>August</option>
  <option>September</option>
  <option>October</option>
  <option>November</option>
  <option>December</option>
</select>

<select>
  <option>2000</option><option>2001</option>  <option>2002</option>
  <option>2003</option> <option>2004</option> <option>2005</option>
  <option>2006</option> <option>2007</option><option>2008</option>
  <option>2009</option><option>2010</option><option>2011</option>
 <option>2012</option><option>2013</option><option>2014</option>
 <option>2015</option><option>2016</option><option>2017</option>
</select>  <br>


 <p>Enter your Gender  </p>
<input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
<br><br>
 <p> Enter your marital status  </p>
<input type="radio" name="status" value="male" checked> single<br>
  <input type="radio" name="status" value="female"> married<br>
  <input type="radio" name="status" value="other"> divorced <br>
<input type="radio" name="status" value="other"> widowed
<br><br>



 <p>Attach your photo  </p>
         <input type = "file" name = "fileupload" accept = "image/*" /> <br>

 <p>Enter subjects for the course  </p>

         <input type = "checkbox" name = "HTML" value = "on"> HTML    <br>
         <input type = "checkbox" name = "CSS" value = "on"> CSS        <br>
         <input type = "checkbox" name = "javascript" value = "on"> javascript <br>
 

 <p> Enter which of our branch you want to enroll in  </p>
         <select name = "dropdown">
            <optgroup label="Maharashtra">
    <option>Mumbai</option>
    <option>Nagpur</option>
    <option>Pune</option>
</optgroup>
<optgroup label="Karnatak">
    <option>Udupi</option>
    <option>Bangalore </option>
    <option>Manglore</option>
</optgroup>
         </select>
<br> <p>
Tell more about yourself (hobbies,achievements) </p>
<br >
         <textarea rows = "4" cols = "50" name = "address">
            Enter here...
         </textarea>
 
<br><br> <label>
  <input type="checkbox"> I agree to the <a href="/terms"> terms and conditions</a>
</label> <br>
<br><br>
 <input type = "submit" name = "submit" value = "Submit" >
         <input type = "reset" name = "reset"  value = "Reset" >

         </body>

</html>


Output HTML Form





How to create a simple registration form using HTML5 and CSS