5 Free Modern Icon Sets For Web & UI Design

We all know the importance of icons in web/UI design. Mobile applications widely using icons these days because they are small screen, by using an icon we can replace a huge text which fit to small screens. There are lot of icons our their for free but finding the best on is the important this. Recently i found some excellent icons release, today in this post we gathered a very Best Collection of Icons for Web and UI Design by CSS Author. I believe this might help you for your various type of projects.

1. Line Icons

Line icons are new trend flat design plus line icon is a good combination. Line icons are simple and subtle lines, it gives the design a modern look and feel. You can use this 48 free line icon set in your website, app, user interface.

2. IMPICONS

IMPICONS is a set of Modern Flat style Free Icons. This is a set of 30 essential icons, they tried to include the most common icons in this set such as delete icon, contact icon, protection icon, document icon, chat icon, shopping icon & many more.

3. Flat Style Icon Set

The new trend flat style is very popular for icons these days. We find thousands of applications are using flat style and long shadow icons. They have a set of modern flat style icons, all are very useful for your projects.

4. Responsive Web Design Devices Icon PSD

All day we have new technologies we can’t even imagine how fast technology growing. As a part of it web word also changing. The very recent impact was responsive web design. It’s an awesome technology introduced by Ethan Marcotte. In this post they are giving away a good set of responsive devices illustration.

5. Beautiful Minimal Hosting Icons PSD

They got some request for an icon set for hosting company so the freebie is an icon set for hosting providers. As you can see the icons are very minimal and scalable high resolution icons for any kind of use.

So, thanks for reading and do subscribe to the blog feed for more amazing posts. You can find the subscription box below.

How To Validate HTML Form Using JavaScript

In the previous post, I have written about HTML forms. So you know how to create an HTML form but do you know how to validate it? Validation basically means to check if the the form information is valid.

One of the example would be to check if the user has left a required field empty. If he has left the field empty then the user shouldn’t be allowed to submit the form. If the user submits the form by keeping a required field empty then we’ll alert the user with a message and shift the user’s focus or cursor to the empty field.

Suppose we have a simple form which asks the user to enter the first name and last name. The code for the same is given below. We have added the submit button here using the input tag with type as submit.

I assume you don’t need any explanation for the HTML code. Once we have the HTML form ready we’ll create the JavaScript function. Given below is the code for JavaScript function which we’ll use to validate the given form.

We have written JavaScript code inside the script tags. The code contains a JavaScript function called validateForm(). Inside this function we have two parts. First part is for fname and the second part is for lname.

In the first part we created a variable x. This variable x points to document > yoform > fname. Then we check if value of x is null or an empty string. If its null or empty then we’ll alert the user by a message and then move the control or focus of the user to x.

Here x is basically the input field called fname inside yoformwithin the document. (document.yoform.fname). So when user leaves the fname field empty and hits submit, he’ll be alerted and the fname field will be focused upon. The same concept is used for second part.

Putting it together

Use the two codes given above in one single HTML file and you’re good to go. You can find the live form here. Try to submit the form keeping the fields empty and you’ll see how it works.

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.

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.

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.

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.

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.

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.

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 –

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.