Video: #32 Thay đổi nội dung, thuộc tính của các element HTML | JS Basics 2025
HTML5 giới thiệu các phần tử hình thức mới và cho tất cả các phần tử hình thức một vài tính năng mới. Khi bạn thiết kế và xây dựng các trang web, bạn có thể áp dụng các thuộc tính và tính năng mới cho bất kỳ thành phần biểu mẫu nào:
-
autofocus : Một phần tử với thuộc tính này là trọng tâm của đầu vào người dùng đầu tiên. Thường áp dụng thuộc tính tự động lấy nét cho phần tử đầu tiên của biểu mẫu, và chỉ có một trường ô tiêu điểm tự động trên mỗi biểu mẫu. Mã này trông giống như sau:
tên
Nếu trình duyệt không chấp nhận thuộc tính tự động lấy nét, không có gì gây hại sẽ xảy ra, và bạn vẫn có thể sử dụng một giải pháp dựa trên JavaScript.
-
mẫu : Với điều này bạn có thể chỉ định một biểu thức chính quy được sử dụng để xác nhận mẫu. Nếu nội dung phù hợp với biểu thức chính quy, trường sẽ được coi là hợp lệ. Chỉ sử dụng thuộc tính này khi các kỹ thuật xác nhận tiêu chuẩn không đủ, vì có thể khó để gỡ lỗi các biểu thức thông thường.
Trình duyệt có thể sử dụng nó như một mẹo cho người dùng. Nó cũng có thể hữu ích để thêm các thông tin mô hình như văn bản giữ chỗ.giữ chỗ
: Trình giữ chỗ hoạt động như một nhãn tạm thời cho thấy mục đích của một trường văn bản mà không yêu cầu một nhãn nhãn. Ngay khi người dùng kích hoạt trường, văn bản giữ chỗ sẽ biến mất. Một mẫu mã đơn giản:
Văn bản giữ chỗ đặc biệt hữu ích để cho biết cách định dạng đầu vào (đặc biệt nếu điều này sẽ được thực thi bằng xác nhận hợp lệ hoặc mẫu).
yêu cầu
-
: Các trình duyệt hỗ trợ sẽ đánh dấu tất cả các trường bắt buộc (có thể bằng cách tô màu đỏ) nếu không được điền. Một số trình duyệt cũng sẽ gửi một cảnh báo nếu người dùng cố gắng gửi biểu mẫu trường bắt buộc trống. Lớp đặc biệt: yêu cầu lớp giả tạo cho phép bạn áp dụng một kiểu CSS cho tất cả các yếu tố cần thiết trong biểu mẫu của bạn (ví dụ cho họ một đường viền hoặc màu nền). Dưới đây là một ví dụ về kiểu CSS để đánh dấu các phần tử yêu cầu với một đường viền màu đỏ:
: yêu cầu {border: 1px solid red;}
Nếu trường yêu cầu (có thuộc tính bắt buộc), nó sẽ bị coi là không hợp lệ nó có chứa một số giá trị.
Xác nhận:
Xác nhận hợp lệ là một trong những phần khó khăn nhất của phát triển Web. Nó khá dễ dàng để thiết lập một hình thức yêu cầu thông tin người dùng, nhưng nó có thể được khá khó khăn để chắc chắn rằng người dùng nhập thông tin chính xác. HTML5 giúp bạn ra ngoài. Khi bạn sử dụng các yếu tố đầu vào mục đích đặc biệt, trình duyệt sẽ tự động kiểm tra trường biểu mẫu để đảm bảo nó ở đúng định dạng. Nếu mục nhập không hợp lệ, biểu mẫu sẽ (thông thường) không gửi và đặc biệt: tên miền không hợp lệ của CSS sẽ liên kết với trường không hợp lệ. Đơn giản chỉ cần cung cấp CSS cho trang của bạn xử lý: trạng thái không hợp lệ:
: invalid {background-color: red;}
Khi trạng thái CSS này đang hoạt động, bất kỳ lĩnh vực không hợp lệ sẽ có kiểu dáng không hợp lệ. Ví dụ: nếu bạn có trường màu và nền CSS màu đỏ được định nghĩa ở đây, trường màu sẽ có nền màu đỏ trừ khi người dùng nhập một màu hợp lệ (tên màu được công nhận hoặc giá trị màu hex). Tương tự, trường e-mail sẽ hiển thị màu đỏ cho đến khi nhập địa chỉ e-mail hợp lệ. Bạn không cần thêm bất kỳ mã nào khác vào biểu mẫu. Đơn giản chỉ cần thêm CSS để hiển thị các mục không hợp lệ, và trình duyệt sẽ làm phần còn lại.
Bạn có thể tắt tính xác nhận cho bất kỳ trường nào bằng cách thêm thuộc tính novalidate vào phần tử đó.
Có thể trình duyệt sẽ từ chối xử lý một biểu mẫu cho đến khi tất cả các trường được xác nhận nhưng hành vi này vẫn chưa phổ biến trong số các trình duyệt tuân theo chuẩn HTML5.
