HTML & CSS Archives - CodexWorld https://www.codexworld.com/how-to-category/html-css/ Web & Mobile App Development Company Fri, 05 Sep 2025 07:46:31 +0000 en-US hourly 1 https://www.codexworld.com/wp-content/uploads/2020/04/favicon.ico HTML & CSS Archives - CodexWorld https://www.codexworld.com/how-to-category/html-css/ 32 32 91409221 How to avoid javascript:void(0) and use an alternative in empty href links? https://www.codexworld.com/how-to/avoid-javascript-void-0-and-use-an-alternative-in-empty-href-links/ https://www.codexworld.com/how-to/avoid-javascript-void-0-and-use-an-alternative-in-empty-href-links/#respond Wed, 25 Oct 2023 05:56:58 +0000 https://www.codexworld.com/?post_type=how-to-guides&p=5515 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.

The post How to avoid javascript:void(0) and use an alternative in empty href links? appeared first on CodexWorld.

]]> https://www.codexworld.com/how-to/avoid-javascript-void-0-and-use-an-alternative-in-empty-href-links/feed/ 0 5515 How to Turn Off Autocomplete for Input Fields in HTML Form https://www.codexworld.com/how-to/turn-off-autocomplete-for-input-fields-in-html-form/ https://www.codexworld.com/how-to/turn-off-autocomplete-for-input-fields-in-html-form/#respond Tue, 04 Jul 2023 15:00:38 +0000 https://www.codexworld.com/?post_type=how-to-guides&p=5381 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.

The post How to Turn Off Autocomplete for Input Fields in HTML Form appeared first on CodexWorld.

]]> https://www.codexworld.com/how-to/turn-off-autocomplete-for-input-fields-in-html-form/feed/ 0 5381 How to Allow only Alphabets in HTML Text Input https://www.codexworld.com/how-to/allow-only-alphabets-in-html-text-input/ https://www.codexworld.com/how-to/allow-only-alphabets-in-html-text-input/#respond Thu, 22 Jun 2023 12:08:35 +0000 https://www.codexworld.com/?post_type=how-to-guides&p=5375 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.

The post How to Allow only Alphabets in HTML Text Input appeared first on CodexWorld.

]]> https://www.codexworld.com/how-to/allow-only-alphabets-in-html-text-input/feed/ 0 5375 How to Create and Display Loader Until the Page has Finished Loading using HTML, CSS, and JS https://www.codexworld.com/how-to/create-and-display-loader-until-the-page-has-finished-loading-using-html-css-js/ https://www.codexworld.com/how-to/create-and-display-loader-until-the-page-has-finished-loading-using-html-css-js/#comments Wed, 15 Mar 2023 12:21:26 +0000 https://www.codexworld.com/?post_type=how-to-guides&p=5291 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

The post How to Create and Display Loader Until the Page has Finished Loading using HTML, CSS, and JS appeared first on CodexWorld.

]]> https://www.codexworld.com/how-to/create-and-display-loader-until-the-page-has-finished-loading-using-html-css-js/feed/ 1 5291 How to Create HTML Link to Add Event to Calendar (Google, Outlook, Office 365, and Apple Mail) https://www.codexworld.com/how-to/create-html-link-to-add-event-to-calendar-google-outlook-office-365-apple-mail/ https://www.codexworld.com/how-to/create-html-link-to-add-event-to-calendar-google-outlook-office-365-apple-mail/#comments Thu, 03 Mar 2022 07:16:37 +0000 https://www.codexworld.com/?post_type=how-to-guides&p=4872 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 post How to Create HTML Link to Add Event to Calendar (Google, Outlook, Office 365, and Apple Mail) appeared first on CodexWorld.

]]> https://www.codexworld.com/how-to/create-html-link-to-add-event-to-calendar-google-outlook-office-365-apple-mail/feed/ 4 4872 How to Remove Arrows (spinner) from Number Input using CSS https://www.codexworld.com/how-to/remove-arrows-spinner-from-number-input-css/ https://www.codexworld.com/how-to/remove-arrows-spinner-from-number-input-css/#comments Tue, 13 Aug 2019 07:18:58 +0000 https://www.codexworld.com/?post_type=how-to-guides&p=4111 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 post How to Remove Arrows (spinner) from Number Input using CSS appeared first on CodexWorld.

]]> https://www.codexworld.com/how-to/remove-arrows-spinner-from-number-input-css/feed/ 2 4111 How to Change Input Placeholder Color using CSS https://www.codexworld.com/how-to/change-input-placeholder-color-using-css/ https://www.codexworld.com/how-to/change-input-placeholder-color-using-css/#respond Mon, 25 Feb 2019 10:36:09 +0000 https://www.codexworld.com/?post_type=how-to-guides&p=3880 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.

The post How to Change Input Placeholder Color using CSS appeared first on CodexWorld.

]]> https://www.codexworld.com/how-to/change-input-placeholder-color-using-css/feed/ 0 3880 How to Position Image Over Image using CSS https://www.codexworld.com/how-to/position-place-image-over-image-css/ https://www.codexworld.com/how-to/position-place-image-over-image-css/#comments Wed, 11 Apr 2018 09:07:44 +0000 https://www.codexworld.com/?post_type=how-to-guides&p=3181 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.

The post How to Position Image Over Image using CSS appeared first on CodexWorld.

]]> https://www.codexworld.com/how-to/position-place-image-over-image-css/feed/ 2 3181 Phone Number Validation with HTML5 https://www.codexworld.com/how-to/phone-number-validation-html5/ https://www.codexworld.com/how-to/phone-number-validation-html5/#comments Fri, 18 Aug 2017 09:43:02 +0000 https://www.codexworld.com/?post_type=how-to-guides&p=2705 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.

The post Phone Number Validation with HTML5 appeared first on CodexWorld.

]]> https://www.codexworld.com/how-to/phone-number-validation-html5/feed/ 3 2705 How to Make Phone Number Clickable on Mobile Devices https://www.codexworld.com/how-to/make-phone-number-clickable-hyperlink-mobile-devices/ https://www.codexworld.com/how-to/make-phone-number-clickable-hyperlink-mobile-devices/#comments Sat, 05 Nov 2016 05:49:10 +0000 https://www.codexworld.com/?post_type=how-to-guides&p=1926 Most of the business puts their contact number on their website. The clickable phone number is very useful when the user browsing the website from a mobile device. Click To Call link helps to dial the phone number directly from the website by one click.

The post How to Make Phone Number Clickable on Mobile Devices appeared first on CodexWorld.

]]> https://www.codexworld.com/how-to/make-phone-number-clickable-hyperlink-mobile-devices/feed/ 2 1926