Hướng dẫn code password html - mật khẩu mã html

Question

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo chức năng ẩn và hiển thị mật khẩu trong quá trình phát triển form bằng HTML, CSS và Javascript nhé!

Nội dung chính Show

Mã HTML của form đăng nhập
Qua bài hướng dẫn này các bạn sẽ biết cách sử dụng javascript để hiển thị và ẩn mật khẩu trong form đăng nhập hoặc đăng ký
Qua bài hướng dẫn này các bạn sẽ biết cách sử dụng javascript để hiển thị và ẩn mật khẩu trong form đăng nhập hoặc đăng ký
Code đầy đủ:
Bài viết này đã giúp ích cho bạn?

HTML


 
   
     
      Hiển Thị Và Ẩn Mật Khẩu

CSS

Bây giờ chúng ta sẽ trang trí cho form input password cho website nhé!

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap');
 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Roboto', sans-serif;
 }
 html,body{
   display: grid;
   height: 100%;
   place-items: center;
  background-color: #FBAB7E;
 background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
 }
 .container{
   position: relative;
   height: 55px;
   width: 320px;
   border-radius: 5px;
   box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
 }
 .container input{
   width: 100%;
   height: 100%;
   border: 1px solid #8e44ad;
   padding-left: 15px;
   font-size: 18px;
   outline: none;
   border-radius: 5px;
 }
 .container input::placeholder{
   font-size: 17px;
 }
 .container span{
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 20px;
   color: #8e44ad;
   cursor: pointer;
   display: none;
 }
 .container input:valid ~ span{
   display: block;
 }
 .container span i.hide-btn::before{
   content: "f070";
 }

Javascript

Bây giờ chúng ta sẽ đi vào tạo chức năng hiển thị và ẩn mật khẩu dành cho input element trong website nhé!

    const passField = document.querySelector("input");
       const showBtn = document.querySelector("span i");
       showBtn.onclick = (()=>{
         if(passField.type === "password"){
           passField.type = "text";
           showBtn.classList.add("hide-btn");
         }else{
           passField.type = "password";
           showBtn.classList.remove("hide-btn");
         }
       });

Và đây là hình ảnh kết quả của chúng ta nhé!

Còn dưới đây là dự án trên Codepen nhé!

See the Pen Ẩn Và Hiển Thị Mật Khẩu by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn tham khảo các html input password thì truy cập đường dẫn bên dưới nha.HTML Input Password
HTML Input Password

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách tạo chức năng Ẩn và hiển thị mật khẩu cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Qua bài hướng dẫn này các bạn sẽ biết cách sử dụng javascript để hiển thị và ẩn mật khẩu trong form đăng nhập hoặc đăng ký

Chào các bạn, hôm nay mình hướng dẫn tạo form đăng nhập vào trang web của mình bằng cách sử dụng javascript để hiển thị hoặc ẩn trường mật khẩu của người dùng. Hướng dẫn này khá đơn giản, vì chỉ là hiển thị khung đăng nhập cùng chức năng ẩn hoặc hiển thị mật khẩu thôi nhé. Nếu muốn các bạn có thể kết hợp các các code đăng nhập khác như: Mẫu code đăng nhập bằng PHP với kết nối PDO.

Mã HTML của form đăng nhập

Ví dụ


    Đăng nhập

Bài viết này đã giúp ích cho bạn?

Qua bài hướng dẫn này các bạn sẽ biết cách sử dụng javascript để hiển thị và ẩn mật khẩu trong form đăng nhập hoặc đăng ký

Ví dụ

@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
body {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M 0%2c276 C 57.6%2c235.6 172.8%2c99.4 288%2c74 C 403.2%2c48.6 460.8%2c147 576%2c149 C 691.2%2c151 748.8%2c84.4 864%2c84 C 979.2%2c83.6 1036.8%2c143 1152%2c147 C 1267.2%2c151 1382.4%2c112.6 1440%2c104L1440 560L0 560z' fill='%23184a7e'%3e%3c/path%3e%3cpath d='M 0%2c557 C 96%2c505 288%2c307.6 480%2c297 C 672%2c286.4 768%2c503.6 960%2c504 C 1152%2c504.4 1344%2c340 1440%2c299L1440 560L0 560z' fill='%232264ab'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-size: 100vw 100vh;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Open Sans", sans-serif;
}

