[HTML] Password Login Form HTML

Xin chào mọi người, bài viết này mình sẽ hướng dẫn cho mọi người một thủ thuật khá hay và lại đơn giản về HTML, việc nhập mật khẩu để truy cập trang hoặc CSDL của mọi người nhé.

Nhìn vào hỉnh ảnh trên mọi người cùng hiểu sơ bộ về cách thức hoạt động của khung mật khẩu rồi chứ, chỉ cần nhập mật khẩu vào là ra trang bạn cần xem.

Chúng ta bắt đầu nhé.

Bước 1. Thêm đoạn Javascript vào nới bạn muốn trong bài viết.

#   JQuery
#   JQuery AutoTab Magic

# Form Parent
form = $(".code_input")

# Form Inputs
formInputs = $(form).children "input"

# Valid Code
validCode = "1234"

#JQuery AutoTab to automatically move forward when maximum length of input is reached.
$(formInputs).autotab_magic()

# Returns the code which is inputted into each of the form inputs
inputCode = ->
  code = [] # Blank array (probably a better way to do this
  $(formInputs).each -> # Selects each form input object
    code.push $(this).val() # Pushes each form input value to the [code] array

  code.join "" # Returns the code array in string form (joined)


# Checks the code which is returned from inputCode()
validateCode = ->
  c = inputCode() # Runs inputCode() to have a code string to validate
  if c is validCode # Checks code against validCode variable
    $(form).removeClass("error").addClass "success" # Adds success class and removes error class from form
    $(".hint").fadeOut() # Hides the hint
    false # End of successful code input
  else if c.length is 4 # Checks if code is 4 digits long
    $(".hint").fadeIn() # Shows the hint
  else
    $(form).addClass("error").removeClass "success" # Adds error class, removes success class from form
    false # End of unsuccessful input


# Clears out all the inputs and sets the focus to the first one
clearInputs = ->
  $(formInputs).first().focus() # Set focus to first input
  $(formInputs).val "" # Sets input values to null
  $(form).removeClass() # Remove classes from form


# Initiates code validation if the key pressed isn't backspace or delete
$(formInputs).keyup -> # On keyup in any of the form inputs
  if event.keyCode is 8 or event.keyCode is 46 # Maps to the backspace and delete key
    clearInputs() # Clears the form
    false # End of backspace event
  else
    validateCode() # Run validation function


# Clears form when clicking any of the form inputs
$(formInputs).click ->
  clearInputs() # Clears form

Ở phần mình bôi 1234 đỏ là mật khẩu để vào trang. Và các bạn có thể sữ dụng nhiều chương trình mã hóa javascript trên mạng để ẩn đi mật khẩu đó nhé. Để tăng tính bảo mật.

Bước 2. Các bạn thêm đoạn CSS

@import compass

//  Google Web Font: Source Sans Pro

*
  box-sizing: border-box
  text-rendering: optimizeLegibility

body
  font-family: "Source Sans Pro", sans-serif
  text-align: center
  padding: 1em
  color: #ccc
  font-weight: 200

div
  width: 190px
  text-align: center
  margin: 0 auto
  position: absolute
  top: 50%
  left: 50%
  margin-left: -95px
  margin-top: -65px

h3
  font-weight: 100
  font-size: 28px
  color: #ccc
  line-height: 36px
  margin-bottom: 1em

form
  width: auto
  &.success input
    color: #8CE62C
    border-color: #8CE62C

input
  font-family: "Source Sans Pro", sans-serif
  font-weight: 200
  width: 40px
  height: 50px
  border: 1px solid #CCCCCC
  display: block
  float: left
  margin-right: 10px
  outline: 0
  font-size: 28px
  color: #ccc
  line-height: 40px
  text-align: center
  cursor: pointer
  &:last-child
    margin-right: 0
  &:hover
    color: #9B9B9B
  &:focus
    color: #0091FF
    border-color: #0091FF

.hint
  display: none

ul
  padding-top: 2em
  clear: both
  li
    list-style-type: none

strong
  color: #777
  font-weight: 200

Bước 3. Các bạn thêm đoạn code HTML vào nơi mà bạn muốn hiển thị khung mật khẩu.

%div
  %h3 enter code
  %form.code_input
    %input{autofocus: "", maxlength: "1", placeholder: "#", type: "password"}/
    %input{maxlength: "1", placeholder: "#", type: "password"}/
    %input{maxlength: "1", placeholder: "#", type: "password"}/
    %input{maxlength: "1", placeholder: "#", type: "password"}/
  %ul.hint
    %li
      Valid Code:
      %strong 1234
      

Như vậy là xong. Chúc mọi người thành công và có nhiều tính bảo mật hơn cho bài viết của các bạn nhé.

DEMO PASSWORD PAGE