Loại=số HTML

Nghĩ rằng mẫu web đã có số của bạn?

Jared Toporek

[Biên tập. Ghi chú. Trong khi chúng tôi dành thời gian để nghỉ ngơi trong những ngày lễ và chuẩn bị cho năm tới, chúng tôi sẽ xuất bản lại mười bài đăng hàng đầu của chúng tôi trong năm. Hãy thưởng thức tác phẩm yêu thích của chúng tôi trong năm nay và chúng tôi sẽ gặp lại bạn vào năm 2023. ]

Tôi đã viết mã ít nhất 15 năm. Mặc dù tôi đã sử dụng rất nhiều công nghệ và xây dựng rất nhiều thứ trong nhiều năm, nhưng điều tôi làm được nhiều nhất là giao diện người dùng, tôi. e. HTML, CSS và JavaScript. Và trong tất cả những thứ tôi đã xây dựng ở giao diện người dùng, thứ mà tôi đã xây dựng thường xuyên nhất là các biểu mẫu.  

Tôi sẽ không giả vờ là chuyên gia về tất cả những thứ liên quan đến biểu mẫu. Tuy nhiên tôi sẽ nói điều này. trong số tất cả các yêu cầu khó, độc đáo và khác thường mà tôi được yêu cầu thực hiện trong 15 năm qua, hầu hết các nhiệm vụ đó đều xoay quanh việc xây dựng các biểu mẫu. Mỗi người đưa ra một thách thức đòi hỏi một số loại giải pháp bên ngoài hoặc không theo tiêu chuẩn. Tôi đã học được rất nhiều cách để vượt qua những thử thách đó. bạn nên làm gì và quan trọng hơn là bạn không nên làm gì khi cố gắng đối mặt với những thử thách đó

Trong tất cả những điều mà tôi đã học được về những điều không nên làm, một trong những lời khuyên dễ nhất và tốt nhất mà tôi có thể chia sẻ là điều này. trừ khi trường hợp sử dụng đơn giản, bạn nên tránh sử dụng đầu vào số

Tôi đã thấy rất nhiều biểu mẫu nên tôi cảm thấy bắt buộc phải xây dựng trình tạo biểu mẫu của riêng mình để có thể xử lý ít nhất một số yêu cầu khó khăn hơn mà không gặp rắc rối khi viết mã từ đầu mỗi lần. Keenforms là trình tạo biểu mẫu kéo và thả với công cụ quy tắc không cần mã. Nó giúp tạo chức năng động và có điều kiện dễ dàng hơn mà không cần phải viết mã từ đầu

Gần đây, tôi nhận được một số phản hồi về Keenforms và lời chỉ trích mà tôi nghe nhiều nhất là việc Keenforms không sử dụng . * Chúng tôi có một đầu vào được gắn nhãn là một số, nhưng khi bạn thêm nó vào biểu mẫu của mình, nó thực sự hiển thị là

* Xin lưu ý rằng Keenforms thực sự sử dụng đầu vào số bên trong ứng dụng của chúng tôi. Tuy nhiên, chúng tôi chỉ sử dụng nó trong bảng điều khiển và chỉ cho các đầu vào đơn giản nhất

Đám đông đầu vào số ủng hộ có mối quan tâm chính đáng, chủ yếu về khả năng tiếp cận. Đầu vào số có các nút tăng/giảm riêng. Nó có xác thực tích hợp để xác minh đó là một số. Một số thiết bị di động sẽ hiển thị bàn phím số thay vì bàn phím đầy đủ, giúp nhập dữ liệu dễ dàng hơn. Sử dụng đầu vào số cũng giúp trình đọc màn hình dễ dàng hơn

Cũng có một số khiếu nại hợp lệ về việc các nhà phát triển lạm dụng JavaScript (có lỗi. ). Tôi hiểu ác cảm của một số người đối với JavaScript. Tuy nhiên, những biểu mẫu đã nói ở trên mà tôi đã xây dựng với những yêu cầu đầy thách thức đó đều yêu cầu sử dụng nhiều JavaScript. Đó là cách duy nhất để cung cấp phản hồi tức thời theo thời gian thực khi tạo logic điều kiện động. Keenforms phụ thuộc rất nhiều vào JavaScript và cụ thể là React.  

Có rất nhiều nhược điểm liên quan đến đầu vào số khi xử lý logic phức tạp và có điều kiện, phần lớn liên quan đến các vấn đề về JavaScript, trong vài năm qua tôi đã quyết định tránh sử dụng nó

