Hướng dẫn how many types of html5 are there? - có bao nhiêu loại html5?

  • Trước
  • Tổng quan: Hình thức
  • Tiếp theo

Trong bài viết trước, chúng tôi đã xem xét phần tử

<input type="email" id="email" name="email" multiple />
5, bao gồm các giá trị ban đầu của thuộc tính
<input type="email" id="email" name="email" multiple />
6 có sẵn kể từ những ngày đầu của HTML. Bây giờ chúng ta sẽ xem xét chức năng của các điều khiển biểu mẫu mới hơn một cách chi tiết, bao gồm một số loại đầu vào mới, được thêm vào HTML5 để cho phép thu thập các loại dữ liệu cụ thể.

Prerequisites: Kiến thức máy tính cơ bản, và sự hiểu biết cơ bản về HTML.
Objective: Để hiểu các giá trị loại đầu vào mới hơn có sẵn để tạo các điều khiển biểu mẫu gốc và cách thực hiện chúng bằng HTML.

Lưu ý: Hầu hết các tính năng được thảo luận trong bài viết này có hỗ trợ rộng rãi trên các trình duyệt. Chúng tôi sẽ lưu ý bất kỳ trường hợp ngoại lệ nào. Nếu bạn muốn có thêm chi tiết về hỗ trợ trình duyệt, bạn nên tham khảo tham chiếu phần tử HTML của chúng tôi và đặc biệt là tham chiếu các loại rộng rãi của chúng tôi. Most of the features discussed in this article have wide support across browsers. We'll note any exceptions. If you want more detail on browser support, you should consult our HTML forms element reference, and in particular our extensive types reference.

Bởi vì sự xuất hiện kiểm soát hình thức HTML có thể khá khác biệt so với thông số kỹ thuật của nhà thiết kế, các nhà phát triển web đôi khi xây dựng các điều khiển biểu mẫu tùy chỉnh của riêng họ. Chúng tôi đề cập điều này trong một hướng dẫn nâng cao: Cách xây dựng các tiện ích mẫu tùy chỉnh.

Trường địa chỉ e-mail

Loại trường này được đặt bằng cách sử dụng giá trị

<input type="email" id="email" name="email" multiple />
7 cho thuộc tính
<input type="email" id="email" name="email" multiple />
6:

<input type="email" id="email" name="email" />

Khi

<input type="email" id="email" name="email" multiple />
6 này được sử dụng, người dùng được yêu cầu nhập địa chỉ email hợp lệ vào trường. Bất kỳ nội dung nào khác làm cho trình duyệt hiển thị lỗi khi biểu mẫu được gửi. Bạn có thể thấy điều này trong hành động trong ảnh chụp màn hình dưới đây.

Hướng dẫn how many types of html5 are there? - có bao nhiêu loại html5?

Bạn cũng có thể sử dụng thuộc tính

<input type="search" id="search" name="search" />
0 kết hợp với loại đầu vào
<input type="email" id="email" name="email" multiple />
7 để cho phép một số địa chỉ email được nhập trong cùng một đầu vào (được phân tách bằng dấu phẩy):

<input type="email" id="email" name="email" multiple />

Trên một số thiết bị - đáng chú ý, các thiết bị cảm ứng có bàn phím động như điện thoại thông minh - một bàn phím ảo khác nhau có thể được trình bày phù hợp hơn để nhập địa chỉ email, bao gồm cả khóa

<input type="search" id="search" name="search" />
2. Xem ảnh chụp màn hình bàn phím Android bên dưới để biết ví dụ:

Hướng dẫn how many types of html5 are there? - có bao nhiêu loại html5?

Đây là một lý do chính đáng khác để sử dụng các loại đầu vào mới hơn này, cải thiện trải nghiệm người dùng cho người dùng các thiết bị này.

Xác thực phía khách hàng

Như bạn có thể thấy ở trên,

<input type="email" id="email" name="email" multiple />
7-cùng với các loại
<input type="search" id="search" name="search" />
4 mới hơn-cung cấp xác thực lỗi phía máy khách tích hợp, được thực hiện bởi trình duyệt trước khi dữ liệu được gửi đến máy chủ. Đó là một sự trợ giúp hữu ích để hướng dẫn người dùng điền chính xác một biểu mẫu và nó có thể tiết kiệm thời gian: thật hữu ích khi biết rằng dữ liệu của bạn không chính xác ngay lập tức, thay vì phải đợi một chuyến đi khứ hồi đến máy chủ.

