Ứng dụng javascript trong form login

Ứng dụng javascript trong form login hướng dẫn khóa nút đăng nhập khi chưa nhập user/pass ; Icon eye để ẩn hiện mật khẩu ; Focus username….

Mục lục

Tạo form đăng nhập

– Tạo 1 tag <form> bao quanh, tag form có method là post, id hoặc class tùy ý để định dạng css

– Trong tag form có 2 input để nhập username, password và 1 button

– Mỗi tag input có tag label để giải thích ý nghĩa cho người dùng biết

– Tag input phải có thuộc tính name (dùng khi submit lên server) và id (để định dạng css, lập trình js)

– Các tag input nên có thuộc tính placeholder để giải thích/hướng dẫn nhập

– Tag button cũng có thuộc tính name (dùng cho submit lên server) và id (để định dạng css, lập trình js)

<form id="frm1" method="post">
    <p>
      <label>Tên đăng nhập</label>
      <input type="text" class="txt" id="un" name="un" placeholder="Nhập 6-20 ký tự"/>
    </p>
    <p>
      <label>Mật khẩu</label>
      <input type="password" class="txt" id="mk" name="mk" placeholder="Mật khẩu" />
    </p>
    <p>
      <label></label>
      <button type="submit" name="btndangnhap" id="btndangnhap" value="nut">
          Đăng nhập
      </button>
    </p>
  </form>

Định dạng form đăng nhập

– Form: độ rộng, canh giữa, viền, padding

– Label: màu chữ, rộng , display

– Các tag input: gán cho các class  và định dạng: width, padding, viền

– Button: width, height

#frm1 { width: 600px; margin: auto; border: 2px solid darkslategrey; padding: 10px }
#frm1 label { color: darkslategray; width: 120px; display: inline-block; }
#frm1 .txt { width: 450px; padding: 8px; border: 1px solid lightcoral; }
#frm1 button { width: 120px; height: 40px; }

Cho con trỏ chớp sẵn trong username

Khi mới nạp trang, cho con trỏ chớp sẵn trong chỗ tên đăng nhập. Muốn thế thì thêm thuộc tính autofocus vào

<input type="text" class="txt" id="un" name="un" placeholder="Nhập 6-20 ký tự" autofocus/>

Tắt các gợi ý là các giá trị đã nhập trước đây

Trong trình duyệt, khi nhắp vào tên đăng nhập sẽ thấy các giá trị đã nhập trước đây. Muốn tắt các giá trị đó thì thêm thuộc tính autocomplete vào như sau: 

<input type="text" class="txt" id="un" name="un" placeholder="Nhập 6-20 ký tự" autocomplete="off" autofocus/>

Khóa nút submit khi chưa nhập tên đăng nhập và mật khẩu

– Khi mới nạp trang web, bạn khóa ngay nút đăng nhập

<script> 
   document.getElementById("btndangnhap").disabled=true;
</script>

– Gọi hàm daoNutDN() trong sự kiện onkeyup của username và passs

<input type="text" minlength="6" maxlength="20" onkeyup="daoNutDN()" class="txt" id="un" name="un" placeholder="Nhập 6-20 ký tự" autocomplete="off" autofocus />
<input type="password"  minlength="8" maxlength="30" onkeyup="daoNutDN()" class="txt" id="mk" name="mk" placeholder="Mật khẩu"/>

– Định nghĩa hàm daoNutDN()

<script>
function daoNutDN(){
    var u = document.getElementById("un").value;
    var p = document.getElementById("mk").value;
    if (u.length>0 && p.length>0) 
        document.getElementById("btndangnhap").disabled=false;
    else
        document.getElementById("btndangnhap").disabled=true;
}
</script>

Hiện mật khẩu trong field password

Bây giờ thì ứng dụng javascript trong form login để hiện ra icon con mắt (xem hình ở đầu trang), khi nhắp vào icon sẽ hiện ra mật khẩu. Thực hiện như sau:

– Nhúng thư viện font awesome

<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet">

– Chèn icon eye ở sau input password

 <i class="fas fa-eye"></i>

– Định dạng icon mới chèn

#frm1 i.fas{position: relative; left:-30px;cursor: pointer;}

– Gọi hàm daoTT() trong sự kiện click của icon mới chèn

<i class="fas fa-eye" onclick="daoTT()" ></i>

– Định nghĩa hàm daoTT()

<script>
function daoTT() {
    var mk = document.getElementById("mk");
    mk.type = (mk.type === "password")? "text":"password";
}  
</script>

Quay form đăng nhập

Bạn muốn có 1 form đăng nhập độc không , 🙂 , muốn thế thì thử nhé: 

#frm1 { transform: rotate(180deg);}

Mời em xem thêm các trang sau:

BÀI VIẾT LIÊN QUANXEM THÊM