Hướng dẫn javascript form login - đăng nhập biểu mẫu javascript

Ứ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….

1.  Tạo form đăng nhập

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

    

      Tên đăng nhập
      
    
    

      Mật khẩu
      
    
    

      
      
          Đăng nhập
      
    
  

2.  Đị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; }

3. 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àoautofocus vào

autofocus/>

4. 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:

autocomplete="off" autofocus/>

3.  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

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

onkeyup="daoNutDN()" class="txt" id="un" name="un" placeholder="Nhập 6-20 ký tự" autocomplete="off" autofocus />

onkeyup="daoNutDN()" class="txt" id="mk" name="mk" placeholder="Mật khẩu"/>

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

4.  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

– Chèn icon eye ở sau input password

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

#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; }

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

#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; }

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

#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; }

5.  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 { 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; }