• 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

  • Hi my family member I want to say that this post is awesome nice written and come with approximately all significant infos I would like to peer extra posts like this

    Reply

  • you are truly a just right webmaster The site loading speed is incredible It kind of feels that youre doing any distinctive trick In addition The contents are masterwork you have done a great activity in this matter

    Reply

  • Simply wish to say your article is as amazing The clearness in your post is just nice and i could assume youre an expert on this subject Well with your permission let me to grab your feed to keep updated with forthcoming post Thanks a million and please carry on the gratifying work

    Reply

  • obviously like your website but you need to test the spelling on quite a few of your posts Several of them are rife with spelling problems and I to find it very troublesome to inform the reality on the other hand Ill certainly come back again

    Reply

  • Usually I do not read article on blogs however I would like to say that this writeup very compelled me to take a look at and do so Your writing taste has been amazed me Thanks quite nice post

    Reply

  • Insanont I’m often to blogging and i really appreciate your content. The article has actually peaks my interest. I’m going to bookmark your web site and maintain checking for brand spanking new information.

    Reply

  • Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

    Reply

  • Technology us You’re so awesome! I don’t believe I have read a single thing like that before. So great to find someone with some original thoughts on this topic. Really.. thank you for starting this up. This website is something that is needed on the internet, someone with a little originality!

    Reply

  • Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

    Reply

  • The platform’s commitment to accuracy and reliability makes BusinessIraq.com an indispensable resource for businesses operating in Iraq. Our comprehensive coverage includes daily news updates, weekly market summaries, and monthly sector analysis reports. Special attention is given to emerging opportunities in technology, renewable energy, and financial services sectors, helping stakeholders identify and capitalize on new market possibilities.

    Reply
    • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

    Related Posts

    How to Remove Pterodactyl and Wings from a VPS

    Free Dynamic Video player made in HTML&CSS

    How I made COVID-19 Mailer program from Python

    Top 40 Python programs with source Code

    >