Ví dụ này là tất cả những gì cần thiết để tạo cú pháp HTML và CSS đầy đủ chức năng chứa tất cả các thành phần, thuộc tính và thuộc tính CSS cần thiết của HTML. Tất cả những gì bạn phải làm là dùng thử trong tài liệu HTML tiếp theo của mình và xem việc viết cú pháp có thể dễ dàng như thế nào

Để tạo đầu vào số điện thoại trong tài liệu HTML

Xác thực số điện thoại HTML5 được tạo theo một số bước và yêu cầu bổ sung phần tử đầu vào HTML cùng với các thuộc tính cụ thể. Số điện thoại loại đầu vào khác với các trường nhập email hoặc URL vì nó không được xác thực tự động. Lý do là các kiểu định dạng số điện thoại trên toàn thế giới là khác nhau và khác nhau giữa các quốc gia

Như đã đề cập trước đây, yếu tố quan trọng nhất là đầu vào HTML và tất cả các thuộc tính phải được đưa vào bên trong thẻ mở. Bài viết này chứa nhiều ví dụ sẽ làm cho quá trình học tập dễ dàng hơn nhiều. Còn chần chừ gì nữa, chúng ta hãy tạo cú pháp nhập số điện thoại HTML cơ bản

Thuộc tính bổ sung cho cú pháp

Các thuộc tính HTML luôn được sử dụng để cải thiện cú pháp bằng cách cung cấp các chức năng bổ sung và điều này không có gì khác biệt trong trường hợp này. Cũng giống như kiểu HTML, các thuộc tính mà chúng tôi sắp giới thiệu cho bạn phải được bao gồm trong các thẻ HTML mở đầu và phải chứa một giá trị cụ thể. Danh sách sau đây sẽ cho bạn thấy một số thuộc tính phổ biến nhất mà bạn có thể sử dụng cho cú pháp nhập số điện thoại HTML

• danh sách
• độ dài tối đa
• Độ dài nhỏ nhất
• họa tiết
• giữ chỗ
• kích thước
• giá trị

Xin lưu ý rằng đây không phải là những thuộc tính duy nhất bạn có thể đưa vào cú pháp nhưng chúng là một trong những thuộc tính phổ biến nhất. Đối với mỗi thuộc tính được liệt kê ở đây, chúng tôi sẽ giải thích kỹ lưỡng và bao gồm một ví dụ cụ thể để giúp mọi người dễ hiểu hơn. Trong phần sau, chúng ta sẽ bắt đầu với thuộc tính HTML đầu tiên được đề cập trong danh sách

– Danh sách HTML

Thuộc tính danh sách HTML được sử dụng cho phần tử datalist HTML nên được đặt trong cùng một tài liệu. Phần tử này và thuộc tính danh sách của nó giúp bạn tạo một danh sách được xác định trước về tất cả các giá trị đầu vào có thể có của người dùng. Do đó, điều này có nghĩa là các giá trị được tạo không phải là yêu cầu, chúng chỉ là những khả năng có thể giúp người dùng. Phần tử datalist HTML có thẻ HTML mở và thẻ đóng

Mã ví dụ 3

Bên trong phần tử HTML này, bạn phải tạo bao nhiêu phần tử tùy chọn HTML tùy thích, như ví dụ sau cho thấy

Ví dụ này chứa bốn giá trị tùy chọn sẽ hỗ trợ người dùng. Họ có thể hoặc không thể chấp nhận giá trị có thể được cung cấp bởi trình duyệt. Bây giờ, chúng ta hãy chuyển sang thuộc tính HTML tiếp theo

– Độ dài tối đa và độ dài tối thiểu của HTML

Vì các thuộc tính maxlength và minlength trong HTML tương tự nhau nên chúng ta sẽ xem xét chúng cùng một lúc. Thuộc tính maxlength HTML được sử dụng để chỉ định số lượng ký tự tối đa mà người dùng có thể chèn bên trong trường nhập số điện thoại. Mặt khác, thuộc tính độ dài tối thiểu của HTML được sử dụng để chỉ định số ký tự tối thiểu mà người dùng có thể nhập

Mã Ví dụ 4

Hai thuộc tính này thường được sử dụng lần lượt, như ví dụ sau cho thấy

Điện thoại.

Như bạn có thể thấy, cú pháp này sẽ giới hạn người dùng nhập số điện thoại dài từ 7 đến 14 ký tự. Người dùng sẽ không thể gửi số điện thoại của họ trừ khi nó không thuộc phạm vi này. Thuộc tính sau chúng ta sẽ xem xét là mẫu HTML

– Mẫu HTML

Thuộc tính mẫu HTML được sử dụng để tạo biểu thức mà người dùng phải khớp trước khi gửi biểu mẫu. Bạn cũng phải bao gồm thuộc tính tiêu đề HTML sẽ làm rõ điều gì sai nếu người dùng không khớp với biểu thức đã tạo. Thuộc tính này không bắt buộc nhưng nó rất hữu ích trong việc làm cho biểu mẫu chuyên nghiệp hơn

