The javascript:void(0); attribute is used in the anchor tag for empty links. It helps to prevent the default behavior of href links. But, JavaScript Void 0 may not work well for some JS frameworks (Angular, Backbone.js, etc) and SPA sites. Also, the content security policy (CSP) does not support javascript:void(0) in the application. Use the “#!” in the href attribute of the <a> tag for empty links.

If autocomplete is on in the browser, the input value is filled automatically based on the previously entered values. The autocomplete feature mostly works for the username, email, and password inputs which are saved in the browser. It is possible to turn off autocomplete for form or specific input fields. The autocomplete attribute helps to specify whether form inputs should have autocompletion on or off.

Generally, a text input element is used in the HTML forms to accept the user’s input. The user can input alphanumeric and special characters in this text input field. In some specific cases, you are required to allow the user to input only alphabets, and restrict them to input numeric and special characters. In this example code snippet, we will show you how to allow only alpha letters or characters in the input element with HTML.

Page loader is an effective element on the web page that display and is visible to the user while the page is loading. When a web page is taking a long time to load, the loader animation creates a visual representation to help users to understand that the page is loading and will be available soon. Create loader animation (with an image or text content) and display loader DIV until the web page has finished loading on the browser using HTML and CSS

Add to Calendar link allow to add an event to the calendar with prefilled info. The event details are prefilled based on the info given in the HTML link. Mostly, the Add to Calendar link is used in the email or web page to redirect users directly to the calendar. Build an HTML link to add events to Google, Outlook, Office 365, and Apple Mail calendar.

The spinner control is added to the HTML5 number input field to increase or decrease the input value. The arrows can be easily removed from the number field with CSS. Use ::-webkit-inner-spin-button and ::-webkit-outer-spin-button Pseudo-elements to hide arrows from number input field using CSS.

The placeholder displays a short hint of the expected value of an input field. It helps the user to know about the format of the input before enting a value. Using the placeholder attribute, you can add a placeholder text to HTML input field. The placeholder text color can be changed using the ::placeholder selector in CSS.

Placing one image over another image is very easy with CSS. You can easily position an image on top of another image using CSS. Use position, top and left Property in CSS to place an overlay image on the image using HTML and CSS.

It is important to take security seriously when you collecting data from the users. Form data validation is required before submitting to the database. You can implement the client-side form validation easily with HTML5 without using jQuery. Use type and pattern attribute in HTML input field to validate a phone number.