Cần lưu ý rằng tôi không đơn độc trong trại đầu vào chống số. Chính phủ Vương quốc Anh đã đăng bài viết nêu chi tiết một số vấn đề liên quan đến đầu số

Vấn đề là, những vấn đề được trích dẫn trong bài viết đó thậm chí không phải là lý do chính khiến tôi quyết định tránh nó. Sau khi nhận được phản hồi đó trên Keenforms, tôi nhận ra rằng có khá nhiều lập trình viên ngoài kia hoàn toàn không biết về các vấn đề mà đầu vào số đưa ra. Danh sách không dài, nhưng các vấn đề khá khó hiểu. Vì vậy, đây là một danh sách ngắn về tất cả những điều khủng khiếp về đầu vào số (ít nhất là những điều mà tôi biết) mà mọi nhà phát triển nên biết

1. Khi đầu vào số chứa một giá trị không hợp lệ và bạn truy xuất giá trị đó, bạn sẽ nhận được một chuỗi trống
2. Các số hợp lệ không chỉ bao gồm các chữ số (i. e,. ký hiệu khoa học như chữ e)
3. Có thể dễ dàng bỏ qua các thuộc tính tối thiểu/tối đa
4. Các trình duyệt khác nhau chấp nhận các ký tự khác nhau

Khi đầu vào số chứa một giá trị không hợp lệ và bạn truy xuất giá trị đó, bạn sẽ nhận được một chuỗi trống

Có một số cách bạn có thể thực hiện để truy xuất giá trị. Nó có thể nằm trên một trình xử lý sự kiện, sẽ lưu trữ giá trị trường trong event.target.value. Hoặc bạn có thể lấy nó thông qua phần tử DOM. Dù bằng cách nào khi số không hợp lệ, bạn không thể nhận được giá trị thực tế xuất hiện trên màn hình trong trường

const numberInput = document.getElementById('id_here');
console.log(numberInput.value); // will return empty string if invalid

Nếu bạn đang xây dựng một biểu mẫu yêu cầu xác thực hoặc tính toán có điều kiện, thì khó có thể hiểu được mức độ nghiêm trọng của vấn đề này. Thực tế là đầu vào số sẽ cho phép người dùng nhập một giá trị số không hợp lệ nhưng không thực sự truy xuất giá trị không hợp lệ đó (thay vào đó nhận một chuỗi trống), khiến cho loại xác thực mà tôi thường được yêu cầu cung cấp là không thể

Nếu bạn chỉ đang sử dụng đầu vào số cho tuổi của ai đó hoặc số lượng sản phẩm, điều này có vẻ không phải là vấn đề lớn. Tuy nhiên, hãy xem xét một ví dụ về biểu mẫu mà tôi được giao nhiệm vụ xây dựng trong đó đầu vào số ảnh hưởng hoặc bị ảnh hưởng bởi các đầu vào khác, chẳng hạn như biểu mẫu bảo hiểm nhân thọ với các yêu cầu sau

• Một số đầu vào cho số lượng người phụ thuộc. Giá trị số sẽ xác định số lượng biểu mẫu lồng nhau cho mỗi biểu mẫu phụ thuộc
• Một số đầu vào cho mỗi thành viên trong gia đình cho biết tỷ lệ phần trăm mà người này sẽ nhận được trong trường hợp xuất chi. Nếu số lượng người phụ thuộc là một, thì đầu vào cụ thể này sẽ bị ẩn và tự động đặt thành 100. Nếu số lượng lớn hơn 1, thì đầu vào sẽ hiển thị và có giá trị không nhỏ hơn 0. 01 và chứa giá trị nhỏ hơn 100
• Một đầu vào số ẩn sẽ tính tổng tỷ lệ phần trăm của từng người phụ thuộc được liệt kê, xác thực rằng tổng phụ chính xác là 100

Tất cả những yêu cầu này bắt buộc phải sử dụng JavaScript. Nói chung, đó có thể là những yêu cầu tối thiểu và các yêu cầu bổ sung thường xuất hiện sau một số thử nghiệm của người dùng. Tôi không thể thực hiện công việc của mình nếu không tiếp cận được những giá trị đó, cho dù chúng có hợp lệ hay không

Biểu mẫu có tính khả dụng cao sẽ tận dụng JavaScript để ngăn người dùng nhập hoặc gửi dữ liệu không hợp lệ. Xác thực dữ liệu back-end không còn đủ nữa. Hầu hết chúng ta đều cảm thấy khó chịu khi gặp sự cố khi nhập dữ liệu vào một biểu mẫu mà không có vấn đề gì, chỉ để nhấp vào gửi và phát hiện ra một số thông tin nhập vào không hợp lệ. Sử dụng JavaScript cho loại xác thực này là hoàn toàn cần thiết cho loại trải nghiệm người dùng chất lượng mà hầu hết chúng ta mong đợi

Số hợp lệ nhiều hơn chữ số

Đây là mặt trái của vấn đề giá trị số không hợp lệ. đầu vào số cho phép bạn nhập các giá trị là số có thể chấp nhận được về mặt kỹ thuật, nhưng rất có thể bạn không muốn chúng và không lường trước được rằng chúng có thể được coi là "hợp lệ". ”

Rất có thể bạn đã sử dụng input type="number” vì bạn mong đợi một số nguyên đại diện cho tuổi hoặc số lượng. Tuy nhiên, đầu vào số sẽ cho phép các giá trị ký hiệu khoa học; . 3e4, đại diện cho 2. 3 nhân 10 mũ 4, hay 23.000. Nếu giá trị đầu vào số đủ lớn, một số trình duyệt sẽ tự động chuyển đổi đầu vào của bạn thành ký hiệu hàm mũ

Các trình duyệt khác nhau chấp nhận các ký tự khác nhau

Tất cả các trình duyệt không giống nhau. Hãy bắt đầu với các tình huống tốt nhất

Chrome và (bất ngờ. )Microsoft Edge

Các ký tự sau được cho phép (dựa trên thử nghiệm trực tiếp được thực hiện vội vàng của tôi);

• Số 0-9
• Dấu thập phân
• “-” (đối với giá trị âm)
• ký tự “+” và “e” cho ký hiệu số mũ

Cả hai trình duyệt này sẽ ngăn bạn nhập nhiều lần các ký tự không phải là số được chấp nhận. Tuy nhiên, bạn có thể đặt các ký hiệu đó ở bất kỳ đâu trong đầu vào, chẳng hạn như đặt ký hiệu dấu trừ ở giữa các chữ số, điều này sẽ làm cho số không hợp lệ và do đó khiến giá trị đó không thể truy cập được qua JavaScript

Firefox và Safari

Không có giới hạn nào. Bạn có thể gõ bất cứ điều gì bạn muốn

Tất cả các trình duyệt này sẽ hiển thị cửa sổ bật lên tích hợp để cho biết rằng giá trị bạn đã nhập không phải là số hợp lệ và nút Gửi sẽ không hoạt động nếu người dùng không sửa các giá trị nhập đó. Xác thực tích hợp không nhất quán trực quan với bất kỳ UX nào khi bạn đang xây dựng cho ứng dụng của mình. Là một lập trình viên, bạn có thể thấy điều này chấp nhận được, nhưng rất có thể nhà thiết kế và/hoặc người quản lý sản phẩm của bạn sẽ không

Giới hạn tối thiểu/tối đa có thể được bỏ qua

Khả năng đặt giá trị số tối thiểu và tối đa trong đầu vào số là một tính năng hay cần có. Các nút tăng/giảm sẽ giữ giá trị số trong các tham số phạm vi này. Tuy nhiên, bạn không thể hoàn toàn tin tưởng nó để ngăn các giá trị nằm ngoài phạm vi;

Nếu điều này có vẻ nhỏ nhặt, tôi muốn bạn biết rằng tôi hoàn toàn đồng ý với bạn. Nhưng nó không phải lúc nào cuộc gọi của tôi

Hãy tưởng tượng một người kiểm thử phần mềm tìm thấy sự cố này và ghi lại lỗi. Hãy tưởng tượng người quản lý sản phẩm nghe về lỗi. Hãy tưởng tượng thảo luận về lỗi này trong quá trình lập kế hoạch chạy nước rút, nhưng sau đó trình bày trường hợp của bạn với chính người quản lý sản phẩm đó. “Đây là trường hợp cạnh và số sẽ vẫn được xác thực ở mặt sau. ” Và bên cạnh đó, bạn đã nói đây là MVP và “lỗi” này thực sự là hành vi tiêu chuẩn của việc nhập số. Hãy tưởng tượng thua trận đó và phải sửa chữa nó

Điểm mấu chốt là không phải lúc nào cũng là lựa chọn của nhà phát triển và đầu vào số không phải là bạn của bạn

Sử dụng gì thay vì nhập số

