Webmasters Gallery

One of the main drivers of business success is good customer relations. Companies must listen to their customers and take appropriate action. Many online businesses collect feedback from their customers through online forms.

You can see these forms on the contact page of almost every website. They ask for the following basic information:

• Name
• Email
• Message

The comments companies receive from these contact pages can affect their road maps. Have you ever wondered how these forms work? Let’s take a look at them together, beginning with the basics and ending with more advanced topics.

Note: What I’m going to talk (write) about requires some HTML knowledge.

The form element:

…

First, you need to enable users to interact with you — through a form. You can improve the form with various input, textarea, checkbox, radio, button, and submit elements.

Let’s examine these elements, beginning with a brief description of attributes:

Attributes add properties to an element. Each element has tags that specify what it can do and have a key=“value.” I will build them with you below.

The input element:

The input element creates a field where text can be entered. With the type attribute, you can further customize this element and allow it to do specific work.

Input types:

• button: sends information in the form to the backend. It can perform any function within the page.

• checkbox: used for single or multiple selection. Checkbox creates a small square box in the browser. When users click on the box, a check mark appears.

• color: allows the user to visually select a color. The selection screen may appear differently in different browsers. You can also enter the color manually in six-character hexadecimal format (# FF0000).

• date: used for date selection. You can use attributes to limit your selection from or to a specific date. You can make it easier for users by allowing them to click to select a date. This selection screen may appear differently in different browsers.

• datetime-local: date allows users to select date and time separate from input type. Users can select day, month, year, hour, and minute. You can limit this selection by providing minimum and maximum date-time intervals. The dropdown box may vary according to browser types.

Note: There was no seconds option at the time of writing. 🙂

• email: used to enter an email address. You can support a specific domain extension. The pattern structure allows you to verify emails. You can use multiple attributes to separate email addresses with commas.

• file: allows the user to select one or more files from their computer for upload. It’s possible to submit these files to the server using forms or through the JavaScript API. You can use the accept attribute to limit the file extensions that will be accepted.

• hidden: creates inputs that the user cannot see. This is usually used to send information to the backend.

• image: replaces images with standard input when sending forms.

• month: allows users to select month and year.

• number: allows users to enter numbers. This type of input prevents users from entering characters rather than numbers. You can specify minimum and maximum values.

• password: allows users to enter passwords. Each character that’s entered is marked with a “*” or “•” (this varies according to browser), ensuring that the entered information remains secure. You can make passwords more secure by specifying minimum or maximum values.

• radio: allows a single selection from multiple choices. Radio creates a small round box in the browser. When a user clicks on a radio button, a check mark appears.

• range: allows users to make a selection within a certain range. It creates a round horizontal slider in the browser. The user can scroll left or right to make a selection.

• reset: clears all inputs in a form. This is a very useful button for long- form entries, such as survey entry.

• search: creates a text input field where users can input a search term. Backend JavaScript development is required to create a search button.

• submit: sends all inputs entered into the form to the server.

• tel: allows users to enter a phone number. Since there are multiple formats used throughout the world, you can specify a specific format. This type of input opens the keyboard to numbers instead of text for mobile users.

• text: allows the user to enter a single line of text. This is one of the most used input types. You can specify the text length with minimum and maximum values.

• time: allows users to select a time within a specific period. Users can enter values in hours and minutes. You can distinguish between the 12-hour clock or the 24-hour clock according to the user’s operating system.

• url: allows users to enter URLs. You can control these values by creating a specific pattern.

• week: allows the user to enter the week and year. It uses the standard ISO 8601 week number (i.e., week 1 to 52 or 53).

Attributes

You can add more attributes using input attributes. As you can see in the examples below, there are many options, such as allowing for autocomplete when typing, limiting uploads to particular file extensions, and setting minimum or maximum values for text entry.

Let’s take a look at these features.

accept (place to use — input type=“file”)

Usually used in file input type, this value allows the user to select specific file types during file selection. You can add more than one type by separating types with a comma.

audio/* = allows users to select audio files.

video/* = allows users to select video files.

image/* = allows users to select image files.

.pdf = allows users to select only files with a .pdf extension.

alt (place to use — input type=“image”)

This is typically used in the image input type. If the image you want to use cannot be loaded, it will be displayed by the alternative text browser. This value shouldn’t be empty; it should contain information related to the image used.

autocomplete

If the user has given permission, this attribute is used to present the values that the user has previously entered in the input fields as suggestions.

This attribute provides convenience by automatically completing information, such as name, surname, email, address, or phone number, that the user begins to enter. Up-to-date browsers can store user credit card information in encrypted format.

Autocomplete may require the following to work:

1. Input must have name and id attributes.
2. It should be used inside the input form element.
3. The form must have a submit button.

autofocus

This Boolean value focuses on the input it’s applied to when the page loads. It cannot be used with a hidden input type because the user won’t be able to see it.

checked (place to use — input type=“checkbox” and input type=“radio”)

This Boolean value checks the input used when the page loads. It’s usually used with checkbox and radio input types.

dirname

When the form is submitted, dirname sends the text direction of the input value to the server.

Note: I have never used this one. 🙂

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out in the browser. No inputs for this field are sent when the form is submitted.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

formaction (place to use — input type=“submit” and input type=“image”)

The formaction attribute specifies where form data is sent when the form is submitted. When this attribute is added, it changes where the form is sent.

formenctype (place to use — input type=“submit” and input type=“image”)

When the form is submitted, formenctype specifies how input data should be encoded. This changes the default enctype value of the form.

Below are three different types:

application/x-www-form-urlencoded: the default value, sent with the encodeURI() function; all characters are encoded.

multipart/form-data: uses the FormData API to send data; characters aren’t encoded. This attribute is used when the form allows for file uploads.

text/plain: characters aren’t encoded, and data is displayed the way it is sent. This is the riskiest method because the data isn’t formatted for machine understanding and behaves unpredictably.

formmethod (for type=“submit” and type=“image”)

The formmethod attribute specifies how to submit the form. There are three different ways to submit the form:

get: ends the URL with “?”. This attribute adds a question mark to all input data in the form. The URL is sent to the server as an HTTP get request. This method is often used for simple form structures that contain ASCII characters. This value is a default.

post: The body containing the input data in the form is sent as an HTTP post request. This is usually used for more complicated forms.

dialog: This method usually indicates that the button closes things like dialogs. No form data is transferred.

formnovalidate (for type=“submit”)

This Boolean value allows the form to submit the input contents without checking the specified patterns before submission. It overrides the novalidate attribute in these inputs.

formtarget (for type=“submit” and type=“image”)

The formtarget attribute determines where the response will be displayed after the form is submitted. There are three different types:

_self: opens the responses in the current page. This is the default.

_blank: opens the responses in a new browser page.

_parent: loads the response in the parent browsing context of the current page.

_top: loads the response in the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context.

height (for type=“image”)

The height attribute specifies the height, in pixels, of the image used in the input. If you’re using the height type, you must also enter the width and height values. The browser will create a field based on these values.

max

The max attribute determines the maximum value that can be entered in the field. The max and min attributes work with the following input types: number, range, date, datetime, datetime-local, month, time, and week.

maxlength

The maxlength attribute specifies the maximum number of characters that can be included in the input element.

multiple (for type=“email” and for type=“file”)

This Boolean value allows the user to enter more than one value. The multiple attribute works with the following input types: email and file.

list

This attribute provides users with suggested options below the input field.

name

This attribute names an input. It distinguishes this input from others and allows the value to be received.

placeholder

The placeholder attribute provides the user with a hint about what they should input into a field. A brief description or example appears in the input field before a user enters a value.

pattern

The pattern attribute establishes a pattern for the data structure. The information the user enters is checked against this pattern before submission.

readonly

This Boolean value makes the input type readable only. The user cannot change this value; it can be changed only in the backend with JavaScript. The biggest difference between a read-only field and a disabled field is that a read-only field can be sent while the disabled input field isn’t sent during form submission.

required

This Boolean value checks whether the field is full/filled before form data is submitted. It returns an error if the field is empty.

size

The size attribute determines the width of an input element. In select elements, the size attribute determines how many visible options are available.

src (only for type=“image”)

The src attribute provides the location, or URL, of an image.

step

This attribute allows you to increase the values entered in the input by a specific amount. If the step is 5, the input values should be 0, 5, 10, 15, and so on. Step is usually used with min and max attributes.

tabindex

Tabs allow users to quickly navigate through form inputs by using the tab key instead of using a mouse. The tabindex attribute provides focus to tabbed elements in an order that differs from the default source code. It also gives usually untabbed elements, like paragraphs, tab focus. Tabindex consists of positive numbers. If a negative number is used, that input will not receive focus.

type

This attribute determines the input type used. There are different uses:

value

The value attribute determines what the current value of the input is. When “button” is used for “reset” and “submit,” it defines the text in the button.

The button element:

The button element provides users with the ability to take action on a form.

Attributes

autofocus

This Boolean value focuses on the input it’s applied to when the page loads. It cannot be used with a hidden input type because the user won’t be able to see it.

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out by browsers. No inputs for this field are sent when the form is submitted.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

formaction (input type=“submit” and input type=“image”)

The formaction attribute specifies where form data is sent when the form is submitted. When this attribute is added, it changes where the form is sent.

formenctype (for type=“submit” and type=“image”)

When the form is submitted, formenctype specifies how input data should be encoded. This changes the default enctype value of the form.

Below are three different types:

application/x-www-form-urlencoded: the default value, sent with the encodeURI() function; all characters are encoded.

multipart/form-data: uses the FormData API to send data; characters aren’t encoded. This attribute is used when the form allows for file uploads.

text/plain: characters aren’t encoded, and data is displayed the way it is sent. This is the riskiest method because the data isn’t formatted for machine understanding and behaves unpredictably.

formmethod (for type=“submit” and type=“image”)

The formmethod attribute specifies how to submit the form. There are three different ways to submit the form:

get: ends the URL with “?”. This attribute adds a question mark to all input data in the form. The URL is sent to the server as an HTTP get request. This method is often used for simple form structures that contain ASCII characters. This value is a default.

post: The body containing the input data in the form is sent as an HTTP post request. This is usually used for more complicated forms.

dialog: This method is usually used to indicate that that button closes things like dialogs. No form data is transferred.

formnovalidate (for type=“submit”)

This Boolean value allows the form to submit the input contents without checking the specified patterns before submission. It overrides the novalidate attribute in these inputs.

formtarget (for type=“submit” and type=“image”)

The formtarget attribute determines where the response will be displayed after the form is submitted. There are three different types:

_self: opens the returned responses in the current page. This is the default.

_blank: opens the responses in a new browser page.

_parent: loads the response in the parent browsing context of the current context.

_top: loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context.

name

This attribute names an input. It distinguishes this input from others and allows the value to be received.

type

This attribute determines the input type used. There are different uses:

value

Value determines what the current value of the input is. When “button” is used for “reset” and “submit,” it defines the text in the button.

The datalist element:

The datalist element provides an autocomplete feature for a form. It’s used to provide predefined answer options.

Attributes

This element has no attributes other than the global attributes common to all elements.

The fieldset element:

This element groups input types within the form. It usually appears as a box in the browser. The legend tag provides a caption for the fieldset element.

Attributes

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out by browsers. No inputs for this field are sent when the form is submitted.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

name

This attribute names an input. It distinguishes this input from others and allows the value to be received.

The label element:

The label element names elements, such as button, input, meter, output, progress, select, or textarea, in the form. Labels help users understand how to fill out these elements in the form.

Attributes

for

This attribute specifies which element in the form matches which label. It matches the ID of an element with the string written for it.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

The legend element:

The legend element is used with the fieldset element. It defines the title of the grouped section.

Attributes

This element has no attributes other than the global attributes common to all elements.

The meter element:

This element represents a value within a specified range.

Attributes

min
The min attribute determines the minimum value that can be entered in the field. The max and min attributes work with the following input types: number, range, date, datetime, datetime-local, month, time, and week.

max

The max attribute determines the maximum value that can be entered in the field. The max and min attributes work with the following input types: number, range, date, datetime, datetime-local, month, time, and week.

low

This attribute must be greater than the value used in the minimum attribute but less than the value used in the maximum and high attributes.

high
This attribute must be less than the value used in the maximum attribute but greater than the value used in the low and min attributes.

optimum

This attribute is the optimal numeric value. It falls between the values specified in the min and max attributes. If the value is between the min and low attributes, the minimum value is accepted.

value

This attribute determines the current value of the input. When “button” is used for “reset” and “submit,” it defines the text in the button.

The opt group element:

This element groups related options in a dropdown list.

Attributes

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out by browsers. No inputs for this field are sent when the form is submitted.

label

This attribute names the group where it’s used. This value is displayed as disabled in the dropdown, which allows the user to more easily make selections.

The option element:

This element defines items listed in select, optgroup, and datalist elements. It’s used for menu items in popups, dropdown lists, and other lists.

Each option element must have a value attribute. If there is no value attribute, the value is determined from the text in the element.

Attributes

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out by browsers. No inputs for this field are sent when the form is submitted.

label

Values for in this attribute are used in place of the listed elements. They are usually listed in dropdowns because they are shorter versions of the list options.

selected

This Boolean value automatically selects the value.

value

This attribute determines the current value of the input. When “button” is used for “reset” and “submit,” it defines the text in the button.

The output element:

This input type shows the results of a calculation.

Attributes

for

The for attribute defines the relationship between a calculation and the elements used in the calculation.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

name

This attribute names an input. It distinguishes this input from others and allows the value to be received.

The progress element:

The progress element displays an indicator that shows the user how much progress they have made. This element is usually rendered as a progress bar.

Attributes

max
The max attribute for the progress element defines how much work is required to complete a task.

value

This attribute determines the current value of the input. When “button” is used for “reset” and “submit,” it defines the text in the button.

The select element:

This element creates a dropdown list of options. Users can select an option from this list. The ID matches the for attribute in the label element, and the name attribute distinguishes it from other elements in the form.

Attributes

autocomplete

If the user has given permission, this attribute presents the values that the user has previously entered in the input fields as suggestions.

The autocomplete attribute provides convenience by automatically completing information, such as name, surname, email, address, or phone number, that the user begins to enter. Up-to-date browsers can store user credit card information in encrypted format.

Autocomplete may require the following to work:

1. Input must have name and id attributes.
2. It should be used inside the input form element.
3. The form must have a submit button.

autofocus

This Boolean value focuses on the input it’s applied to when the page loads. It cannot be used with a hidden input type because the user won’t be able to see it.

disabled

This Boolean value disables input. The user cannot interact with this field. The field is displayed with a dimmer color or grayed out in the browser. No inputs for this field are sent when the form is submitted.

form

This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it.

multiple

This Boolean value allows the user to enter one or more values in the input element. The multiple attribute works with the following input types: email and file.

name

This attribute names an input. It distinguishes this input from others and allows the value to be received.

required

This Boolean value checks whether the field is full/filled before form data is submitted. It returns an error if the field is empty.

size

The size attribute determines the width of an input element. In select elements, the size attribute determines how many visible options are available.

The textarea element: </h2> <p>This is a multiline text field that is often used in comment or feedback forms. It allows the user to easily write and edit long text entries.</p> <h3>Attributes</h3> <p><strong>autocapitalize</strong></p> <p>This feature is supported by WebKit on iOS for iOS 5 and later. The autocapitalize attribute controls whether the text is automatically capitalized when it’s entered/edited. There are several possible values:</p> <p><strong>none:</strong> turns off this feature.</p> <p><strong>sentences:</strong> replaces the first letter of the first word in each sentence with capital letters.</p> <p><strong>words:</strong> capitalizes the first letter of each word.</p> <p><strong>characters:</strong> capitalizes all letters.</p> <p><strong>autocomplete</strong></p> <p>If the user has given permission, this attribute presents the values that the user has previously entered in the input fields as suggestions.</p> <p>The autocomplete attribute provides convenience by automatically completing information, such as name, surname, email, address, or phone number, that the user begins to enter. Up-to-date browsers can store user credit card information in encrypted format.</p> <p>Autocomplete may require the following to work:</p> <ol> <li>Input must have name and id attributes.</li> <li>It should be used inside the input form element.</li> <li>The form must have a submit button.</li> </ol> <p><strong>autofocus</strong></p> <p>This Boolean value focuses on the input it’s applied to when the page loads. It cannot be used with a hidden input type because the user won’t be able to see it. </p> <p><strong>cols</strong></p> <p>This attribute determines the width of the input field. The default value of this positive attribute is 20.</p> <p><strong>form</strong></p> <p>This attribute specifies the forms an input element belongs to. The form’s ID should match this form attribute. If the form attribute doesn’t exist, the input matches the closest form element that contains it. </p> <p><strong>maxlength</strong></p> <p>This attribute specifies the maximum number of characters that can be entered in the field.</p> <p><strong>minlength</strong></p> <p>This attribute specifies the minimum number of characters that can be entered in the field. </p> <p><strong>name</strong></p> <p>This attribute allows you to name an input. It distinguishes this input from others and allows the value to be received.</p> <p><strong>placeholder</strong></p> <p>The placeholder attribute provides the user with a hint about what they should enter in a field. A brief description or example appears in the input field before a user enters a value.</p> <p><strong>readonly</strong></p> <p>This Boolean value makes the input type readable only. The user cannot change this value; it can be changed only in the backend with JavaScript. The biggest difference between a read-only field and a disabled field is that a read-only field can be sent while the disabled input field isn’t sent during form submission.</p> <p><strong>required</strong></p> <p>This Boolean value checks whether the field is full/filled before form data is submitted. It returns an error if the field is empty.</p> <p><strong>size</strong></p> <p>The size attribute determines the width of an input element. In select elements, the size attribute determines how many visible options are available.</p> <p><strong>rows</strong></p> <p>This attribute determines the height/number of lines of the text input field. This value is a positive number.</p> <p><strong>spellcheck</strong></p> <p>The spellcheck attribute specifies whether the browser/OS should spell check the text area. There are two values this attribute can have:</p> <p><strong><em>true:</em></strong> The browser will check the spelling of text.</p> <p><strong><em>false:</em></strong> The browser will not check the spelling of text.</p> <p><strong>wrap</strong></p> <p>This attribute determines how the text in the text area will wrap when a form is submitted. This attribute can have one of several values:</p> <p><strong><em>hard:</em></strong> The browser automatically adds line breaks (CR + LF), so that each line cannot exceed the control width. The cols attribute must also be specified for this to work.</p> <p><strong><em>soft:</em></strong> The browser ensures that all line breaks in the value consist of a CR + LF pair, but does not add additional line breaks. This is the default value. </p> <p><strong><em>off:</em></strong> When wrap is off, line breaks are handled like they are when set to soft, but instead of a CR+LF pair, the browser transforms line breaks that cross columns into white spaces. Lines aren’t wrapped, and the text area becomes horizontally scrollable.</p> <div><span>Pro Tip</span></p> <p><span>If you have no idea about HTML, do not worry! <strong><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cuam90Zm9ybS5jb20vP3V0bV9tZWRpdW09bm91cGVfYmxvZyZhbXA7dXRtX3NvdXJjZT1odHRwczovL3d3dy5qb3Rmb3JtLmNvbS9ibG9nL2NyZWF0ZS1odG1sLWZvcm0vJmFtcDt1dG1fY2FtcGFpZ249Y3Rh&feed-stats-url-post-id=109798">Try JotForm today to create beautiful online forms!</a></strong> </span></p> </div> <p>You must use various skills to create a form like a pro, and design plays a vital role. To learn more about form design, you can check <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cuam90Zm9ybS5jb20vZm9ybS1kZXNpZ24v&feed-stats-url-post-id=109798">46 Form Design Best Practices</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <!-- related posts START --> <!-- related posts END --> <script type="text/javascript" src="http://www.webmastersgallery.com/wp-content/themes/inove/js/comment.js"></script> <div id="comments"> <div id="cmtswitcher"> <a id="commenttab" class="curtab" href="javascript:void(0);" onclick="MGJS.switchTab('thecomments,commentnavi', 'thetrackbacks', 'commenttab', 'curtab', 'trackbacktab', 'tab');">Comments (0)</a> <a id="trackbacktab" class="tab" href="javascript:void(0);" onclick="MGJS.switchTab('thetrackbacks', 'thecomments,commentnavi', 'trackbacktab', 'curtab', 'commenttab', 'tab');">Trackbacks (0)</a> <span class="addcomment"><a href="#respond">Leave a comment</a></span> <span class="addtrackback"><a href="http://www.webmastersgallery.com/2020/01/03/html-forms-learn-how-to-create-them-like-a-pro/trackback/">Trackback</a></span> <div class="fixed"></div> </div> <div id="commentlist"> <!-- comments START --> <ol id="thecomments"> <li class="messagebox"> No comments yet. </li> </ol> <!-- comments END --> <!-- trackbacks START --> <ol id="thetrackbacks"> <li class="messagebox"> No trackbacks yet. </li> </ol> <div class="fixed"></div> <!-- trackbacks END --> </div> </div> <div id="comment_login" class="messagebox"> You must be <a href="http://www.webmastersgallery.com/wp-login.php">logged in</a> to post a comment. </div> <div id="postnavi"> <span class="prev"><a href="http://www.webmastersgallery.com/2020/01/03/real-estate-investor-business-cards/" rel="next">Real Estate Investor Business Cards</a></span> <span class="next"><a href="http://www.webmastersgallery.com/2020/01/03/understanding-css-grid-creating-a-grid-container/" rel="prev">Understanding CSS Grid: Creating A Grid Container</a></span> <div class="fixed"></div> </div> </div> <!-- main END --> <!-- sidebar START --> <div id="sidebar"> <!-- sidebar north START --> <div id="northsidebar" class="sidebar"> <!-- feeds --> <div class="widget widget_feeds"> <div class="content"> <div id="subscribe"> <a rel="external nofollow" id="feedrss" title="Subscribe to this blog..." href="http://www.webmastersgallery.com/feed/"><abbr title="Really Simple Syndication">RSS</abbr></a> </div> <div class="fixed"></div> </div> </div> <!-- showcase --> <div id="text-389627311" class="widget widget_text"> <div class="textwidget"><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe for latest Updates</a></div> </div><div id="text-389629461" class="widget widget_text"> <div class="textwidget"><form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastersgallery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="webmastersgallery" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></p></form></div> </div></div> <!-- sidebar north END --> <div id="centersidebar"> <!-- sidebar east START --> <div id="eastsidebar" class="sidebar"> <!-- categories --> <div class="widget widget_categories"> <h3>Categories</h3> <ul> <li class="cat-item cat-item-518"><a href="http://www.webmastersgallery.com/category/affiliate-programs/">Affiliate Programs</a> </li> <li class="cat-item cat-item-147"><a href="http://www.webmastersgallery.com/category/design/">Designing</a> </li> <li class="cat-item cat-item-519"><a href="http://www.webmastersgallery.com/category/domain-names/">Domain Names</a> </li> <li class="cat-item cat-item-37"><a href="http://www.webmastersgallery.com/category/e-commerce/">E-commerce</a> </li> <li class="cat-item cat-item-509"><a href="http://www.webmastersgallery.com/category/internet-directories/">Internet Directories</a> </li> <li class="cat-item cat-item-510"><a href="http://www.webmastersgallery.com/category/message-boards/">Message Boards</a> </li> <li class="cat-item cat-item-1"><a href="http://www.webmastersgallery.com/category/uncategorized/">Others</a> </li> <li class="cat-item cat-item-506"><a href="http://www.webmastersgallery.com/category/programming/">Programming</a> </li> <li class="cat-item cat-item-511"><a href="http://www.webmastersgallery.com/category/promotion-and-marketing/">Promotion and Marketing</a> </li> <li class="cat-item cat-item-534"><a href="http://www.webmastersgallery.com/category/scripts-and-programming/">Scripts and Programming</a> </li> <li class="cat-item cat-item-513"><a href="http://www.webmastersgallery.com/category/search-engines/">Search Engines</a> </li> <li class="cat-item cat-item-135"><a href="http://www.webmastersgallery.com/category/social-media/">Social Media</a> </li> <li class="cat-item cat-item-514"><a href="http://www.webmastersgallery.com/category/softwares/">Softwares</a> </li> <li class="cat-item cat-item-515"><a href="http://www.webmastersgallery.com/category/tips-and-tutorials/">Tips and Tutorials</a> </li> <li class="cat-item cat-item-338"><a href="http://www.webmastersgallery.com/category/web-hosting/">Web Hosting</a> </li> <li class="cat-item cat-item-516"><a href="http://www.webmastersgallery.com/category/webmaster-tools/">Webmaster Tools</a> </li> <li class="cat-item cat-item-501"><a href="http://www.webmastersgallery.com/category/webmaster-resources/">Webmasters Resources</a> </li> <li class="cat-item cat-item-3"><a href="http://www.webmastersgallery.com/category/web-design/">Website Design</a> </li> </ul> </div> </div> <!-- sidebar east END --> <!-- sidebar west START --> <div id="westsidebar" class="sidebar"> <!-- blogroll --> <div class="widget widget_links"> <h3>Blogroll</h3> <ul> <li><a href="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </div> </div> <!-- sidebar west END --> <div class="fixed"></div> </div> <!-- sidebar south START --> <div id="southsidebar" class="sidebar"> <!-- archives --> <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2025/02/'>February 2025</a></li> <li><a href='http://www.webmastersgallery.com/2025/01/'>January 2025</a></li> <li><a href='http://www.webmastersgallery.com/2024/12/'>December 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/11/'>November 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/10/'>October 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/09/'>September 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/08/'>August 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/07/'>July 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/06/'>June 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/05/'>May 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/04/'>April 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/03/'>March 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/02/'>February 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/01/'>January 2024</a></li> <li><a href='http://www.webmastersgallery.com/2023/12/'>December 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/11/'>November 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/10/'>October 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/09/'>September 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/08/'>August 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/07/'>July 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/06/'>June 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/05/'>May 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/04/'>April 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/03/'>March 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/02/'>February 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/01/'>January 2023</a></li> <li><a href='http://www.webmastersgallery.com/2022/12/'>December 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/11/'>November 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/10/'>October 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/09/'>September 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/08/'>August 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/07/'>July 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/06/'>June 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/05/'>May 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/04/'>April 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/03/'>March 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/02/'>February 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/01/'>January 2022</a></li> <li><a href='http://www.webmastersgallery.com/2021/12/'>December 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/11/'>November 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/10/'>October 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/09/'>September 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/08/'>August 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/07/'>July 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/06/'>June 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/05/'>May 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/04/'>April 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/03/'>March 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/02/'>February 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/01/'>January 2021</a></li> <li><a href='http://www.webmastersgallery.com/2020/12/'>December 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/11/'>November 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/10/'>October 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/09/'>September 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/08/'>August 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/07/'>July 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/06/'>June 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/05/'>May 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/04/'>April 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/03/'>March 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/02/'>February 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/01/'>January 2020</a></li> <li><a href='http://www.webmastersgallery.com/2019/12/'>December 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/11/'>November 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/10/'>October 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/09/'>September 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/08/'>August 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/07/'>July 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/06/'>June 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/05/'>May 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/04/'>April 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/03/'>March 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/02/'>February 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/01/'>January 2019</a></li> <li><a href='http://www.webmastersgallery.com/2018/12/'>December 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/11/'>November 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/10/'>October 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/09/'>September 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/08/'>August 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/07/'>July 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/04/'>April 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/01/'>January 2018</a></li> <li><a href='http://www.webmastersgallery.com/2017/12/'>December 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/11/'>November 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/09/'>September 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/08/'>August 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/07/'>July 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/06/'>June 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/05/'>May 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/04/'>April 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/03/'>March 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/02/'>February 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/01/'>January 2017</a></li> <li><a href='http://www.webmastersgallery.com/2016/12/'>December 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/11/'>November 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/10/'>October 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/09/'>September 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/08/'>August 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/07/'>July 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/06/'>June 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/05/'>May 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/04/'>April 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/03/'>March 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/02/'>February 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/01/'>January 2016</a></li> <li><a href='http://www.webmastersgallery.com/2015/12/'>December 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/11/'>November 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/10/'>October 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/09/'>September 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/08/'>August 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/07/'>July 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/06/'>June 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/05/'>May 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/04/'>April 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/03/'>March 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/02/'>February 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/01/'>January 2015</a></li> <li><a href='http://www.webmastersgallery.com/2014/12/'>December 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/11/'>November 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/10/'>October 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/09/'>September 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/08/'>August 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/07/'>July 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/06/'>June 2014</a></li> <li><a href='http://www.webmastersgallery.com/2013/07/'>July 2013</a></li> <li><a href='http://www.webmastersgallery.com/2013/01/'>January 2013</a></li> <li><a href='http://www.webmastersgallery.com/2012/12/'>December 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/08/'>August 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/07/'>July 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/06/'>June 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/05/'>May 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/04/'>April 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/01/'>January 2012</a></li> <li><a href='http://www.webmastersgallery.com/2011/11/'>November 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/06/'>June 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/03/'>March 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/02/'>February 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/01/'>January 2011</a></li> <li><a href='http://www.webmastersgallery.com/2010/12/'>December 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/11/'>November 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/09/'>September 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/07/'>July 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/06/'>June 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/05/'>May 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/02/'>February 2010</a></li> <li><a href='http://www.webmastersgallery.com/2009/12/'>December 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/08/'>August 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/07/'>July 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/06/'>June 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/05/'>May 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/04/'>April 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/03/'>March 2009</a></li> </ul> </div> <!-- meta --> <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div> <!-- sidebar south END --> </div> <!-- sidebar END --> <div class="fixed"></div> </div> <!-- content END --> <!-- footer START --> <div id="footer"> <a id="gotop" href="#" onclick="MGJS.goTop();return false;">Top</a> <a id="powered" href="http://wordpress.org/">WordPress</a> <div id="copyright"> Copyright © 2009-2025 Webmasters Gallery </div> <div id="themeinfo"> Theme by <a href="http://www.neoease.com/">NeoEase</a>. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS 3</a>. </div> </div> <!-- footer END --> </div> <!-- container END --> </div> <!-- wrap END --> </body> </html>