Html Form

So we are now having a great view in our Website pages and I know you are looking something that you need to be learn more, well I have more tutorial that I can share to you all and I like to share with you again a simple tutorial how making our own form in html.

What is form means?

In dictionary = it is giving a shape or construct a frame.

In our html Form having input elements like text field ,submit button, selecting list and more.

First we are going to open our notepad and we put this tag attribute using of <FORM> And end </FORM>

Example:

If we are making a form we must have a label for our input elements.

Our label

========================================================================

Name:

Email:

Subject :

Our Message:

========================================================================

In our notepad code html we must put like this

<FORM>

Name:

</br>

Email:

</br>

Subject:

</br>

Our Message:

</FORM>

Note: <br> attribute use for single break or space in our html.

You can go here in our previous about <BR> attribute:  go here Basic Tags and Formatting

========================================================================

We have now a label in our form so we are going to add an input code for each label our code looks to be like this.

</form>         

          Name:</br>

 <input type="text" name="Name"  value="Your Name"  size="50"/>

         </br>

        </br>

        E-mail:</br>

 <input type="text" name="E-Mail"  value="Your E-Mail"  size="50"/>

          </br>

         </br>

       Subject:</br>

 <input type="text" name="Subject"  value="Your Subject"  size="50"/>

</br>

         </br>

        Message:</br>

 <textarea type="text" name="Message" rows="10" cols="39"  ></textarea>

 </form>

In our browser looks like this.

Name:

E-mail:

Subject:

Message:

========================================================================

For putting a button in html for our Form

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

Our browser looks like this





========================================================================

and let us combining our button send and reset into our input label text field.


All the code:


</form>      

          Name:</br>

 <input type="text" name="Name"  value="Your Name"  size="50"/>

         </br>

        </br>

        E-mail:</br>

 <input type="text" name="E-Mail"  value="Your E-Mail"  size="50"/>

          </br>

         </br>

       Subject:</br>

 <input type="text" name="Subject"  value="Your Subject"  size="50"/>

</br>

         </br>

        Message:</br>

 <textarea type="text" name="Message" rows="10" cols="39"  ></textarea>

          </br>

         </br>

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

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

 </form>

========================================================================

Complete Form

Name:

E-mail:

Subject:

Message:

========================================================================

If we like to putting input elements password in our form text field

<form>

Password: <input type="password" name="pwd" />

</form>

In our browser:

Password:

========================================================================

Making check box form, this is our code we put

<form>

 <input type="checkbox" name="Store" value="Tea" /> Do you have a tea?
<br />

 <input type="checkbox" name="Store" value="Coffee" /> Do you have a coffee? 

 </form>

In our browser:

Do you have a tea?
Do you have a coffee?

========================================================================


Now we have a simple form in our Html, try it and test to your website.


Next to Html Form Text Area

Return to:

Html Tutorial Introduction

Html Structure And Method

Basic Tags and Formatting

Adding links in Html Hyperlinks

Html Instruction Formatting Text

Html Working With Fonts

Html Creating Lists

Html Adding Images To Our Pages Or Website

Html Creating Image Maps
HTML Table Border

HTML Marquee Tag Direction
HTML Marquee Image Attribute

Html Marquee Behavior
Html Marquee Scroll Delay
Html Marquee Scroll Amount
Html Marquee Using Loop Attribute
Html Marquee Background Color
Html Images SlideShow Javascript
Html Blinking Text Or Images
Html Basic Using CSS

If you like to see our Flash template Design/Template Page goes here:

Template Design

See all: Our Template