Nhưng nó không nên được coi là một biện pháp bảo mật toàn diện! Ứng dụng của bạn phải luôn thực hiện kiểm tra bảo mật trên bất kỳ dữ liệu được gửi biểu mẫu nào ở phía máy chủ cũng như phía máy khách, vì xác thực phía máy khách quá dễ để tắt, vì vậy người dùng độc hại vẫn có thể dễ dàng gửi dữ liệu xấu qua người phục vụ. Đọc bảo mật trang web cho một ý tưởng về những gì có thể xảy ra; Việc thực hiện xác thực phía máy chủ có phần nằm ngoài phạm vi của mô-đun này, nhưng bạn nên ghi nhớ nó.

Lưu ý rằng

<input type="search" id="search" name="search" />
5 là một địa chỉ email hợp lệ theo các ràng buộc được cung cấp mặc định. Điều này là do loại đầu vào
<input type="email" id="email" name="email" multiple />
7 cho phép địa chỉ email mạng nội bộ theo mặc định. Để thực hiện hành vi xác thực khác nhau, bạn có thể sử dụng thuộc tính
<input type="search" id="search" name="search" />
7 và bạn cũng có thể tùy chỉnh các thông báo lỗi; Chúng ta sẽ nói về cách sử dụng các tính năng này trong bài viết xác thực hình thức phía máy khách sau này.

Lưu ý: Nếu dữ liệu được nhập không phải là địa chỉ email, lớp giả ____28 sẽ khớp và thuộc tính

<input type="search" id="search" name="search" />
9 sẽ trả về
<input type="tel" id="tel" name="tel" />
0.
If the data entered is not an email address, the
<input type="search" id="search" name="search" />
8 pseudo-class will match, and the
<input type="search" id="search" name="search" />
9 property will return
<input type="tel" id="tel" name="tel" />
0.

Trường tìm kiếm

Các trường tìm kiếm được dự định sẽ được sử dụng để tạo các hộp tìm kiếm trên các trang và ứng dụng. Loại trường này được đặt bằng cách sử dụng giá trị

<input type="tel" id="tel" name="tel" />
1 cho thuộc tính
<input type="email" id="email" name="email" multiple />
6:

<input type="search" id="search" name="search" />

Sự khác biệt chính giữa trường

<input type="tel" id="tel" name="tel" />
3 và trường
<input type="tel" id="tel" name="tel" />
1 là cách trình duyệt tạo kiểu cho nó. Thông thường, các trường
<input type="tel" id="tel" name="tel" />
1 được hiển thị với các góc tròn; Đôi khi chúng cũng hiển thị một "", xóa trường của bất kỳ giá trị nào khi nhấp. Ngoài ra, trên các thiết bị có bàn phím động, phím Enter của bàn phím có thể đọc "Tìm kiếm" hoặc hiển thị biểu tượng kính lúp.search", or display a magnifying glass icon.

Các ảnh chụp màn hình dưới đây hiển thị trường tìm kiếm không trống trong Firefox 71, Safari 13 và Chrome 79 trên macOS và Edge 18 và Chrome 79 trên Windows 10. Lưu ý rằng biểu tượng rõ ràng chỉ xuất hiện nếu trường có giá trị và, tách biệt Từ Safari, nó chỉ được hiển thị khi trường được tập trung.

Hướng dẫn how many types of html5 are there? - có bao nhiêu loại html5?

Một tính năng đáng chú ý khác là các giá trị của trường

<input type="tel" id="tel" name="tel" />
1 có thể được lưu tự động và sử dụng lại để cung cấp tự động hoàn thành trên nhiều trang của cùng một trang web; Điều này có xu hướng xảy ra tự động trong hầu hết các trình duyệt hiện đại.

Trường số điện thoại

Một trường đặc biệt để điền vào số điện thoại có thể được tạo bằng cách sử dụng

<input type="tel" id="tel" name="tel" />
7 làm giá trị của thuộc tính
<input type="email" id="email" name="email" multiple />
6:

<input type="tel" id="tel" name="tel" />

Khi được truy cập thông qua thiết bị cảm ứng có bàn phím động, hầu hết các thiết bị sẽ hiển thị bàn phím số khi gặp phải

<input type="tel" id="tel" name="tel" />
9, có nghĩa là loại này hữu ích bất cứ khi nào một bàn phím số hữu ích và không chỉ cần sử dụng cho số điện thoại.