form {
  backdrop-filter: saturate(120%) blur(20px);
  display: block;
  height: fit-content;
  max-width: 93%;
  width: 400px;
  border-radius: 12px;
  margin: auto 0;
  padding: 0 0 25px 0;
  border: 1px solid gray;
}
form div {
  padding: 20px 10px;
}
form #password {
  padding: 5px 35px 5px 5px;
  width: 190px;
}
form #showEye {
  display: block;
  fill: #fff;
  transition: all 0;
}
form #hideEye {
  display: none;
  fill: #fff;
  transition: all 0;
}
form input {
  outline: none;
  display: block;
  border: 1px solid transparent;
  margin: auto;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  padding: 5px;
  color: white;
  width: 220px;
  transition: all 0.2s ease-in-out;
}
form input:focus {
  background: white;
  color: black;
}
form input:focus::placeholder {
  color: gray;
}
form input::placeholder {
  color: white;
}
form input[type=submit] {
  color: white;
  background: rgba(255, 255, 255, 0.1);
  margin: 10px auto auto auto;
  cursor: pointer;
  width: 120px;
}
form input[type=submit]:hover {
  background: white;
  color: black;
}
form input:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}
form svg {
  width: 18px;
  height: 18px;
  cursor: pointer;
  float: right;
  margin-top: -23px;
  margin-right: 80px;
  z-index: 4;
  position: relative;
}
form h2 {
  font-size: 2rem;
  color: white;
  text-align: center;
  letter-spacing: 2px;
}

Bài viết này đã giúp ích cho bạn?

Qua bài hướng dẫn này các bạn sẽ biết cách sử dụng javascript để hiển thị và ẩn mật khẩu trong form đăng nhập hoặc đăng ký

Ví dụ

let password = document.getElementById('password');
let showEye = document.getElementById('showEye');
let hideEye = document.getElementById('hideEye');

function black(){
  showEye.style.fill = "#000000";
  hideEye.style.fill = "#000000";
}
function white(){
  showEye.style.fill = "#fff";
  hideEye.style.fill = "#fff";
}

function passwordShow(){
  password.type = 'text';
  showEye.style.display= "none";
  hideEye.style.display= "inline";
  password.focus();
}
function passwordHide(){
  password.type = 'password';
  showEye.style.display= "inline";
  hideEye.style.display= "none";
  password.focus();
}

Chào các bạn, hôm nay mình hướng dẫn tạo form đăng nhập vào trang web của mình bằng cách sử dụng javascript để hiển thị hoặc ẩn trường mật khẩu của người dùng. Hướng dẫn này khá đơn giản, vì chỉ là hiển thị khung đăng nhập cùng chức năng ẩn hoặc hiển thị mật khẩu thôi nhé. Nếu muốn các bạn có thể kết hợp các các code đăng nhập khác như: Mẫu code đăng nhập bằng PHP với kết nối PDO.

Code đầy đủ:

Ví dụ




    
    Đăng nhập
    


  
    Đăng nhập

Bài viết này đã giúp ích cho bạn?

programming html The submit HTML

Hướng dẫn code password html - mật khẩu mã html

HTML

CSS

Javascript

Tổng kết:

Mã HTML của form đăng nhập

Ví dụ

Đăng nhập

Qua bài hướng dẫn này các bạn sẽ biết cách sử dụng javascript để hiển thị và ẩn mật khẩu trong form đăng nhập hoặc đăng ký

Ví dụ

Qua bài hướng dẫn này các bạn sẽ biết cách sử dụng javascript để hiển thị và ẩn mật khẩu trong form đăng nhập hoặc đăng ký

Ví dụ

Code đầy đủ:

Ví dụ

Đăng nhập

Bài viết này đã giúp ích cho bạn?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội