Làm cách nào để tạo mật khẩu cho html?

Question

Biểu mẫu HTML để đăng nhập thường chứa trường mật khẩu trên trang web. Mật khẩu là thông tin rất nhạy cảm và chúng phải được nhập theo cách sao cho khi người dùng nhập mật khẩu của họ vào trường nhập, những người xung quanh họ không thể nhìn thấy mật khẩu đó

Sử dụng trường văn bản cho mật khẩu không phải là ý tưởng hay

Thuộc tính HTML Password: 1

HTML cung cấp một cách để ẩn văn bản mật khẩu trong trường nhập khi người dùng đang nhập nó. Sử dụng

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

1 để xác định trường nhập cho mật khẩu trong thẻ

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

3

Mật khẩu đã nhập thực tế được thay thế bằng một số ký hiệu như dấu hoa thị ("*") hoặc dấu chấm ("•") nên không thể đọc được

Ví dụ. Sử dụng type="password" cho trường nhập liệu

Ở đây chúng tôi đã tạo một trang đăng nhập nơi chúng tôi có hai trường nhập và nút gửi. Trường nhập đầu tiên có

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

4 để nhập tên người dùng và trường nhập thứ hai là

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

1 để nhập mật khẩu

Các thuộc tính được sử dụng cho mật khẩu

Có một số thuộc tính được sử dụng với các trường nhập mật khẩu, chúng là

maxlength - Nó được sử dụng để đặt độ dài tối đa của mật khẩu
minlength - Nó được sử dụng để đặt độ dài tối thiểu của mật khẩu
mẫu - Mật khẩu phải chứa mẫu được chỉ định có thể được xác thực
giữ chỗ - Một giá trị sẽ được hiển thị trong trường đầu vào khi nó trống

Ví dụ. Đặt yêu cầu về độ dài cho trường Mật khẩu

Ở đây trong ví dụ này, chúng tôi sẽ sử dụng các thuộc tính

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

6 và

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

7 để đặt độ dài cần thiết cho mật khẩu





HTML


     Login to the system 
	
		
			Username:
			
		
		
			Password

đầu ra

Đây là đầu ra của chương trình trên. Khi chúng ta đặt thuộc tính

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

7 và

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

6, lúc này người dùng sẽ bắt buộc nhập một đoạn mật khẩu có nhiều hơn 8 ký tự và ít hơn 16 ký tự

Phần kết luận

Điều quan trọng là phải thêm trường thuộc tính

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

1 vào trường đầu vào vì đây là cách đúng đắn để thực hiện. Chúng ta có thể sử dụng các thuộc tính để đặt độ dài của mật khẩu. Để thực thi mật khẩu mạnh, chúng ta có thể sử dụng thuộc tính

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

13 trong trường mật khẩu

Chúng tôi sử dụng thẻ bằng cách gán mật khẩu cho thuộc tính loại, để nhập mật khẩu ở dạng HTML. Nó ẩn ký tự ngay khi ta nhập ký tự của mật khẩu đã đặt. Đây cũng là kiểu nhập văn bản một dòng

cú pháp

   Male

ví dụ 1

Một ví dụ để triển khai cách nhập mật khẩu trong HTML như sau -

Branch

Enter password
Re-enter password

ví dụ 2

Một ví dụ khác để lấy đầu vào làm mật khẩu được đưa ra bên dưới. Bạn có thể thử chạy đoạn mã sau -

HTML Forms

Add your details:

Student Username:

Password:

