Checkboxes & Radio Buttons

Radio Buttons and Check boxes are one of the most common type given to Input tags. These are mostly used in forms and other form related areas. Actually Radio buttons are graphical icons representing one of the set of items. Out of this set of items only one item can be selected at once.

Checkbox_1

Checkbox 1

On the other hand, Checkbox as shown in figure above are defined as a graphical control element, which allows users to make binary selections. This exactly means a choice between one of two possible mutually exclusive options. Checkboxes are often shown on the screen as a square box as shown in above image. These checkboxes are used to make multiple selections.

     

Advertisements

Order Forms

Hi folks! I am back with another interesting post for you. You guys have been surfing on lot of eCommerce Websites these days.

Sample Order Form

Sample Order Form

The above sample image gives an actual idea of a sample order form. This is a snapshot taken from our demo file. This Order form is deigned using table structure. Product Name, Quantity, Unit Price and Totals are defined in separate columns. At the bottom of the table we have created a Input bar containing Product Subtotal. We have also mentioned total quantity into shipping rates to get the Order Grand Total. Finally at bottom right, we have a submit button to submit the order which will be further processed by the server.

Now, this form is created using very basic HTML and its Table and Form elements, CSS. We have also used jquery and one of its plugin named Order.js. The CSS Styling has been done in another External Stylesheet. The table element is wrapped inside a div element.

     

Basic Bubble Slider

Something that is now days most widely used in forms, in eCommerce websites and in many more sections of a web page. This is a basic Slider. If you surf the web, you’ll probably see that more and more websites have a slider that rotates images and text and usually at the top of the home page, while in E-Commerce it is used to set a particular range that we want. In technical term, a slider is defined as a Track Point. It is a graphical control element with which a user may set a value by moving an indicator, usually in a horizontal or sometimes in vertical fashion.

     

Different Dropdowns

DropDown1 Hello Folks! Today I will be sharing another important topic with you. This topic is regarding different kinds of dropdown. I believe you all have noticed importance of Dropdown in different websites these days especially in contact forms and other kind of forms. Basically Dropdown is simply a list which allows the user to choose one or multiple values from a list. When activated, it displays (drops down) a list of values, from which the user can select one or multiple values. To create a very simple Dropdown or Select list, we basically us HTML. Using Select and Option Tag, we can easily create a simplest Dropdown. Now we can style this Dropdown using CSS Styling. This Styling wont affect its working. Because Styling can be changed using some kind of scripting.

     

Horizontal Forms

Hello Folks! Today I am gonna post something really interesting and unique. This time I will be posting another type of form. This will be Login form. Login forms are really common type of form, but the form I am gonna share will be unique in layout from other forms. Normally, we see vertically aligned form which are have a basic design. The design we use is horizontally aligned. We have also used some scripting to create this basic form structure and other animation.

Horizontal Form

Horizontal Form

     

Interactive Form with Sliding

Hello folks! Today I am gonna share about Interactive Forms with you. This form is created by me and It can be used in different fields for various purpose. As an example I made this form for Hospital info feeder. This is an Attendant Registration form which can be used to store Attendant info for all those who are coming to meet patient admitted in hospital. This is a highly interactive and simple form. This form is created using HTML, CSS, Jquery and some additional scripting through javascript. In styling, I have used some vendor prefixes for browsers like Chrome, Firefox, Opera, Safari etc. I also used some CSS3 Attributes. This form is backward compliant. It means that this form works on all old as well as latest browsers including IE8.

     

jQuery Full Content

Hello Folks I am back with another post. Last time I posted something about Responsive Templates. Today I am going to discuss something about a very popular jquery plugin called Jquery Full Content. Now this plugin is a quite interesting plugin which can be used to create a full dynamic single page website. This plugin is used to create fully container with width and height of window. It will add a scrolling effect to the page . Once we click any link it will scroll to that location automatically. This location can be either vertical or horizontal. A sample to the image is shown below.

HomePage

HomePage