Ảnh chụp màn hình bàn phím Android sau đây cung cấp một ví dụ:

Hướng dẫn how many types of html5 are there? - có bao nhiêu loại html5?

Do nhiều định dạng số điện thoại trên toàn thế giới, loại trường này không thực thi bất kỳ ràng buộc nào đối với giá trị được nhập bởi người dùng (điều này có nghĩa là nó có thể bao gồm các chữ cái, v.v.).

Như chúng tôi đã đề cập trước đó, thuộc tính

<input type="search" id="search" name="search" />
7 có thể được sử dụng để thực thi các ràng buộc, mà bạn sẽ tìm hiểu về xác thực hình thức phía máy khách.

Trường URL

Một loại trường đặc biệt để nhập URL có thể được tạo bằng cách sử dụng giá trị

<input type="url" id="url" name="url" />
1 cho thuộc tính
<input type="email" id="email" name="email" multiple />
6:

<input type="url" id="url" name="url" />

Nó thêm các ràng buộc xác nhận đặc biệt vào trường. Trình duyệt sẽ báo cáo lỗi nếu không có giao thức (chẳng hạn như

<input type="url" id="url" name="url" />
3) được nhập hoặc nếu URL khác bị dị tật. Trên các thiết bị có bàn phím động, bàn phím mặc định sẽ thường hiển thị một số hoặc tất cả các dấu hai chấm, thời gian và chuyển tiếp làm khóa mặc định.

Xem bên dưới để biết ví dụ (được thực hiện trên Firefox cho Android):

Hướng dẫn how many types of html5 are there? - có bao nhiêu loại html5?

Lưu ý: Chỉ vì URL được hình thành tốt không nhất thiết có nghĩa là nó đề cập đến một vị trí thực sự tồn tại! Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists!

Trường số

Các điều khiển để nhập các số có thể được tạo bằng

<input type="email" id="email" name="email" multiple />
5
<input type="email" id="email" name="email" multiple />
6 của
<input type="url" id="url" name="url" />
6. Điều khiển này trông giống như một trường văn bản nhưng chỉ cho phép các số điểm nổi và thường cung cấp các nút ở dạng spinner để tăng và giảm giá trị của điều khiển. Trên các thiết bị có bàn phím động, bàn phím số thường được hiển thị.

Ảnh chụp màn hình sau (từ Firefox cho Android) cung cấp một ví dụ:

Hướng dẫn how many types of html5 are there? - có bao nhiêu loại html5?

Với loại đầu vào

<input type="url" id="url" name="url" />
6, bạn có thể hạn chế các giá trị tối thiểu và tối đa được phép bằng cách đặt các thuộc tính
<input type="url" id="url" name="url" />
8 và
<input type="url" id="url" name="url" />
9.

Bạn cũng có thể sử dụng thuộc tính

<input type="number" name="age" id="age" min="1" max="10" step="2" />
0 để đặt mức tăng và giảm tăng do nhấn các nút spinner. Theo mặc định, loại đầu vào số chỉ xác thực nếu số là số nguyên. Để cho phép số float, chỉ định
<input type="number" name="age" id="age" min="1" max="10" step="2" />
1. Nếu bị bỏ qua, giá trị
<input type="number" name="age" id="age" min="1" max="10" step="2" />
0 mặc định là
<input type="number" name="age" id="age" min="1" max="10" step="2" />
3, có nghĩa là chỉ các số toàn bộ là hợp lệ.

Hãy xem xét một số ví dụ. Cái đầu tiên bên dưới tạo ra một điều khiển số có giá trị bị giới hạn ở bất kỳ giá trị nào giữa

<input type="number" name="age" id="age" min="1" max="10" step="2" />
3 và
<input type="number" name="age" id="age" min="1" max="10" step="2" />
5, và các nút tăng và giảm thay đổi giá trị của nó bằng
<input type="number" name="age" id="age" min="1" max="10" step="2" />
6.

<input type="number" name="age" id="age" min="1" max="10" step="2" />

Cái thứ hai tạo ra một điều khiển số có giá trị bị giới hạn ở bất kỳ giá trị nào trong khoảng từ

<input type="number" name="age" id="age" min="1" max="10" step="2" />
7 và
<input type="number" name="age" id="age" min="1" max="10" step="2" />
3 và các nút tăng và giảm thay đổi giá trị của nó bằng
<input type="number" name="age" id="age" min="1" max="10" step="2" />
9.

