knowledgediarybd.com

Your Virtual Knowledge Campus

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

knowledgediarybd.com © 2017
shares