Phần tử được trình bày dưới dạng điều khiển trình soạn thảo văn bản thuần túy một dòng trong đó văn bản bị che khuất nên không thể đọc được, thường bằng cách thay thế từng ký tự bằng ký hiệu chẳng hạn như dấu hoa thị ("*") hoặc dấu chấm ("•" . Ký tự này sẽ thay đổi tùy thuộc vào tác nhân người dùng và hệ điều hành

Thử nó

Hành vi chính xác của quá trình nhập có thể khác nhau giữa các trình duyệt. Một số trình duyệt hiển thị ký tự đã nhập trong giây lát trước khi làm mờ nó, trong khi những trình duyệt khác cho phép người dùng bật và tắt hiển thị văn bản thuần túy. Cả hai phương pháp đều giúp người dùng kiểm tra xem họ đã nhập mật khẩu dự định hay chưa, điều này có thể đặc biệt khó khăn trên thiết bị di động

Ghi chú. Mọi biểu mẫu liên quan đến thông tin nhạy cảm như mật khẩu (chẳng hạn như biểu mẫu đăng nhập) phải được cung cấp qua HTTPS. Nhiều trình duyệt hiện triển khai cơ chế cảnh báo đối với các hình thức đăng nhập không an toàn;

Giá trị

Thuộc tính

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

2 chứa một chuỗi có giá trị là nội dung hiện tại của điều khiển chỉnh sửa văn bản được sử dụng để nhập mật khẩu. Nếu người dùng chưa nhập bất cứ thứ gì, giá trị này là một chuỗi rỗng (

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

3). Nếu thuộc tính

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

4 được chỉ định, thì hộp chỉnh sửa mật khẩu phải chứa một giá trị khác với chuỗi trống để hợp lệ

Nếu thuộc tính

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

5 được chỉ định, nội dung của điều khiển

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

1 chỉ được coi là hợp lệ nếu giá trị vượt qua xác thực;

Ghi chú. Các ký tự xuống dòng (U+000A) và ký tự xuống dòng (U+000D) không được phép trong giá trị

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

1. Khi đặt giá trị của điều khiển mật khẩu, các ký tự xuống dòng và ký tự xuống dòng bị loại bỏ khỏi giá trị

thuộc tính bổ sung

Ngoài các thuộc tính hoạt động trên tất cả các phần tử

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

0 bất kể loại của chúng, đầu vào trường mật khẩu hỗ trợ các thuộc tính sau

độ dài tối đa

Số ký tự tối đa (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào trường mật khẩu. Đây phải là một giá trị số nguyên 0 hoặc cao hơn. Nếu không có

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

9 nào được chỉ định hoặc giá trị không hợp lệ được chỉ định, thì trường mật khẩu không có độ dài tối đa. Giá trị này cũng phải lớn hơn hoặc bằng giá trị của

   Male

20

Đầu vào sẽ không xác thực được ràng buộc nếu độ dài của văn bản được nhập vào trường này dài hơn

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

9 đơn vị mã UTF-16

Độ dài nhỏ nhất

Số ký tự tối thiểu (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào trường nhập mật khẩu. Đây phải là một giá trị số nguyên không âm nhỏ hơn hoặc bằng giá trị được chỉ định bởi

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

9. Nếu không có

   Male

20 nào được chỉ định hoặc giá trị không hợp lệ được chỉ định, thì mật khẩu nhập vào không có độ dài tối thiểu

Dữ liệu nhập vào sẽ không xác thực được ràng buộc nếu độ dài của văn bản được nhập vào trường nhỏ hơn

   Male

20 đơn vị mã UTF-16

mẫu

Thuộc tính

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

5, khi được chỉ định, là một biểu thức chính quy mà giá trị đầu vào

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

2 phải khớp để giá trị vượt qua xác thực ràng buộc. Nó phải là một biểu thức chính quy JavaScript hợp lệ, như được sử dụng bởi loại

   Male

27 và như được ghi lại trong hướng dẫn của chúng tôi về các biểu thức chính quy; . Không được chỉ định dấu gạch chéo lên xung quanh văn bản mẫu

Nếu mẫu đã chỉ định không được chỉ định hoặc không hợp lệ, thì không có biểu thức chính quy nào được áp dụng và thuộc tính này bị bỏ qua hoàn toàn

Ghi chú. Sử dụng thuộc tính

   Male

29 để chỉ định văn bản mà hầu hết các trình duyệt sẽ hiển thị dưới dạng chú giải công cụ để giải thích những yêu cầu để khớp với mẫu. Bạn cũng nên bao gồm văn bản giải thích khác gần đó

Việc sử dụng một mẫu được đặc biệt khuyến nghị cho các lần nhập mật khẩu, để giúp đảm bảo rằng các mật khẩu hợp lệ sử dụng nhiều loại ký tự được người dùng của bạn chọn và sử dụng. Với mẫu, bạn có thể bắt buộc quy tắc viết hoa chữ thường, yêu cầu sử dụng một số chữ số và/hoặc ký tự dấu chấm câu, v.v. Xem phần Xác thực để biết chi tiết và ví dụ

giữ chỗ

Thuộc tính

Branch

Enter password
Re-enter password

20 là một chuỗi cung cấp gợi ý ngắn gọn cho người dùng về loại thông tin được mong đợi trong trường. Nó phải là một từ hoặc cụm từ ngắn thể hiện loại dữ liệu dự kiến, chứ không phải là một thông báo giải thích. Văn bản không được bao gồm dấu xuống dòng hoặc xuống dòng

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần hiển thị trình giữ chỗ theo hướng ngược lại, bạn có thể sử dụng các ký tự định dạng thuật toán hai chiều Unicode để ghi đè hướng trong trình giữ chỗ;

Note: Avoid using the

Branch

Enter password
Re-enter password

20 attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels and placeholders in : The Input (Form Input) element for more information.

chỉ đọc

Thuộc tính Boolean, nếu có, nghĩa là người dùng không thể chỉnh sửa trường này. Tuy nhiên,

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

2 của nó vẫn có thể được thay đổi từ mã JavaScript trực tiếp đặt giá trị của thuộc tính

Branch

Enter password
Re-enter password

23

Ghi chú. Vì trường chỉ đọc không thể có giá trị, nên

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

4 không có bất kỳ ảnh hưởng nào đối với đầu vào với thuộc tính

Branch

Enter password
Re-enter password

25 cũng được chỉ định

kích thước

Thuộc tính

Branch

Enter password
Re-enter password

26 là một giá trị số cho biết độ rộng của trường nhập phải là bao nhiêu ký tự. Giá trị phải là một số lớn hơn 0 và giá trị mặc định là 20. Vì độ rộng ký tự khác nhau, điều này có thể chính xác hoặc không chính xác và không nên dựa vào đó;

Điều này không đặt giới hạn về số lượng ký tự mà người dùng có thể nhập vào trường. Nó chỉ xác định khoảng bao nhiêu có thể được nhìn thấy tại một thời điểm. Để đặt giới hạn trên cho độ dài của dữ liệu đầu vào, hãy sử dụng thuộc tính

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

9

Sử dụng đầu vào mật khẩu

Hộp nhập mật khẩu thường hoạt động giống như các hộp nhập văn bản khác;

Nhập mật khẩu đơn giản

Ở đây chúng ta thấy đầu vào mật khẩu cơ bản nhất, với nhãn được thiết lập bằng phần tử

Branch

Enter password
Re-enter password

29

HTML Forms

Add your details:

Student Username:

Password:

2

Cho phép tự động hoàn thành

Để cho phép trình quản lý mật khẩu của người dùng tự động nhập mật khẩu, hãy chỉ định thuộc tính

HTML Forms

Add your details:

Student Username:

Password:

30. Đối với mật khẩu, đây thường phải là một trong những điều sau đây

HTML Forms

Add your details:

Student Username:

Password:

31

Cho phép trình duyệt hoặc trình quản lý mật khẩu tự động điền vào trường mật khẩu. Đây không phải là thông tin như sử dụng một trong hai

HTML Forms

Add your details:

Student Username:

Password:

32 hoặc

HTML Forms

Add your details:

Student Username:

Password:

33

HTML Forms

Add your details:

Student Username:

Password:

34

Không cho phép trình duyệt hoặc trình quản lý mật khẩu tự động điền vào trường mật khẩu. Lưu ý rằng một số phần mềm bỏ qua giá trị này vì giá trị này thường gây hại cho khả năng duy trì các hoạt động mật khẩu an toàn của người dùng

HTML Forms

Add your details:

Student Username:

Password:

32

Cho phép trình duyệt hoặc trình quản lý mật khẩu nhập mật khẩu hiện tại cho trang web. Điều này cung cấp nhiều thông tin hơn so với

HTML Forms

Add your details:

Student Username:

Password:

31, vì nó cho phép trình duyệt hoặc trình quản lý mật khẩu tự động nhập mật khẩu hiện đã biết cho trang web vào trường, nhưng không đề xuất mật khẩu mới

HTML Forms

Add your details:

Student Username:

Password:

33

Cho phép trình duyệt hoặc trình quản lý mật khẩu tự động nhập mật khẩu mới cho trang web; . Mật khẩu mới có thể được tạo theo nhiều cách khác nhau, tùy thuộc vào trình quản lý mật khẩu đang sử dụng. Nó có thể điền vào một mật khẩu được đề xuất mới hoặc nó có thể hiển thị cho người dùng một giao diện để tạo một mật khẩu.

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

Đặt mật khẩu bắt buộc

Để thông báo cho trình duyệt của người dùng rằng trường mật khẩu phải có giá trị hợp lệ trước khi có thể gửi biểu mẫu, hãy chỉ định thuộc tính Boolean

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

4

   Male

2

Chỉ định một chế độ đầu vào

Nếu các quy tắc cú pháp mật khẩu được đề xuất (hoặc bắt buộc) của bạn sẽ được hưởng lợi từ giao diện nhập văn bản thay thế so với bàn phím tiêu chuẩn, bạn có thể sử dụng thuộc tính

HTML Forms

Add your details:

Student Username:

Password:

39 để yêu cầu một mật khẩu cụ thể. Trường hợp sử dụng rõ ràng nhất cho điều này là nếu mật khẩu bắt buộc phải ở dạng số (chẳng hạn như mã PIN). Ví dụ: các thiết bị di động có bàn phím ảo có thể chọn chuyển sang bố cục bàn phím số thay vì bàn phím đầy đủ để giúp nhập mật khẩu dễ dàng hơn. Nếu mã PIN được sử dụng một lần, hãy đặt thuộc tính

HTML Forms

Add your details:

Student Username:

Password:

30 thành

HTML Forms

Add your details:

Student Username:

Password:

34 hoặc

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

72 để gợi ý rằng nó không được lưu

Branch

Enter password
Re-enter password

2

Đặt yêu cầu về độ dài

Như thường lệ, bạn có thể sử dụng các thuộc tính

   Male

20 và

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

9 để thiết lập độ dài tối thiểu và tối đa có thể chấp nhận được cho mật khẩu. Ví dụ này mở rộng trên ví dụ trước bằng cách chỉ định rằng mã PIN của người dùng phải có ít nhất bốn và không quá tám chữ số. Thuộc tính

Branch

Enter password
Re-enter password

26 được sử dụng để đảm bảo rằng điều khiển nhập mật khẩu có độ rộng tám ký tự

HTML Forms

Add your details:

Student Username:

Password:

3

Chọn văn bản

Cũng như các điều khiển nhập văn bản khác, bạn có thể sử dụng phương pháp

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

76 để chọn tất cả văn bản trong trường mật khẩu

HTML

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

7

JavaScript

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

5

Kết quả

Bạn cũng có thể sử dụng

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

77 và

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

78 để lấy (hoặc đặt) phạm vi ký tự trong điều khiển hiện đang được chọn và

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

79 để biết lựa chọn theo hướng nào (hoặc sẽ được mở rộng trong, tùy thuộc vào nền tảng của bạn; xem tài liệu hướng dẫn của nó để biết . Tuy nhiên, do văn bản bị che khuất nên tính hữu dụng của chúng có phần hạn chế

Thẩm định

Nếu ứng dụng của bạn có các hạn chế về bộ ký tự hoặc bất kỳ yêu cầu nào khác đối với nội dung thực tế của mật khẩu đã nhập, bạn có thể sử dụng thuộc tính

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

5 để thiết lập một biểu thức chính quy sẽ được sử dụng để tự động đảm bảo rằng mật khẩu của bạn đáp ứng các yêu cầu đó

Trong ví dụ này, chỉ những giá trị bao gồm ít nhất bốn và không quá tám chữ số thập lục phân mới hợp lệ

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

0

ví dụ

Yêu cầu số An sinh xã hội

Ví dụ này chỉ chấp nhận đầu vào phù hợp với định dạng cho Số an sinh xã hội hợp lệ của Hoa Kỳ. Những số này, được sử dụng cho mục đích nhận dạng và thuế ở Hoa Kỳ, có dạng "123-45-6789". Các loại quy tắc cho những giá trị nào được phép trong mỗi nhóm cũng tồn tại

HTML

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

1

Điều này sử dụng một

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

5 giới hạn giá trị đã nhập thành các chuỗi đại diện cho số An sinh xã hội hợp pháp. Rõ ràng, biểu thức chính quy này không đảm bảo số SSN hợp lệ (vì chúng tôi không có quyền truy cập vào cơ sở dữ liệu của Cơ quan An sinh Xã hội), nhưng nó đảm bảo số có thể là một; . Ngoài ra, nó cho phép ba nhóm chữ số được phân tách bằng dấu cách, dấu gạch ngang ("-") hoặc không có gì

HTML Forms

Add your details:

Student Username:

Password:

39 được đặt thành

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

53 để khuyến khích các thiết bị có bàn phím ảo chuyển sang bố cục bàn phím số để nhập dễ dàng hơn. Các thuộc tính

   Male

20 và

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

9 được đặt tương ứng là 9 và 12 để yêu cầu giá trị đó phải có ít nhất chín và không quá 12 ký tự (các thuộc tính trước không có các ký tự phân tách giữa các nhóm chữ số và các ký tự sau với chúng). Thuộc tính

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

4 được sử dụng để chỉ ra rằng điều khiển này phải có giá trị. Cuối cùng,

HTML Forms

Add your details:

Student Username:

Password:

30 được đặt thành

HTML Forms

Add your details:

Student Username:

Password:

34 để tránh các trình quản lý mật khẩu và các tính năng khôi phục phiên cố gắng đặt giá trị của nó, vì đây hoàn toàn không phải là mật khẩu

JavaScript

Đây chỉ là một số mã đơn giản để hiển thị SSN đã nhập trên màn hình để bạn có thể nhìn thấy nó. Rõ ràng điều này đánh bại mục đích của trường mật khẩu, nhưng nó hữu ích để thử nghiệm với

<label for="userPassword">Password:label>
<input id="userPassword" type="password" autocomplete="current-password" />

5

Làm cách nào để tạo mật khẩu bằng HTML?

The xác định trường mật khẩu (các ký tự được che dấu).

Làm cách nào để tạo mật khẩu và xác nhận mật khẩu trong HTML?

Xác nhận mật khẩu bằng HTML5

Làm cách nào để khóa trang HTML bằng mật khẩu?

Tạo một tệp văn bản mới có tên. tập tin htpasswd,. htaccess phải được lưu trữ trong thư mục bạn muốn bảo vệ bằng mật khẩu. Ví dụ: nếu bạn muốn bảo vệ https. //www. wikihow. com/test bằng mật khẩu, đặt. htaccess trong thư mục con /test/ (e. g. , /www/trang web/www. wikihow. com/kiểm tra/

programming html

Làm cách nào để tạo mật khẩu cho html?

Thuộc tính HTML Password: 1

Ví dụ. Sử dụng type="password" cho trường nhập liệu

Các thuộc tính được sử dụng cho mật khẩu

Ví dụ. Đặt yêu cầu về độ dài cho trường Mật khẩu

Login to the system

đầu ra

Phần kết luận

cú pháp

ví dụ 1

ví dụ 2

Thử nó

Giá trị

thuộc tính bổ sung

độ dài tối đa

Độ dài nhỏ nhất

mẫu

giữ chỗ

chỉ đọc

kích thước

Sử dụng đầu vào mật khẩu

Nhập mật khẩu đơn giản

Cho phép tự động hoàn thành

Đặt mật khẩu bắt buộc

Chỉ định một chế độ đầu vào

Đặt yêu cầu về độ dài

Chọn văn bản

HTML

JavaScript

Kết quả

Thẩm định

ví dụ

Yêu cầu số An sinh xã hội

HTML

JavaScript

Làm cách nào để tạo mật khẩu bằng HTML?

Làm cách nào để tạo mật khẩu và xác nhận mật khẩu trong HTML?

Làm cách nào để khóa trang HTML bằng mật khẩu?

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