Creating Form, Radio Button, Checkbox and Dropdown in HTML

In this post we’ll see how we can create forms in HTML. The forms can be used to get information from the users. And that information can be of different types.

So we can create simple text areas, radio buttons, check boxes and drop down menus to get information from the user. This information which we will get from the HTML form can be processed later on with programming languages like JavaScript, PHP, etc.

I’ll show you how to use that information using JavaScript and PHP in my upcoming posts. But for now, lets just create the form without worrying about the functionality.

Creating A Simple HTML Form

To create form you’ll have to use the form tag in HTML. Inside the form tags you can create an input field using the input tag. Now the input can be of different types. For this example, we’ll use a simple text input.

[html]

<form name=”MyForm” action=”SomeFile.html” method=”get” >
Enter Country: <input type=”text” name=”Country” />
</form>

[/html]

Enter Country:

Explanation – We have used form tag to create an HTML form. We have used name, action and method as form attributes.

  1. The attribute name defines the name of this form.
  2. The attribute action defines the file which the browser should open when the form is submitted.
  3. The attribute method defines the way in which the information should be sent.

Just ignore the form attributes for now. We’ll look into that in another post. Inside the form tags we have used input tag. The input tag defines an empty field. We have used two attributes with input tag.

  1. The type attribute defines the type of input.
  2. The name attribute defines the variable name. name=”abc” is almost same as $abc = <user input> or String abc = <user input>. I hope you get the idea.

Password Field

Instead of using simple input box, we can use a special type of input box for Passwords. In this way the password will be hidden when entered. You have to change the type to password to create a password field.

[html]

<form name=”MyForm” action=”SomeFile.html” method=”get” >
Enter Password: <input type=”password” name=”UserPassword” />
</form>

[/html]

Enter Password:

Radio Buttons

Radio buttons are useful when you want the user to select one option from many. For example, Radio buttons can be used to get information about gender of the user. The user can choose only one option – male or female.

[html]

<form name=”MyForm” action=”SomeFile.html” method=”get” >
<input type=”radio” name=”sex” value=”male”> Male <br/>
<input type=”radio” name=”sex” value=”female”> Female <br/>
</form>

[/html]

Male
Female 

When we type name=”sex” value=”male”, it is almost same as saying sex=”male”. Here we cannot select both radio buttons because there is only one name but two values. And name can only have one value at a time.

But if these two radio buttons have different name attribute then you’ll be able to select both radio buttons. You can see the live example below.

[html]

<form name=”MyForm” action=”SomeFile.html” method=”get” >
<input type=”radio” name=”sex” value=”male”> Male <br/>
<input type=”radio” name=”gender” value=”female”> Female <br/>
</form>

[/html]

Male
Female 

Check Box

Like radio buttons, you have something called as Check box in HTML. Using check box you can allow user to select multiple options from the list.

[html]

<form name=”MyForm” action=”SomeFile.html” method=”get” >
Which languages do you know?
<input type=”checkbox” name=”mybox” value=”php”> PHP <br/>
<input type=”checkbox” name=”mybox” value=”javascript”> JavaScript <br/>
</form>

[/html]

Which languages do you know?
PHP
JavaScriptUse the same name attribute for a list of check box. This is like having a box called “mybox” and putting all the selected items into “mybox”. Now when we open the box called “mybox”, you’ll be able to retrieve all the items inside that box.

Drop Down Menu

You can create a drop down menu using select and option tags. Suppose you want the user to choose from Windows, Linux, Mac. You can create a drop down menu for that using the following code –

[html]

<select name=”OPSYS” >
<option value=”WIN” > Windows </option>
<option value=”LIN”> Linux </option>
<option value=”MAC”> Mac </option>
</select>

[/html]

The concept is almost the same. The value of selected option will be set to the name of menu. In this case, if we select Linux from the drop down then variable OPSYS will be set to LIN as follows: OPSYS=”LIN”.

I hope this was helpful. Thanks for reading and do subscribe to the blog feed for more amazing posts. You can find the subscription box below.

Leave a Reply