Mã ví dụ 5

Ví dụ sau sẽ chỉ cho bạn cách sử dụng thuộc tính mẫu HTML

Số điện thoại.

Thuộc tính tiêu đề HTML sẽ chỉ hiển thị nếu người dùng không khớp với biểu thức. Người dùng sẽ tiếp tục nhận được thông báo chú giải công cụ cho đến khi họ quản lý để tạo biểu thức chính xác. Hãy để chúng tôi tiếp tục với thuộc tính HTML tiếp theo

– Trình giữ chỗ HTML

Thuộc tính giữ chỗ HTML được sử dụng để cung cấp gợi ý cho người dùng về loại thông tin nào được cho là sẽ được nhập vào trường. Do đó, điều này có nghĩa là giá trị của thuộc tính giữ chỗ phải là một từ đơn hoặc một cụm từ ngắn. Chú giải công cụ sẽ biến mất ngay khi người dùng bắt đầu nhập bất kỳ biểu mẫu nào

Mã ví dụ 6

Bạn phải bao gồm thuộc tính này và giá trị của nó bên trong thẻ đầu vào HTML mở, như được hiển thị ở đây

Điện thoại.

Các chuyên gia khuyên bạn nên đưa thuộc tính này vào cú pháp của mình vì nó có thể cải thiện trải nghiệm người dùng trên trang web của bạn. Bây giờ, chúng ta sẽ xem xét thuộc tính HTML tiếp theo

– Kích thước HTML

Thuộc tính kích thước HTML được sử dụng để chỉ định giá trị số của độ rộng ký tự cho trường đầu vào. Giá trị mặc định cho thuộc tính này là 20 nhưng nó không bao giờ được thấp hơn 0. Bạn cũng nên lưu ý rằng chiều rộng của các ký tự đôi khi có thể thay đổi, vì vậy kết quả cuối cùng đôi khi có thể rộng hơn hoặc hẹp hơn

Mã ví dụ 7

Giá trị của thuộc tính này phải luôn là một giá trị số và ví dụ sau đây cho biết cách thực hiện

Điện thoại.

Như bạn có thể thấy, thuộc tính này cũng được cho là có trong thẻ đầu vào HTML. Bạn nên lưu ý rằng thứ tự của các thuộc tính không quan trọng. Cuối cùng, chúng ta hãy xem thuộc tính cuối cùng cho cú pháp nhập số điện thoại HTML

– Giá trị HTML

Thuộc tính giá trị HTML được sử dụng để tạo giá trị ban đầu cho điều khiển trên trang web của bạn. Thuộc tính này đã được sử dụng nhiều lần trong các ví dụ trước nhưng chỉ với một giá trị duy nhất. Chúng tôi sẽ chỉ cho bạn cú pháp của hai giá trị có thể có cho thuộc tính giá trị HTML

Hai giá trị có thể được hiển thị trong ví dụ sau

  

Ví dụ này tóm tắt mọi thứ bạn cần biết về các thuộc tính HTML bổ sung được sử dụng cho cú pháp nhập số điện thoại HTML. Trong phần tiếp theo của bài viết này, chúng ta sẽ tóm tắt mọi thứ và xem xét những điểm quan trọng nhất

Sự kết luận

Các nhà phát triển web sử dụng đầu vào số điện thoại HTML để tạo một trường cụ thể nơi người dùng có thể gửi số điện thoại. Bài viết này quản lý để đề cập đến rất nhiều chi tiết quan trọng và tất cả chúng đều được tóm tắt trong danh sách gạch đầu dòng sau

• Không có phần tử HTML cụ thể nào để nhập số điện thoại. Bạn phải sử dụng phần tử đầu vào HTML cùng với các thuộc tính khác
• Thuộc tính loại HTML phải chứa giá trị của 'tel'. Bạn có thể thêm các thuộc tính HTML bổ sung để cải thiện cú pháp và SEO cho trang web của mình
• Tất cả các thuộc tính phải được bao gồm trong các thẻ HTML mở và phải chứa một giá trị
• Cú pháp hoàn chỉnh chứa nhiều phần tử HTML và thuộc tính CSS
• Tất cả các phần tử, thuộc tính và thuộc tính có một chức năng cụ thể

Không có cách nào tốt hơn để thu thập dữ liệu người dùng ngoài trường nhập số điện thoại HTML. Sau khi đọc kỹ từng phần trong bài viết này, bạn đã sẵn sàng bắt đầu làm việc với dự án HTML tiếp theo có chứa chức năng nhập số điện thoại

5/5 - (15 phiếu)

• Tác giả
• Bài viết gần đây

Vị trí là tất cả

Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL