In this tutorial we will see hide and show password using Apline Js .in this section we will use tailwind css for ui you can use any css framework if you want.
Why we use Alpine js for this because Alpine js is a lightweight library it bundle size is just 6.4 kb it download time is better thane jquery
Tools use
Tailwind CSS 2 CDN
Apline js 2.8 CDN
Tailwind CSS 2 CDN
in this section i use tailwind css, you can use any css Framework
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Apline js 2.8 CDN
use defer attribute , defer attribute specifies that the script is executed when the page has finished parsing. if you are put script in before then use defer .
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
Next, you need to create ui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Alpine js hide show Password Example </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
</head>
<body>
<div class="flex flex-col items-center justify-center bg-gray-300 h-screen">
<div class="flex flex-col bg-white px-4 py-8 l w-full max-w-md ">
<div class="mt-10">
<form method="POST" action="">
<div class="relative w-full mb-3">
<label for="email">Email</label>
<input type="email" name="email" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Email" /> </div>
<div class="relative w-full mb-3">
<label for="password">Password</label>
<input type="password" name="password" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Password" />
<div class=" absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 ">
<p class=" mt-5">Show</p>
</div>
</div>
<div class=" text-center mt-6 ">
<button type="submit" class="p-3 rounded-lg bg-purple-600 outline-none text-white shadow w-32 justify-center
focus:bg-purple-700 hover:bg-purple-500 ">Login</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Now, you need to put div x-data declares a new component scope. It tells the framework to initialize a new component with the data object.
define x-data="{ show: true }" next, you need to bind input type using x-bind or : (:type="show ? 'password' : 'text'") then create
click event @click="show=! show" and bind text using x-text=" show ? 'Show' : 'Hide' "
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Alpine js hide show Password Example </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
</head>
<body>
<div class="flex flex-col items-center justify-center bg-gray-300 h-screen">
<div class="flex flex-col bg-white px-4 py-8 l w-full max-w-md ">
<div class="mt-10">
<form method="POST" action="">
<div class="relative w-full mb-3">
<label for="email">Email</label>
<input type="email" name="email" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Email" /> </div>
<div class="relative w-full mb-3" x-data="{ show: true }">
<label for="password">Password</label>
<input :type="show ? 'password' : 'text'" name="password" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Password" />
<div class=" absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 ">
<p class=" mt-5" @click="show=! show" x-text=" show ? 'Show' : 'Hide' "></p>
</div>
</div>
<div class=" text-center mt-6 ">
<button type=" submit " class=" p-3 rounded-lg bg-purple-600 outline-none text-white shadow w-32 justify-center
focus:bg-purple-700 hover:bg-purple-500 ">Login</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
visit my website larainfo.com
Read also
3 way to install bootstrap 5 in laravel 8
Laravel php artisan inspire command
Laravel clear cache without using artisan command
Top comments (0)