• Home
  • |
  • Blog
  • |
  • Free Responsive Form made in Html & CSS

October 7, 2020

Free Responsive Form made in Html & CSS

Share 0
Tweet 0
Share 0

Hello coders whats up , Iam back again with the new post including my one of the creation . This is what i created while I was in college .I had this file for so long so I thought to post it here hoping it will help someone to create the form and learn.

form.html (Html code)

<!--
form designed by:Subarna Basnet
2020 copyright */
note:do not remove this message 

-->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<link rel="stylesheet"  href="style.css" type="text/css" />

</head>

<body >

<div name="form">
<table  bgcolor="#FFFFFF" border="1" width="auto" class="table" cellpadding="0" >
  <tr>
      <th bgcolor="orange" style="font-size: 30px; font-family: monospace;">Registraion Form</th>
           <td rowspan="5">
          
          
   
           </td>
  </tr>
<tr>
     <td valign="middle" align="left">
        <label>
                <div class="form" name="tableform">
                <form method="get" action="" >
                <b>
First Name    :&nbsp;&nbsp;<input type="text" class="tbox" name ="name" placeholder="your name"size="28px"   required="required"/><br />
</br>
First Name    :&nbsp;&nbsp;<input type="text" class="tbox" name ="name" placeholder="your name"size="28px"   required="required"/><br />
 </br>
 
 <div>
    
Date of Birth: 
<select name='day' id='day'>
<option value='Day'>DAY</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>
M
<select name='month' id='month'>
<option value='1'>1</option>
<option value='MON'>MON</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>
Y

<select name='day' id='yr'>
<option value='YEAR'>YEAR</option>
<option value='1947'>1947</option>
<option value='1948'>1948</option>
<option value='1949'>1949</option>
<option value='1950'>1950</option>
<option value='1951'>1951</option>
<option value='1952'>1952</option>
<option value='1953'>1953</option>
<option value='1954'>1954</option>
<option value='1955'>1955</option>
<option value='1956'>1956</option>
<option value='1957'>1957</option>
<option value='1958'>1958</option>
<option value='1959'>1959</option>
<option value='1960'>1960</option>
<option value='1961'>1961</option>
<option value='1962'>1962</option>
<option value='1963'>1963</option>
<option value='1964'>1964</option>
<option value='1965'>1965</option>
<option value='1966'>1966</option>
<option value='1967'>1967</option>
<option value='1968'>1968</option>
<option value='1969'>1969</option>
<option value='1970'>1970</option>
<option value='1971'>1971</option>
<option value='1972'>1972</option>
<option value='1973'>1973</option>
<option value='1974'>1974</option>
<option value='1975'>1975</option>
<option value='1976'>1976</option>
<option value='1977'>1977</option>
<option value='1978'>1978</option>
<option value='1979'>1979</option>
<option value='1980'>1980</option>
<option value='1981'>1981</option>
<option value='1982'>1982</option>
<option value='1983'>1983</option>
<option value='1984'>1984</option>
<option value='1985'>1985</option>
<option value='1986'>1986</option>
<option value='1987'>1987</option>
<option value='1988'>1988</option>
<option value='1989'>1989</option>
<option value='1990'>1990</option>
<option value='1991'>1991</option>
<option value='1992'>1992</option>
<option value='1993'>1993</option>
</select>

    </div></br>
Email   :&nbsp;&nbsp;<input type="text" class="tbox"name ="name" placeholder="@gmail.com" size="28px"  required="required"/><br />
</br>
Phn-no :<input type="text" class="tbox" name ="name" value="+977&nbsp;" size="28px"  required="required"/><br />
</br>
Gender :
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other </br></br>
<!--Address:<input type="text" class="tbox"  name ="name" placeholder="country,city" size="28px"  required="required"/><br />
</br>-->
Address:<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<textarea name="messages" class="tbox" placeholder="Type Here" style="margin: 0px; width: 218px; height: 102px;"></textarea><br />
</br>
Pin Code:<input type="text" class="tbox"  name ="name" placeholder="zipcode" size="28px"  required="required"/><br />
               </div>
  
<input type="submit"  class="submit" name="submit" value="Send"/></br><input type="reset"  class="reset" name="reset" value="reset"/>

</form>
     
         </label>

       </td>
</tr>
</table>
</div>
</body>
</html>

style.css (css file)

@charset "utf-8";
/* CSS Document 
<!--
form designed by:Subarna Basnet
2016 copyright 
note: do not remove this message
*/
 

-->

body{
	
    background-color:blue;
    
	width:auto;
	height:auto;
	max-width:inherit;
	max-height:inherit;
	padding:5px;
    margin:0;
    
	
	
	
}


.table {
    border-radius: 10px;
    float: none;
    margin:auto;
 
}

img {
    border: 2px solid #0f0;
    height: 102px;
    margin-left: 4px;
    margin-top: 72px;
    padding: -3px;
    width: 200px;
}

.rcont {
    margin-left: 15px;
    margin-top: -5px;
    padding: 0;
}
.form {
    color: darkblue;
    padding: 12px;
	font:bold;
}

.tbox {
    border: 1px dotted;
    border-radius: 5px;
    padding: 4px;
  ;
}
.tbox:hover{
	border: #00FF00;
	
}

.submit {
    background: orange none repeat scroll 0 0;
    color: #00f;
    height: 31px;
    margin-left: 3%;
    width: 170px;
	font-size:20px;
}
.submit:hover{
	background:lightgreen;
	width:170px;
}
.reset {
    background: orange none repeat scroll 0 0;
    color: #00f;
    height: 31px;
    margin-left: 51%;
    margin-top: -31px;
    width: 170px;
	font-size:20px;
}
.reset:hover{
	background:lightgreen;
	width:170px;
}

OUTPUT

Its free to use but Please dont forget to give me credit..It means alot

0 shares
Share 0
Tweet 0
Share 0
    • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

    Related Posts

    Free Dynamic Video player made in HTML&CSS

    How I made COVID-19 Mailer program from Python

    Top 40 Python programs with source Code

    >