<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />

Loại đầu vào

<input type="url" id="url" name="url" />
6 có ý nghĩa khi phạm vi giá trị hợp lệ bị hạn chế, ví dụ độ tuổi hoặc chiều cao của một người. Nếu phạm vi quá lớn để tăng gia tăng để có ý nghĩa (chẳng hạn như mã ZIP của Hoa Kỳ, nằm trong khoảng từ
<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />
1 đến
<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />
2), loại
<input type="tel" id="tel" name="tel" />
7 có thể là một lựa chọn tốt hơn; Nó cung cấp bàn phím số trong khi từ bỏ tính năng UI spinner của số.

Điều khiển thanh trượt

Một cách khác để chọn một số là sử dụng một thanh trượt. Bạn thấy những điều này khá thường xuyên trên các trang web như các trang web mua nhà nơi bạn muốn đặt giá tài sản tối đa để lọc theo. Chúng ta hãy xem một ví dụ trực tiếp để minh họa điều này:slider. You see these quite often on sites like house-buying sites where you want to set a maximum property price to filter by. Let's look at a live example to illustrate this:

Sử dụng khôn ngoan, thanh trượt kém chính xác hơn các trường văn bản. Do đó, chúng được sử dụng để chọn một số có giá trị chính xác không nhất thiết là quan trọng.

Một thanh trượt được tạo bằng cách sử dụng

<input type="email" id="email" name="email" multiple />
5 với thuộc tính
<input type="email" id="email" name="email" multiple />
6 được đặt thành giá trị
<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />
6. Tấm trượt có thể được di chuyển qua chuột hoặc chạm vào, hoặc với các mũi tên của bàn phím.

Điều quan trọng là phải cấu hình đúng thanh trượt của bạn. Cuối cùng, bạn rất khuyến khích bạn đặt các thuộc tính

<input type="url" id="url" name="url" />
8,
<input type="url" id="url" name="url" />
9 và
<input type="number" name="age" id="age" min="1" max="10" step="2" />
0 đặt các giá trị tối thiểu, tối đa và tăng tương ứng.

Chúng ta hãy xem mã đằng sau ví dụ trên, để bạn có thể thấy nó được thực hiện như thế nào. Trước hết, HTML cơ bản:

<label for="price">Choose a maximum house price: label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price">output>

Ví dụ này tạo ra một thanh trượt có giá trị có thể nằm trong khoảng từ

<label for="price">Choose a maximum house price: label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price">output>
0 và
<label for="price">Choose a maximum house price: label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price">output>
1, tăng/giảm 100 lần. Chúng tôi đã cung cấp cho nó giá trị mặc định là
<label for="price">Choose a maximum house price: label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price">output>
2, sử dụng thuộc tính
<label for="price">Choose a maximum house price: label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price">output>
3.

Một vấn đề với các thanh trượt là họ không cung cấp bất kỳ loại phản hồi trực quan nào về giá trị hiện tại là gì. Đây là lý do tại sao chúng tôi đã bao gồm một phần tử

<label for="price">Choose a maximum house price: label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price">output>
4 để chứa giá trị hiện tại. Bạn có thể hiển thị giá trị đầu vào hoặc đầu ra của tính toán bên trong bất kỳ phần tử nào, nhưng
<label for="price">Choose a maximum house price: label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price">output>
4 rất đặc biệt - như
<label for="price">Choose a maximum house price: label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price">output>
6 - và nó có thể lấy thuộc tính
<label for="price">Choose a maximum house price: label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price">output>
7 cho phép bạn liên kết nó với phần tử hoặc phần tử mà giá trị đầu ra đến.

Để thực sự hiển thị giá trị hiện tại và cập nhật nó khi nó thay đổi, bạn phải sử dụng JavaScript, nhưng điều này tương đối dễ làm:

const price = document.querySelector("#price");
const output = document.querySelector(".price-output");

output.textContent = price.value;

price.addEventListener("input", () => {
  output.textContent = price.value;
});

Ở đây chúng tôi lưu trữ các tham chiếu đến đầu vào

<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />
6 và
<label for="price">Choose a maximum house price: label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price">output>
9 trong hai biến. Sau đó, chúng tôi ngay lập tức đặt ____ 79 của
const price = document.querySelector("#price");
const output = document.querySelector(".price-output");

output.textContent = price.value;

price.addEventListener("input", () => {
  output.textContent = price.value;
});
1 thành
<label for="price">Choose a maximum house price: label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price">output>
3 hiện tại của đầu vào. Cuối cùng, một trình nghe sự kiện được đặt để đảm bảo rằng bất cứ khi nào thanh trượt phạm vi được di chuyển, ________ 79 của
const price = document.querySelector("#price");
const output = document.querySelector(".price-output");

output.textContent = price.value;

price.addEventListener("input", () => {
  output.textContent = price.value;
});
1 được cập nhật lên giá trị mới.

Lưu ý: Có một hướng dẫn hay bao gồm chủ đề này trên các thủ thuật CSS: phần tử đầu ra. There is a nice tutorial covering this subject on CSS Tricks: The Output Element.

Người chọn ngày và giờ

Thu thập các giá trị ngày và thời gian theo truyền thống là một cơn ác mộng cho các nhà phát triển web. Đối với trải nghiệm người dùng tốt, điều quan trọng là cung cấp giao diện người dùng chọn lịch, cho phép người dùng chọn ngày mà không cần phải chuyển đổi ngữ cảnh sang ứng dụng lịch gốc hoặc có khả năng nhập chúng theo các định dạng khác nhau khó phân tích. Phút cuối cùng của thiên niên kỷ trước có thể được thể hiện theo các cách khác nhau, ví dụ: 1999/12/31, 23:59 hoặc 12/31/99T11: 59pm.

Các điều khiển ngày HTML có sẵn để xử lý loại dữ liệu cụ thể này, cung cấp các tiện ích lịch và làm cho bộ đồng nhất dữ liệu.

Kiểm soát ngày và thời gian được tạo bằng phần tử

<input type="email" id="email" name="email" multiple />
5 và giá trị phù hợp cho thuộc tính
<input type="email" id="email" name="email" multiple />
6, tùy thuộc vào việc bạn muốn thu thập ngày, thời gian hoặc cả hai. Đây là một ví dụ trực tiếp rơi trở lại các yếu tố
const price = document.querySelector("#price");
const output = document.querySelector(".price-output");

output.textContent = price.value;

price.addEventListener("input", () => {
  output.textContent = price.value;
});
7 trong các trình duyệt không hỗ trợ:

Hãy xem xét các loại có sẵn khác nhau một cách ngắn gọn. Lưu ý rằng việc sử dụng các loại này khá phức tạp, đặc biệt là xem xét hỗ trợ trình duyệt (xem bên dưới); Để tìm hiểu các chi tiết đầy đủ, hãy theo các liên kết dưới đây đến các trang tham chiếu cho từng loại, bao gồm các ví dụ chi tiết.

const price = document.querySelector("#price"); const output = document.querySelector(".price-output"); output.textContent = price.value; price.addEventListener("input", () => { output.textContent = price.value; }); 8

const price = document.querySelector("#price");
const output = document.querySelector(".price-output");

output.textContent = price.value;

price.addEventListener("input", () => {
  output.textContent = price.value;
});
9 tạo một tiện ích để hiển thị và chọn một ngày với thời gian không có thông tin múi giờ cụ thể.

<input type="datetime-local" name="datetime" id="datetime" />

0

<input type="datetime-local" name="datetime" id="datetime" />
1 tạo ra một tiện ích để hiển thị và chọn một tháng với một năm.

<input type="email" id="email" name="email" multiple />
0

2

<input type="datetime-local" name="datetime" id="datetime" />
3 Tạo một tiện ích để hiển thị và chọn giá trị thời gian. Trong khi thời gian có thể hiển thị ở định dạng 12 giờ, giá trị được trả về ở định dạng 24 giờ.

<input type="email" id="email" name="email" multiple />
1

4

<input type="datetime-local" name="datetime" id="datetime" />
5 tạo ra một tiện ích để hiển thị và chọn một số tuần và năm của nó.

Tuần bắt đầu vào thứ Hai và chạy đến Chủ nhật. Ngoài ra, tuần đầu tiên 1 của mỗi năm chứa vào thứ Năm đầu tiên của năm đó - có thể không bao gồm ngày đầu tiên của năm hoặc có thể bao gồm vài ngày cuối cùng của năm trước.

<input type="email" id="email" name="email" multiple />
2

Rõ ràng các giá trị ngày/thời gian

