HTML Forms Design Or Building

HTML FormsHTML Forms  design or building is an important subject in web design.To collect user information specially in  case of dynamic & database  based web site for log in or sign up system even in voting system,contact information a HTML form is used . That’s why it is more important in web developing.

An HTML Forms are formed with a various element.

These are:

                1.Text Box

                2.Text Area

                3.Radio Button

                4.Check Box

                5.Drop Down List

                6. Submit Button

HTML From code  design template and example:

Here is an example of Free  HTML Forms design Code which contain above six HTML Forms element.

www.knowledgediarybd.com



<h1 align="center"> Registration Form 
<!--–starting HTML from Here –--></pre>
<form action="”Registration" method="”post”"><!--–For First Name,Last Name,Age,E-mail,Password –-->

<!--–-for Text area and Text box–--->
<table align="center">
<tbody>
<tr>
<td>First name:</td>
<td><input type="”text”" name="”firstname”/" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="”text”" name="”lastname”/" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input id="”age”" type="”text”" name="”age”" /></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input id="”e-mail”/" type="”text”" name="”e-mail”" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input id="”password”" type="”text”" name="”password”" /></td>
</tr>
</tbody>
</table>
<!--–end of Text area and Text box–-->

<!--–for Radio Button–-->
<table align="center">
<tbody>
<tr>
<td>SEX::</td>
<td><input type="radio" name="sex" value="male" /> Male</td>
<td><input type="radio" name="sex" value="female" />Female</td>
</tr>
</tbody>
</table>
<!--–end of Radio Button–-->

<!--–for checkbox–-->
<table align="center">
<tbody>
<tr>
<td>Checkbox:</td>
<td><input type="checkbox" name="student" value="student" />I am a student</td>
<td><input type="checkbox" name="business man" value="business man" />I am a business man</td>
</tr>
</tbody>
</table>
<!--–end checkbox–-->

<!--– For Drop Down List–-->
<p align="center">Birthday:</p>

<div align="center">

<label> Day:
<select id="”day”" name="”day”" size="0"><option selected="selected">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></label>

&nbsp;

<label>
Month:
<select id="”month”" name="”month”" size="0"><option selected="selected">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></select></label>

&nbsp;

<label>
Year:
<select id="”year”" name="”year”" size="0"><option>1990</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option><option>1996</option><option>1997</option><option>1998</option><option>1999</option><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></select></label>

&nbsp;

</div>
<!--–end of Drop Down List–-->

<!--–For submit Button–-->
<p align="center"></p>
<label> Submit Buttton:</label>

<input type="submit" value="Submit" />

&nbsp;

<!--–end of submit button–-->
<p align="center"></p>
<label> Reset Buttton:</label>

<input type="reset" value="Reset" />

&nbsp;

</form>

[ Note : Dear Reader it is a comment tag  in HTML.]

Write this above HTML Form code on the notepad and save as ” Regform.html ” extension in specific

destination Like Desktop and then click double click on this  HTML Form file . Finally you can see the output  on your browser like Mozilla Firefox,Google chrome as like below.

registation form

Related Post or You may Like:

  1. Introduction of HTML5&HTML

  2. HTML Editors

  3. HTML Basic

  4. HTML Elements

  5. HTML Heading

  6. HTML Paragraph

  7. HTML Table

  8. HTML Links

  9. HTML LISTS

  10. HTML Images