p5.js radians() Function

Hide the Email Id in a form using HTML and JavaScript

Last Updated : 30 Sep, 2024

Hiding an email ID in a form using HTML and JavaScript involves obfuscating or masking the email address to enhance privacy or security. This can be achieved by partially hiding the email characters or storing the email in hidden fields until needed for processing.

Examples:

Input :[email protected] 
Output :robin*****@gmail.com

Input :[email protected]
Output :geeks*****@gmail.com

Approach :

Retrieve Email Input: The function test_str() retrieves the email entered by the user from the input field with id=”t1″.
Identify @ Position: The function uses indexOf(‘@’) to determine the position of the @ symbol within the email string.
Mask Email: The characters before @ are partially replaced with asterisks using the replace() method and repeat() for masking.
Display Result: The masked email is shown in the readonly field with id=”t2″, keeping the protected part hidden from view.

Example: In this example we are following the above-explained approach.

html

<!DOCTYPE html>
<html>

<head>
    <title>Hide the Email Id in a form using HTML and JavaScript</title>
    <script type="text/javascript">
        function test_str() {
            let str = document.getElementById("t1").value;
            let idx = str.indexOf('@');
            let res = str.replace(str.slice(5, idx), "*".repeat(5));
            document.getElementById("t2").value = res;
        }
    </script>
</head>

<body>
    <p>
        Email: <input type="text" 
                      placeholder="abc" 
                      id="t1" /><br />
        <input type="button" 
               value="Protect" 
               onclick="test_str()" /><br />
        Output: <input type="text" id="t2" readonly />
    </p>
</body>

</html>

Output:

Password-Protect

Hide the Email Id in a form using HTML and JavaScript Example Output

p5.js radians() Function

A

AnmolAgarwal

Improve

Article Tags :

Similar Reads

How to create a Popup Form using HTML CSS and JavaScript ?

To create a popup form using JavaScript, you can design a hidden overlay that becomes visible when triggered. We will use HTML for form elements, CSS for styling, and JavaScript to toggle the visibility of the overlay. This allows for a user-friendly and interactive way to display forms on your webp

Design a Survey Form using HTML CSS and JavaScript

In this article, we are going to implement a survey form using HTML, CSS, and JavaScript. In this form, we will get data about the interest of people in sports. In this implementation, the data will be stored in a CSV file after successful form validations. Preview of final output: Let us have a loo

How to Insert Email Address into Form using HTML5 ?

In this article, we will learn how to add and get an email address of a user as data of the form by adding an email input field. As we know that an email_id is a vital component of user data. Email address is used for the verification of the user. It is also used to make contact with the submitters

How to create a hidden input field in form using HTML ?

In this article, we will learn how to add a hidden input field into our form using HTML. A hidden control stores the data that is not visible to the user. It is used to send some information to the server which is not edited by the user. Normally, this hidden field usually contains the value which i

How to Add Edit and Delete Data in HTML Table using JavaScript?

To add edit and delete features in an HTML table with JavaScript, create buttons for each action. Use JavaScript functions to add new rows, edit existing data, and remove rows as needed. Approach to Add Edit and Delete DataThe addData() method obtains the data from the input fields and creates a fre

How to Hide an HTML Element by Class using JavaScript ?

To hide an HTML element by class using JavaScript, the CSS display property can be manipulated. Below are the approaches to hide an HTML element by class: Table of Content Using getElementsByClassName() selectorUsing querySelectorAll() selectorApproach 1: Using getElementsByClassName() selectorIn th

Create a Contact Form using HTML CSS & JavaScript

A contact form is a web form used to collect user information and messages, facilitating communication between visitors and site owners. It is essential for feedback, inquiries, and support. Create a contact form using HTML for structure, CSS for styling, and JavaScript for validation and submission

How to Add an ID to Element in JavaScript ?

In JavaScript, the ID is the unique identifier through which the elements can be identified and manipulated if required. We can add an ID to an element in JavaScript using various approaches that are explored in this article with practical demonstration. Below are the possible approaches: Table of C

How to Create a Modal Box using HTML CSS and JavaScript ?

We will learn how to create a modal dialog box using HTML, CSS, and JavaScript. A modal is a pop-up dialog that appears on top of the main content and requires the user to interact with it before returning to the main screen. Approach to Create Modal BoxHTML Structure:Create a button that opens the

Create a Guestbook using HTML CSS and JavaScript

This article will show how to create a GuestBook using HTML, CSS, and JavaScript that allows users to add their name, mobile number, room number, and address to the guestbook. We have written a code that generates a card with multiple input boxes and a submit button to store the guest's information