Tất cả các điều khiển ngày và thời gian có thể bị hạn chế bằng cách sử dụng các thuộc tính

<input type="url" id="url" name="url" />
8 và
<input type="url" id="url" name="url" />
9, với các ràng buộc có thể xảy ra thông qua thuộc tính
<input type="number" name="age" id="age" min="1" max="10" step="2" />
0 (có giá trị thay đổi tùy theo loại đầu vào).

<input type="email" id="email" name="email" multiple />
3

Kiểm soát bộ chọn màu

Màu sắc luôn là một chút khó xử lý. Có nhiều cách để thể hiện chúng: các giá trị RGB (thập phân hoặc thập lục phân), giá trị HSL, từ khóa, v.v.

Điều khiển

<input type="datetime-local" name="datetime" id="datetime" />
9 có thể được tạo bằng phần tử
<input type="email" id="email" name="email" multiple />
5 với thuộc tính
<input type="email" id="email" name="email" multiple />
6 được đặt thành giá trị
<input type="datetime-local" name="datetime" id="datetime" />
9:

<input type="email" id="email" name="email" multiple />
4

Nhấp vào điều khiển màu thường hiển thị chức năng chọn màu mặc định của hệ điều hành để bạn chọn.

Đây là một ví dụ trực tiếp để bạn thử:

Giá trị được trả về luôn là màu thập lục phân 6 giá trị chữ thường.

Kiểm tra kỹ năng của bạn!

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra kỹ năng của bạn: Điều khiển HTML5.

Bản tóm tắt

Điều đó đưa chúng ta đến cuối chuyến tham quan các loại đầu vào mẫu HTML5. Có một vài loại kiểm soát khác không thể dễ dàng nhóm lại với nhau do các hành vi rất cụ thể của chúng, nhưng điều đó vẫn rất cần thiết để biết. Chúng tôi bao gồm những người trong bài viết tiếp theo.

  • Trước
  • Tổng quan: Hình thức
  • Tiếp theo

Trong mô -đun này

Chủ đê nâng cao

Có bao nhiêu loại HTML5?

Có gần 13 loại đầu vào mới được giới thiệu ở dạng HTML5. Chúng ta sẽ thấy tất cả các loại đầu vào và hiểu từng cái một. Thuộc tính loại đầu vào: Màu: Loại đầu vào này cho phép người dùng chọn màu từ bộ chọn màu.almost 13 new input types introduced in HTML5 form. We will see all the input types & understand them one by one. Input Type attributes: color: This input type allows the user to select a color from a color picker.

Các loại HTML5 là gì?

Các loại đầu vào HTML5..
Trường địa chỉ e-mail. Loại trường này được đặt bằng cách sử dụng email giá trị cho thuộc tính loại: ....
Trường tìm kiếm. Các trường tìm kiếm được dự định sẽ được sử dụng để tạo các hộp tìm kiếm trên các trang và ứng dụng. ....
Trường số điện thoại. ....
Trường URL. ....
DateTime-local. ....
tháng. ....
thời gian. ....

Sẽ có một HTML6?

HTML6 đang trên đường.Whatwg - Cơ thể điều chỉnh các thông số kỹ thuật HTML sẽ thay đổi thông số kỹ thuật HTML liên tục theo thời gian, không rộng cùng một lúc (như các nguồn nói).Trong bài viết này, chúng ta sẽ xem xét những gì mọi thứ có thể sẽ thay đổi nhất trong HTML6 và những gì mới trong HTML6.. WHATWG – The body that regulates HTML specifications will be changing HTML specifications continually over time, not broad at once (as sources say). In this article, we are going to take a look at what things would most probably be changing in HTML6 and what's new in HTML6.

Loại đầu vào HTML5 mới là gì?

HTML 5 giới thiệu một số loại đầu vào như ngày, DateTime-local, thời gian, tuần, tháng, email, tel, url, tìm kiếm, phạm vi, màu sắc và số.Để cải thiện trải nghiệm người dùng và để làm cho các biểu mẫu tương tác nhiều hơn.Tuy nhiên, nếu một trình duyệt không nhận ra các loại đầu vào mới này, nó sẽ coi chúng như một hộp văn bản thông thường.Date, DateTime-local, time, week, month, email, tel, URL, search, range, color and number. To improve the user experience and to make the forms more interactive. However, if a browser failed to recognize these new input types, it will treat them like a normal text box.