Trước khi tôi đi vào chi tiết về thời điểm sử dụng đầu vào số, điều quan trọng là phải thiết lập một điều mà nhiều lập trình viên có kinh nghiệm biết, nhưng điều này đáng để nhắc lại; . e. số lượng của một sản phẩm hoặc tuổi của ai đó. Điều đó có nghĩa là bạn không bao giờ sử dụng đầu vào số cho những thứ như mã ZIP, số điện thoại, số an sinh xã hội, v.v.

Đến những thứ thú vị hơn. Việc có sử dụng đầu vào số hay không phải được quyết định theo từng trường hợp cụ thể và phép tính sẽ thay đổi dựa trên các yêu cầu, rủi ro và các bên liên quan

Nếu bạn cần nhập số không có xác thực có điều kiện (i. e. number luôn nằm trong một phạm vi tối thiểu/tối đa nhất định) và không có mối quan hệ với bất kỳ đầu vào nào khác trên biểu mẫu, thì việc sử dụng đầu vào số không phải là vấn đề lớn. Như đã đề cập, Keenforms sử dụng đầu vào số cho giá trị vị trí của thuộc tính biểu mẫu. Rủi ro và hậu quả của việc người dùng muốn làm điều gì đó độc hại (như đặt số không hợp lệ vào giá trị vị trí) vào biểu mẫu của chính họ đủ thấp để đó là một sự đánh đổi đáng giá

Đảm bảo rằng các bên liên quan nhận thức được vấn đề về sự không nhất quán trực quan giữa các trình duyệt khác nhau cũng như sự không nhất quán của bất kỳ thông báo nào bạn đang sử dụng để chỉ ra các giá trị nhập số không hợp lệ

Nếu bạn đang xử lý xác thực có điều kiện hoặc số đó đang được sử dụng ở nơi khác để tính toán, thì đó là lúc bạn cần bỏ nhập số. Có một vài lựa chọn về cách giải quyết vấn đề này

chính phủ. Bài báo của Vương quốc Anh đề cập đến một giải pháp khả thi. Sử dụng là một tùy chọn hay cho số nguyên, nhưng nó sẽ không hoạt động đối với số thập phân có dấu phẩy động

Tùy chọn cuối cùng của bạn là làm những gì tôi đã xây dựng cho Keenforms. sử dụng một input type="text“ đơn giản, sẽ luôn cung cấp cho bạn giá trị của nó và thực hiện tất cả xác thực của bạn thông qua JavaScript. Nó đòi hỏi nhiều nỗ lực hơn từ phía lập trình viên và bạn mất các nút tăng/giảm. Tuy nhiên, là một người đã học được một cách khó khăn, đó là một sự đánh đổi mà tôi phải chấp nhận. Đối với các trường hợp sử dụng nâng cao, tôi không tìm thấy tùy chọn khả thi nào khác

Điều đó không có nghĩa là ủng hộ việc hy sinh tất cả khả năng truy cập vì lợi ích của các yêu cầu nâng cao, tính nhất quán về hình ảnh và tính dễ sử dụng. Gần đây tôi đã nói chuyện với Avram Sand từ Access Armada để thảo luận về một số vấn đề liên quan đến việc nhập số

Avram cho biết: “Mục đích của khả năng tiếp cận kỹ thuật số là đảm bảo rằng các biểu mẫu của bạn dễ hiểu và có thể sử dụng được cho mọi người. “Các trường nhập số có thể hữu ích, nhưng có nhiều cách khác để đạt được kết quả mong muốn của chúng tôi, chẳng hạn như bằng cách buộc bàn phím số trên một kiểu nhập văn bản, thêm các nhãn trường mô tả cho biết các yêu cầu để nhập số cũng như xác thực biểu mẫu và lỗi . ”

Đề xuất tốt nhất của tôi để cố gắng duy trì càng nhiều khả năng truy cập càng tốt là sử dụng một công cụ trực tuyến sẽ kiểm tra khả năng truy cập trang web của bạn, chẳng hạn như công cụ trợ năng WAVE

Nếu có một điểm rút ra ở đây, đó là không thể cung cấp các loại chức năng phức tạp mà nhiều dự án yêu cầu đồng thời sử dụng đầu vào số. Đó là một trong hai/hoặc lựa chọn, và theo cách tôi nhìn thấy, tốt hơn hết là bạn nên bỏ việc nhập số

Làm cách nào để đặt số điện thoại di động gồm 10 chữ số trong HTML?

Loại và giá trị trong HTML là gì?

Làm cách nào để đặt số điện thoại trong HTML?

Tôi có nên sử dụng số loại đầu vào?