Trang Chủ Xã hội Truyền thông Mẫu nhập kiểu mới trong HTML5 - núm vú

Mẫu nhập kiểu mới trong HTML5 - núm vú

Video: [Học HTML - 09] Tạo form nhập liệu 2025

Video: [Học HTML - 09] Tạo form nhập liệu 2025
Anonim

Các mẫu HTML được tập trung quanh yếu tố đầu vào khiêm tốn nhưng linh hoạt. HTML5 thêm một số hình thức đầu vào rất hữu ích giúp biến HTML thành một công cụ giao diện người dùng hiện đại hơn.

Mặc dù sự hỗ trợ cho các thẻ này không phải là phổ quát, nhưng bạn vẫn có thể bắt đầu sử dụng chúng ngay bây giờ. Bất kỳ trình duyệt nào (không kể IE6) không hiểu các loại đầu vào nâng cao sẽ trở lại kiểu đầu vào = "văn bản", mà sẽ vẫn làm việc chính xác như mong đợi (mặc dù không phải với sự cải tiến xác nhận và cải tiến giao diện người dùng của các thẻ mới hơn).

Tiêu chuẩn cho biết rằng các loại khác nhau sẽ được hỗ trợ nhưng cách chính xác các yếu tố được hỗ trợ có thể thay đổi từ trình duyệt sang trình duyệt. Ví dụ: trường e-mail có thể trông giống như một trường văn bản thông thường cho người dùng trên một máy tính để bàn tiêu chuẩn, nhưng bàn phím ảo trên thiết bị di động có thể thay đổi để bao gồm @ khi nó gặp một trường e-mail.

Hầu hết các lĩnh vực đặc biệt này hỗ trợ xác nhận, do đó ở mức tối thiểu, nên thiết lập một kiểu CSS không hợp lệ để người dùng có thể biết liệu dữ liệu có trong lĩnh vực này hay không. Dưới đây là các loại đầu vào có mã mẫu:

  • : Cho phép người dùng chọn màu bằng các định dạng web tiêu chuẩn - tên màu được công nhận (màu vàng) và giá trị hex trước một ký hiệu # (# FF0033). Một số trình duyệt (Firefox 3. 5) hiển thị một trường văn bản, một số khác (Opera 10) hiển thị một điều khiển lịch đặc biệt, còn các trình duyệt khác (Chrome) bao gồm cả văn bản và pop-up calendar. Nếu ngày được nhập bằng văn bản, nó phải được nhập theo định dạng yyyy-mm-dd:

    
    
  • Bạn có thể hạn chế ngày cho phép đối với một dải cụ thể bằng cách áp dụng các thuộc tính min và max cho phần tử. thời gian

    :
    
    

    Thời gian được lưu trữ ở định dạng hh: mm. Một số trình duyệt bao gồm một dấu hai chấm trực tiếp trong trường và một số sửa đổi bàn phím ảo với số và ký tự dấu hai chấm. Cũng có thể một trình duyệt sẽ bật lên một số bộ chọn thời gian tùy chỉnh nhưng điều này chưa được hỗ trợ trong bất kỳ trình duyệt chính nào.

  • datetime : Kết hợp ngày và giờ thành một phần tử duy nhất. Nó cũng bao gồm một cơ chế để nhập múi giờ.

    
    
  • Một số trình duyệt bật lên một điều khiển lịch cho ngày và đầu vào định dạng cho thời gian. Những người khác có thể sửa đổi bàn phím ảo cho ngày và thời gian đầu vào. Định dạng ngày và giờ chính thức được trả lại từ các yếu tố ngày giờ khác nhau là một mã chuyên biệt: yyyy-mm-ddThh: mm + ff: gg: yyyy

    
    

    :

    Bốn chữ số cho năm.

    • - : Một ký tự dấu gạch chéo thực tế, phải được đặt giữa năm và tháng.Một dấu gạch ngang khác được đặt giữa tháng và ngày.

    • mm : Hai chữ số trong tháng.

    • dd : Hai chữ số trong ngày.

    • T : Vốn

    • T cho biết bắt đầu phần thời gian của mã. hh : Hai chữ số cho một giờ ở định dạng 24 giờ.

    • : : Ký tự đại tràng giữa giờ và phút. Dấu hai chấm xuất hiện giữa giờ và phút của múi giờ bù đắp.

    • mm : Hai chữ số cho phút.

    • + / - / Z : Việc bù đắp múi giờ được chỉ định bởi số vốn

    • Z (nếu là thời gian Zulu hoặc GMT) hoặc ký hiệu + hoặc - nếu thời gian là trong một múi giờ khác. ff : Nếu múi giờ không phải là thời gian Zulu, cho biết số giờ được tính bằng GMT.

    • gg : Số phút được tính từ thời gian Zulu. Thông thường đây là 00, nhưng có thể là múi giờ sẽ được bù đắp bằng 15, 30, hoặc 45 phút.

    • Chẳng hạn, 5:30 chiều ngày 11 tháng 10 năm 2011, ở Thành phố New York có dạng như sau: 2011-10-11T17: 30-05: 00 Ngày và giờ cần ở trong định dạng được coi là hợp lệ cho các trình duyệt xác nhận một trường dateTime.

    datetime-local

    :
    

    Giống như phần tử datetime không có chỉ báo múi giờ:

  • email : Dường như trường văn bản thuần, nhưng nó có thể được sửa đổi theo làm thế nào nó được truy cập.

    
    
  • tháng : Điều này tạo ra một năm bốn chữ số theo sau là một tháng hai chữ số:

    
    
  • số : Dữ liệu số có thể bao gồm một trường văn bản tiếp theo một số loại (ví dụ: mũi tên lên và xuống) hoặc thẻ này có thể thay đổi bàn phím ảo của thiết bị di động để chỉ xử lý số đầu vào.

    
    
  • Loại nhập số hỗ trợ một số thuộc tính đặc biệt: phút :

    
    

    Giá trị tối thiểu cho phép.

    • tối đa : Giá trị cho phép tối đa.

    • Bước : Giá trị này cho thấy có bao nhiêu công cụ giao diện trực quan (thường là các mũi tên nhỏ và lên) thay đổi giá trị khi kích hoạt.

    • giá trị : Giá trị số của phần tử.

    • Tất cả các thuộc tính của phần tử số có thể là số nguyên hoặc điểm nổi. Tuy nhiên, các trình duyệt hiện tại hỗ trợ thẻ này (Opera và Chrome) dường như không hợp lệ với các giá trị điểm trôi khi họ làm với các giá trị số nguyên. Để kiểm soát nhiều hơn số đầu vào, hãy xem xét loại nhập vào phạm vi. range :

    Hầu hết bộ công cụ giao diện người dùng có một số thanh trượt hoặc thanh cuộn, giúp người dùng dễ dàng nhập giá trị số bằng hình ảnh.

  • xây dựng cuối cùng thêm chức năng này vào các hình thức HTML. Đầu vào phạm vi có các thuộc tính tương tự như số, phút, giá trị, và bước. Nếu trình duyệt hỗ trợ thẻ phạm vi, người dùng sẽ thấy một trình cuộn; nếu không, một kiểu nhập văn bản thuần văn sẽ xuất hiện. Kiểu phạm vi không hiển thị giá trị chính xác và có thể khó đạt được kết quả chính xác hơn so với kiểu nhập số. Một giải pháp là ghép nối thẻ đầu ra với dải và sử dụng JavaScript để cập nhật đầu ra khi phạm vi được thay đổi.Biểu mẫu mẫu kết hợp ý tưởng này: 128

    
    

    Khi giá trị phạm vi bị thay đổi, nó gọi một hàm JavaScript gọi là hàm updateOutput:

    updateOutput () {// lấy các phần tử var myRange = document. getElementById ("myRange"); var myOutput = tài liệu. getElementById ("myOutput"); / / sao chép giá trị trên myOutput. giá trị = myRange. value;} // end function

    Giống như kiểu nhập số, phạm vi có thể được cung cấp giá trị điểm nổi nếu bạn muốn.
    

    search

    :
    

    Được sử dụng để lấy lại văn bản được sử dụng như là một phần của tìm kiếm (nội bộ hoặc thông qua dịch vụ tìm kiếm). Trên hầu hết các trình duyệt, thẻ này hiển thị như một trường văn bản thông thường. Nó đôi khi có một số hành vi đặc biệt. Trên Safari, trường tìm kiếm được hiển thị với một

  • x nhỏ, giúp xóa nội dung tìm kiếm. Trên Chrome, tính năng tự động hoàn tất của thanh tìm kiếm chính (cũng là phần đầu vào URL trong Chrome) sẽ tự động được áp dụng cho hộp tìm kiếm. Giống như các loại đầu vào mới khác, không có hình phạt nào cho việc sử dụng phần tử tìm kiếm trong các trình duyệt không hỗ trợ nó. Dự phòng là một đầu vào văn bản thuần túy. Phần tử tìm kiếm thực sự không tìm kiếm. Để làm cho nó hoạt động, bạn cần phải viết một số mã.

    
    

    tel

    :

  • Trường này mong đợi ba chữ số tiếp theo là dấu gạch ngang và bốn chữ số - số điện thoại địa phương. Bạn có thể cần phải chơi với thuộc tính của mẫu nếu bạn muốn cho phép mã vùng hoặc tiện ích mở rộng hợp lệ. url :

    
    
  • Các trình duyệt hỗ trợ phần tử này sẽ kiểm tra tiền tố // cho một địa chỉ web. Các trình duyệt trên điện thoại di động cũng có thể thích ứng với bàn phím ảo bao gồm các ký tự thường tìm thấy trong URL: dấu hai chấm (:), dấu gạch chéo (/) và dấu ngã (~). tuần :

    
    
  • Cho phép người dùng chọn một tuần từ một điều khiển lịch. Nó trả về một giá trị theo định dạng sau: yyyy-Wnn yyyy :

    • Là năm bốn chữ số. - :

    • Ký tự gạch ngang. W :

    • Vốn W ký tự. nn :

    • Tuần lễ là một con số gồm hai chữ số. Một số trình duyệt bật lên tính năng lịch tiêu chuẩn. Khi người dùng chọn một ngày (hoặc một tuần), chỉ có năm và tuần sẽ được trả lại. Các trình duyệt khác chỉ cần xác nhận đúng định dạng.

  • Mẫu nhập kiểu mới trong HTML5 - núm vú

    Lựa chọn của người biên tập

    Nhúng tệp Video và Audio vào các trang Web của bạn để có kết quả SEO tốt hơn - những núm vú

    Nhúng tệp Video và Audio vào các trang Web của bạn để có kết quả SEO tốt hơn - những núm vú

    Nếu bạn muốn bao gồm nội dung video và âm thanh trong các trang Web của mình, bạn có thể nhúng các tệp này để làm cho chúng thân thiện hơn với SEO. Bạn cũng nên chọn nội dung tăng cường thông điệp của trang web và làm cho nó thêm thú vị và có ý nghĩa với khách truy cập của bạn. Một số trang web cung cấp các tệp video hoặc âm thanh bằng cách hiển thị chúng trong ...

    Loại trừ một trang web hoặc trang web khỏi các công cụ tìm kiếm Sử dụng một tệp tin văn bản Robots

    Loại trừ một trang web hoặc trang web khỏi các công cụ tìm kiếm Sử dụng một tệp tin văn bản Robots

    Bạn có thể sử dụng tệp văn bản rô-bốt để chặn một nhện công cụ tìm kiếm khỏi thu thập thông tin trang Web hoặc một phần của trang web của bạn. Ví dụ, bạn có thể có một phiên bản phát triển của trang Web nơi bạn làm việc về những thay đổi và bổ sung để kiểm tra chúng trước khi chúng trở thành một phần của trang Web trực tiếp của bạn. ...

    Lựa chọn của người biên tập

    Nhìn vào các ngày lễ Công giáo - những con voi

    Nhìn vào các ngày lễ Công giáo - những con voi

    Một điều rất hay về Đạo Công giáo là nhiều ngày trong năm dương lịch là một nguyên nhân cho lễ kỷ niệm. Gần như mỗi ngày đánh dấu ngày lễ của một vị thánh - một ngày mà cuộc đời thánh thiện và những việc làm của thánh nhân được ghi nhớ. Một số ngày là ngày lễ của nghĩa vụ, có nghĩa là bạn phải tham dự ...

    Sách Khải Huyền Đối với Người Dummies Cheat Sheet - núm vú

    Sách Khải Huyền Đối với Người Dummies Cheat Sheet - núm vú

    Nếu bạn bị cuốn hút bởi Sách Khải Huyền trong Kinh Thánh, đừng bận tâm. Hãy xem cấu trúc cơ bản của Sách Khải Huyền; các giải thích chính của nó; những quan điểm khác nhau về Vương quốc ngàn năm đã đề cập trong Khải huyền 20; và những sự kiện quan trọng đã tạo nên Giăng cho Vị Tông Đồ và bài viết của ông. Bằng cách làm như vậy, bạn sẽ tốt hơn ...

    Hồng y Các Giáo lễ của Giáo Hội Công Giáo - Thập niên

    Hồng y Các Giáo lễ của Giáo Hội Công Giáo - Thập niên

    Một đức tính là thói quen hoàn thiện quyền hạn của linh hồn và định đoạt bạn làm tốt. Người Công giáo tin rằng ân sủng của Thiên Chúa được dâng lên cho linh hồn, bởi vì nếu không có sự giúp đỡ của Đức Chúa Trời, con người không thể làm điều tốt một mình. Grace, đó là sự can thiệp của Thiên Chúa, nâng đỡ linh hồn của một người, cung cấp oomph cần thiết để làm việc.

    Lựa chọn của người biên tập

    Làm thế nào để Khởi động lại Web Host Manager Services của bạn - núm vú

    Làm thế nào để Khởi động lại Web Host Manager Services của bạn - núm vú

    Vẻ đẹp của máy chủ web là mỗi chức năng chính của nó có "dịch vụ" của riêng bạn mà bạn có thể khởi động lại. Một dịch vụ là một phần của phần mềm - một chương trình chạy trên máy chủ xử lý một chức năng cụ thể. Nếu một trong các dịch vụ ngừng hoạt động chính xác, bạn không nhất thiết phải khởi động lại ...

    Làm thế nào để Hủy bỏ Website của bạn từ một Blacklist - núm vú

    Làm thế nào để Hủy bỏ Website của bạn từ một Blacklist - núm vú

    Tên miền hoặc miền địa chỉ IP của bạn bị liệt vào danh sách đen khi phát hiện thư rác. Nếu trang web của bạn đã bị cấm, có thể đó không phải là lỗi của bạn - đặc biệt nếu bạn đang ở trên một máy chủ chia sẻ. Có thể một trang web khác trên máy chủ đã cố tình gửi spam. Nó cũng là ...

    Cách Quản lý Trình Quản lý Máy chủ Web của bạn Hàng đợi Thư - núm vú

    Cách Quản lý Trình Quản lý Máy chủ Web của bạn Hàng đợi Thư - núm vú

    Với quyền truy cập vào phụ trợ của máy chủ của bạn, bạn cũng có thể truy cập vào một số chức năng của Trình quản lý Máy chủ lưu trữ Web trước đây không có sẵn cho bạn. Cuộn xuống trình đơn bên tay trái của WHM để tìm phần được gọi là Thư gần cuối. Trong phần này, có những lựa chọn có thể hữu ích cho bạn nếu ...