Số có phải là loại đầu vào hợp lệ trong HTML5 không?
Sau đây là đoạn trích từ cuốn sách của chúng tôi, HTML5 & CSS3 cho Thế giới thực, Phiên bản thứ 2, được viết bởi Alexis Goldstein, Louis Lazaris và Estelle Weyl. Các bản sao được bán tại các cửa hàng trên toàn thế giới hoặc bạn có thể mua dưới dạng sách điện tử tại đây Show Có thể bạn đã quen thuộc với thuộc tính Biểu mẫu đăng ký của chúng tôi hiện sử dụng bốn trong số mười loại đầu vào mà bạn quen thuộc. 0, 1 và 2. Đây là danh sách đầy đủ các loại có sẵn trước HTML5
Đặc tả HTML5 cung cấp cho chúng tôi thêm 9 loại đầu vào cung cấp nhiều phần tử giao diện người dùng dành riêng cho dữ liệu hơn và xác thực dữ liệu gốc
HTML5. 1 và WHATWG HTML Living Standard bao gồm bốn loại đầu vào ngày bổ sung, ba trong số đó được hỗ trợ tốt trong các trình duyệt hiện đại
(không được hỗ trợ trong bất kỳ trình duyệt nào) Hãy xem xét chi tiết từng loại mới này và xem cách chúng ta có thể Tìm kiếmLoại đầu vào
Nhiều trình duyệt định kiểu đầu vào tìm kiếm theo cách nhất quán với hộp tìm kiếm của trình duyệt hoặc hệ điều hành. Hiện tại, Chrome, Safari, Opera và IE đã thêm khả năng xóa đầu vào bằng cách nhấp chuột bằng cách cung cấp biểu tượng × sau khi văn bản được nhập vào trường, như thể hiện trong Hình 4. 5. Các loại đầu vào ngày/giờ cũng có thể xóa được trong Chrome và Opera và IE11 bao gồm biểu tượng × để xóa hầu hết các loại đầu vào hiện tại, bao gồm cả đầu vào của loại văn bản hinh 4. 5. Loại đầu vào tìm kiếm được tạo kiểu giống với các trường tìm kiếm của hệ điều hành Trên các thiết bị của Apple, trường tìm kiếm có các góc được bo tròn theo mặc định trong Chrome, Safari và Opera, phù hợp với giao diện trường tìm kiếm của thiết bị. Trên bàn di chuột có bàn phím động, nút “đi” xuất hiện dưới dạng biểu tượng tìm kiếm hoặc từ “tìm kiếm”, tùy thuộc vào thiết bị. Nếu bạn bao gồm thuộc tính kết quả không chuẩn, Chrome và Opera sẽ hiển thị biểu tượng kính lúp/kính nhìn trong trường biểu mẫu Mặc dù bạn vẫn có thể sử dụng
Vì 9 giống như tất cả các loại đầu vào mới, xuất hiện dưới dạng hộp văn bản thông thường trong các trình duyệt không hỗ trợ, nên không có lý do gì để không sử dụng nó khi thích hợpĐịa chỉ emailLoại Hãy thay đổi biểu mẫu của chúng tôi để sử dụng
Nếu bạn thay đổi loại đầu vào từ 0 thành email , như chúng tôi đã thực hiện ở đây, bạn sẽ không nhận thấy thay đổi rõ ràng nào trong giao diện người dùng; . Tuy nhiên, có sự khác biệt đằng sau hậu trườngSự thay đổi trở nên rõ ràng nếu bạn đang sử dụng thiết bị có bàn di chuột. Khi bạn tập trung vào trường email, hầu hết các thiết bị cảm ứng—chẳng hạn như iPad hoặc điện thoại Android chạy Chromium—đều sẽ hiển thị bàn phím được tối ưu hóa để nhập email, bao gồm ký hiệu @, dấu chấm và nút dấu cách, nhưng không có dấu phẩy, như minh họa trong . 6 hinh 4. 6. Kiểu nhập email cung cấp bàn phím tùy chỉnh trên thiết bị iOS Firefox, Chrome, Opera và Internet Explorer 10 cũng cung cấp thông báo lỗi cho các mục nhập email không hợp lệ. nếu bạn cố gắng gửi biểu mẫu có nội dung không thể nhận dạng dưới dạng một hoặc nhiều địa chỉ email, trình duyệt sẽ cho bạn biết điều gì sai. Các thông báo lỗi mặc định được hiển thị trong Hình 4. 7 hinh 4. 7. Thông báo lỗi do định dạng sai địa chỉ email trên Opera (trái) và Firefox (phải) Ghi chú. Thông báo xác thực tùy chỉnh Không thích thông báo lỗi mặc định mà trình duyệt cung cấp? .
Thật không may, trong khi bạn có thể thay đổi nội dung của tin nhắn, thì bạn lại bị mắc kẹt với hình thức của nó, ít nhất là vào lúc này URLĐầu vào 5 input 9 được sử dụng để chỉ định địa chỉ web. Giống như email , nó sẽ xuất hiện dưới dạng trường văn bản bình thường. Trên nhiều màn hình cảm ứng, bàn phím ảo được hiển thị sẽ được tối ưu hóa cho mục nhập địa chỉ web, với dấu gạch chéo lên (/) và dấu “. phím tắt com”Hãy cập nhật biểu mẫu đăng ký của chúng tôi để sử dụng loại đầu vào url
Xác thực URLTất cả các trình duyệt hiện đại bắt đầu với Internet Explorer 10 đều hỗ trợ loại đầu vào url, báo cáo đầu vào là không hợp lệ nếu giá trị không bắt đầu bằng một giao thức. Chỉ có định dạng giao thức chung của một URL được xác thực, vì vậy, ví dụ: Số điện thoạiĐối với số điện thoại, hãy sử dụng kiểu đầu vào 6 type 5. Không giống như các loại 5 và email , loại tel không thực thi một cú pháp hoặc mẫu cụ thể. Chữ cái và số—thật vậy, bất kỳ ký tự nào không phải là dòng mới hoặc dấu xuống dòng—đều hợp lệ. Có một lý do tốt cho việc này. trên toàn thế giới, các quốc gia có số điện thoại hợp lệ với nhiều độ dài và dấu câu khác nhau, vì vậy không thể chỉ định một định dạng duy nhất làm tiêu chuẩn. Ví dụ: ở Hoa Kỳ, +1(415)555-1212 cũng được hiểu như 415. 555. 1212, nhưng các công ty cũng có thể sử dụng các chữ cái trong số điện thoại của họ, chẳng hạn như (800)GỌI NGAY BÂY GIỜBạn có thể khuyến khích một định dạng cụ thể bằng cách bao gồm một trình giữ chỗ với cú pháp chính xác hoặc một nhận xét sau khi nhập kèm theo một ví dụ. Ngoài ra, bạn có thể quy định định dạng bằng cách sử dụng thuộc tính mẫu. Bao gồm tiêu đề với thuộc tính mẫu để cung cấp chú giải công cụ và để cải thiện UX của thông báo lỗi xác thực gốc. Bạn cũng có thể sử dụng phương pháp Khi sử dụng loại đầu vào 6, bàn phím cảm ứng động thường sẽ hiển thị bàn phím điện thoại, bao gồm cả phím hoa thị và phím thăng. Bạn có thể sử dụng 6 cho nhiều mục đích khác ngoài số điện thoại. Ví dụ: nó có thể là bàn phím tốt nhất để nhập biểu mẫu số an sinh xã hộiChia sẻ bài viết nàyAlexis Goldstein Lần đầu tiên Alexis Goldstein tự học HTML khi còn là học sinh trung học vào giữa những năm 1990 và tiếp tục lấy bằng Khoa học Máy tính tại Đại học Columbia. Cô điều hành công ty đào tạo và phát triển phần mềm của riêng mình, aut faciam LLC. Trước khi tự mình thành lập, Alexis đã dành bảy năm làm việc trong lĩnh vực Công nghệ ở Phố Wall, nơi cô làm việc trong cả không gian vốn chủ sở hữu tiền mặt và phái sinh vốn chủ sở hữu tại ba công ty lớn, đồng thời học cách yêu thích việc đánh giá mã hàng ngày. Cô ấy là giáo viên và là người đồng tổ chức Girl Develop It, đồng thời là thành viên rất đáng tự hào của không gian tin tặc NYC Resistor ở Brooklyn, NY Estelle Weyl Estelle Weyl là kỹ sư mặt trước đến từ San Francisco, người đã phát triển các trang web có thể truy cập dựa trên tiêu chuẩn từ năm 1999. Cô ấy cũng viết hai blog kỹ thuật với hàng triệu người truy cập. Niềm đam mê của cô ấy là dạy phát triển web, vì vậy bạn sẽ thấy cô ấy nói về CSS3, HTML5, JavaScript và phát triển web di động tại các hội nghị trên khắp Hoa Kỳ Louis Lazaris Louis đã tham gia vào ngành phát triển web từ năm 2000 và là người đồng biên tập nội dung HTML/CSS trên SitePoint. Anh ấy viết blog tại Impressive Webs và quản lý Web Tools Weekly, một bản tin dành cho các nhà phát triển front-end chủ yếu tập trung vào các công cụ Số có phải là đầu vào hợp lệ trong HTML không?Số đầu vào được coi là hợp lệ khi trống và khi một số duy nhất được nhập, nhưng nếu không thì không hợp lệ . Nếu thuộc tính bắt buộc được sử dụng, đầu vào không còn được coi là hợp lệ khi trống. Ghi chú. Bất kỳ số nào cũng là giá trị có thể chấp nhận được, miễn là số đó là số dấu phẩy động hợp lệ (nghĩa là không phải NaN hoặc Infinity).
Đâu không phải là kiểu đầu vào trong HTML5?7. Cái nào sau đây không phải là thành phần biểu mẫu được thêm vào HTML5? .
Văn bản loại đầu vào có cho phép số không?Ví dụ 1. Ví dụ bên dưới minh họa Đầu vào[type=”text”] chỉ cho phép Giá trị số bằng Javascript với sự trợ giúp của mã ASCII .
Loại nào chỉ sử dụng chữ số làm đầu vào trong HTML5?Loại đầu vào Số
. Bạn cũng có thể đặt giới hạn về những số được chấp nhận |