Types of HTML Forms

Types of html forms

In the last two posts we discussed about html text field forms and form attributes.Although all normal forms offer text fields to be filled but sometimes you need to create other types of forms also or you need to add other types of forms also which provide specific option to be chosen such as checkboxes, radio buttons and drop down lists.And there is another type of form also which lets you send an e-mail to a specific mail address.In this post, we'll discuss only check-boxes , radio buttons and drop down lists.For a mail-to form you can go to our mail-to form post.


  1. Check Boxes:Check boxes are commonly used in survey forms in which you need to choose among 3-4 options but number can vary on choice.So how can we create such boxes.The answer is very difficult to understand.It includes a tremendous knowledge of HTML.So keep your focus here.Here we go..
    Just change the input type to "checkbox".Those who don't know about the input tag can visit our post HTML forms

    What it looks like is :- <form action="">
    I own a bike: <input type="checkbox" name="vehicle" value="Bike">
    I own a car: <input type="checkbox" name="vehicle" value="Car">
    I own an airplane: <input type="checkbox" name="vehicle" value="Airplane">
    </form>

    Was it difficult for you....I dont think so
    Now its browser version
    I have a bike:
    I have a car:
    I have an airplane:


  2. Radio ButtonsThese buttons are normally used for polling.These are simple enough to create.Just change the input type to "radio".And if you want one button to be pre-selected then add a simple text phrase checked="checked" in the input tag of that button.I am only showing you the browser version of that button.
    Button pre-selected
    Male:
    Female:


    Button not preselected
    Male:
    Female:


  3. Drop-Down listYou have always noticed this type of list when you'd have to select an year or a state in various forms.You can also create one without any problem.But the syntax is quite different fron types of forms still not to worry. What will you have to do is to start the list with <select> tag and then go on writing down your options using the <option> tag.Don;t worry--i am not gonna leaving you without giving an example.Here is the format....
    <form>
    <select name="year"> (you can give it any name)
    <option value="2014">2014
    </option> <option value="2013">
    2013</option>
    <option value="2012">2012</option>>
    <option value="2011">2011</option>
    </select>
    </form>

    Here is its browser version.


    If you want any one of them to be pre-displayed in the list then just add selected="selected" phrase in the option tag of that option.





This is all for this post.To get info about mail to form check our mail-to post

Comments

Post a Comment

Comment on articles for more info.

Popular posts from this blog

Search box for blog or website

Image
T his is the most basic need for any blog.Every blogger would want for his visitors to make it easy to search his blog.Search box helps your visitors to navigate through your blog and also increase your traffic.It also keeps you updated with your indexed posts.If you don't know about indexing then not to worry at all because it is the place where you will find everything.Blogger is totally customisable and you can add search box in your blog at any place where you want.I am sure if you are writing a blog then you are familiar with blogger widgets and you have also found blogger search box widget.Now the question is : Why are you reading this post if you know about the search box widget.Well, the answer is very simple: Search box widget is not working and is not providing the search results.
Read more

Image Search Engine Using Python

Image
Images provide a lot more information than audio or text. Image processing is the prime field of research for robotics as well as search engines. In this article we will explore the concept of finding similarity between digital images using python. Then we will use our program to find top 10 search results inside a dataset of images for a given picture. It won't be as good as google's search engine because of the technique we will be using to find similarity between images. But what we are going to make will be pretty cool. So lets start. Setting up the Environment Our Algorithm How the code looks Lets build the GUI Additional Techniques Setting up the Environment The code we are going to write requires a few tools which we need to install first. I will try to be as precise as i can and if you get stuck into installing some tool then you can drop a comment below and i will help you sort out the problem. So here are the tools and the steps to install
Keep reading

Cordova viewport problem solved

Image
Include the viewport settings in Cordova If you are facing the auto zooming problem of cordova then go read on the full article. Cordova actually ignores the viewport meta tag which causes the pixel density problem. So we need to tell cordova that viewport tag is equally important as other tags. To do this, we need to add some code to a file which is specify in the article. Corodva messes with pixels If you are using the latest cordova version or creating the cordova app for latest android versions then you may have faced the zoom malfunctioning.I also faced it when creating an app. Many of you may have already searched the web and found the answer of changing the meta tag attributes to get it working. But adding target-densitydpi=medium-dpi does not solve the problem for latest android versions. It may work for gingerbread but not for kitkat and others. So the final solution which i found was one of the stackexchange answer but rarely found. So i am gonna two things here, i
Keep reading