HTML Tutorial 6: Basic Elements of An HTML Form (Part 2)

In my previous post, I discussed about HTML form (Part 1). Same topic will be continued today and this is the Part 2. In part 1 you've learned creating Text Fields, Password Field, Radio Buttons and Checkboxes. In this post you will learn how to create Submit Button and Drop Down Menu. 

You should open Notepad from your PC to practice this lesson. Then save the html code with .htm or .html extension and then open the saved file with a browser to see the result. Let's begin: 

Drop Down Menu:

Let me begin with creating a drop down menu. This is very interesting as well as easy to create! 

Which one is your Favorite Cell Phone Brand? 

<select>      

<option>Nokia

<option>Samsung

<option>iPhone

<option>BlackBerry 

<option>Others

</select>

You must begin with the <select> tag and end with </select tag>. And every option of the list should start with <option> tag. Then you can type anything as you want. If you type the above text, your browser will show: 

Which one is your Favorite Cell Phone Brand? 

Nokia Samsung iPhone BlackBerry Others

Submit Button:

Submit button is used to send data to the server. After filling up the form, an user need to confirm the email and submit it. 

<input type=submit> denotes a submit button. 

A simple submit button is very easy to create. You just need to write the following code: 

<form>
<input type=submit>
</form>

That's it. Now your browser will show:

It can be used as:

<form>
Username<input type=text>
<input type=submit>
</form>

Username 

Don't Misunderstand! 

You may think you've already learned creating a submit button. Not at all! We've skipped something! Where the submitted data will be sent? We didn't provide any server link. Let's complete the lesson: 

You should use the following code to create a complete submit button: 

<form name="input" action="www.munnamark.blogspot.com" method="get">

Username: <input type=text>

<input type=submit>

</form>

And your browser will show:

Username:

Now if someone hits the submit button, the data will be sent to the server specified in the action attribute (Here: www.munnamark.blogspot.com). 


Putting these elements altogether, hopefully you will be able to create a simple HTML form.  

Stay with Marks PC Solution to get more interesting IT topics!