Thuộc tính phần tử HTML có thể cải thiện <form> và các tùy chọn kiểm soát biểu mẫu.
Giúp người dùng điền các chế độ kiểm soát biểu mẫu
Để giúp người dùng điền vào biểu mẫu dễ dàng hơn, hãy sử dụng thuộc tính type thích hợp cho các phần tử <input>.
Trình duyệt cho thấy giao diện người dùng phù hợp với type, chẳng hạn như bộ chọn ngày cho <input> thuộc loại date.
Các trình duyệt trên thiết bị di động sẽ hiển thị bàn phím ảo được điều chỉnh, chẳng hạn như bàn phím số điện thoại cho type="tel".
Một số loại <input> cũng thay đổi quy tắc xác thực cho một phần tử khi biểu mẫu của phần tử đó được gửi.
Ví dụ: <input type="url"> chỉ hợp lệ nếu không trống và giá trị là một URL.
Đảm bảo người dùng nhập dữ liệu
Có nhiều thuộc tính để cung cấp bàn phím ảo phù hợp trên thiết bị cảm ứng.
Lựa chọn đầu tiên là sử dụng thuộc tính type, như đã đề cập ở trên.
Một lựa chọn khác là thuộc tính inputmode được hỗ trợ trên
Android và iOS.
Khác với thuộc tính type, thuộc tính inputmode chỉ thay đổi bàn phím ảo được cung cấp, chứ không thay đổi hành vi của chính phần tử đó. Việc sử dụng inputmode là một lựa chọn phù hợp nếu bạn muốn giữ lại giao diện người dùng mặc định và các quy tắc xác thực mặc định của <input>, nhưng vẫn muốn có bàn phím ảo được tối ưu hoá.
Bạn có thể thay đổi phím Enter trên bàn phím ảo bằng thuộc tính enterkeyhint.
Ví dụ: enterkeyhint="next" hoặc enterkeyhint="done" sẽ thay đổi nhãn nút thành một biểu tượng phù hợp.
Điều này giúp người dùng hiểu rõ hơn về những gì sẽ xảy ra khi họ gửi biểu mẫu hiện tại.
Đảm bảo người dùng có thể gửi biểu mẫu
Giả sử bạn điền vào <form>, nhấp vào nút Gửi nhưng không có gì xảy ra.
Vấn đề có thể là do nút này đã bị tắt bằng thuộc tính disabled.
Đó là một cách làm phổ biến để vô hiệu hóa nút Submit (Gửi) cho đến khi biểu mẫu hợp lệ.
Về lý thuyết, điều này nghe có vẻ hợp lý, nhưng bạn không nên tắt nút Submit (Gửi) trong khi chờ thông tin người dùng nhập đầy đủ và hợp lệ. Thay vào đó, hãy đánh dấu dữ liệu không hợp lệ khi nhập và đánh dấu các trường có vấn đề cho người dùng khi họ gửi biểu mẫu.
Tuy nhiên, bạn nên tắt nút Submit (Gửi) sau khi biểu mẫu được gửi thành công nhưng biểu mẫu chưa được xử lý. Tìm hiểu thêm về các nút bị tắt.
Giúp người dùng bằng cách cho thấy dữ liệu mà họ đã nhập trước đó
Giả sử bạn có một biểu mẫu thanh toán gồm nhiều bước.
Làm cách nào để bạn đảm bảo các giá trị đã nhập trước đó vẫn còn khi người dùng quay lại bước trước đó?
Sử dụng thuộc tính value để hiển thị các giá trị đã hoàn tất.
<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">
Có nhiều cách để truy xuất giá trị của một tuỳ chọn kiểm soát biểu mẫu trong JavaScript.
Bạn có thể sử dụng thuộc tính value hoặc truy cập vào giá trị bằng getAttribute('value').
Có một điểm khác biệt lớn là thuộc tính value luôn trả về giá trị hiện tại và việc sử dụng getAttribute() sẽ luôn trả về giá trị ban đầu.
Hãy dùng thử!
Thay đổi văn bản của trường tên và xem bảng điều khiển.
Hãy lưu ý cách thuộc tính value trả về văn bản hiển thị hiện tại, trong khi getAttribute('value') luôn trả về giá trị ban đầu.
Tìm hiểu thêm về sự khác biệt giữa thuộc tính DOM và tài sản DOM.
Đối với các phần tử <input> thuộc loại checkbox hoặc radio, hãy sử dụng thuộc tính checked.
Thêm thành phần này nếu người dùng đã chọn một tuỳ chọn và xoá tuỳ chọn đó nếu không.
Đảm bảo người dùng hiểu được định dạng mong muốn
Giá trị của thuộc tính placeholder là gợi ý về loại thông tin được mong đợi.
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">
Điều này có thể khiến người dùng nhầm lẫn vì có vẻ không hợp lý khi một thành phần kiểm soát biểu mẫu dường như đã được điền sẵn. Ngoài ra, việc thêm phần giữ chỗ có thể gây khó khăn cho việc biết những trường nào trong biểu mẫu vẫn cần phải được hoàn tất. Hơn nữa, kiểu văn bản giữ chỗ mặc định có thể khó đọc.
Nhìn chung, hãy thận trọng khi sử dụng thuộc tính placeholder và tuyệt đối không dùng thuộc tính placeholder để giải thích các chế độ kiểm soát biểu mẫu.
Thay vào đó, hãy sử dụng phần tử <label>.
Tìm hiểu thêm về lý do bạn nên cân nhắc tránh thuộc tính placeholder.
Một cách hiệu quả hơn để cung cấp cho người dùng gợi ý về loại thông tin dự kiến là sử dụng phần tử HTML bổ sung ở bên dưới mục điều khiển biểu mẫu để thêm nội dung giải thích hoặc ví dụ.
Đảm bảo các thành phần kiểm soát biểu mẫu đã sẵn sàng để xác thực
Có nhiều thuộc tính HTML có sẵn để kích hoạt tính năng xác thực tích hợp sẵn.
Dùng thuộc tính required để ngăn việc gửi các trường trống.
Có thể thực thi các quy trình xác thực bổ sung bằng thuộc tính type.
Ví dụ: giá trị của <input> bắt buộc là type="url" phải là một URL.
Để đảm bảo người dùng nhập số lượng ký tự tối thiểu, hãy sử dụng thuộc tính minlength.
Để không cho phép bất kỳ giá trị nào có số lượng ký tự nhiều hơn tối đa, hãy sử dụng thuộc tính maxlength.
Đối với các loại dữ liệu đầu vào dạng số như <input type="number">, hãy sử dụng thuộc tính min và max.
Tìm hiểu thêm về việc xác thực: Giúp người dùng nhập đúng dữ liệu vào biểu mẫu.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về các thuộc tính biểu mẫu
Bạn có thể dùng thuộc tính nào để thay đổi nhãn của phím Enter trên bàn phím ảo?
enterkeyenterkeyhintenterkeytextenterkeylabelSự khác biệt giữa thuộc tính value và getAttribute('value') là gì?
value trả về giá trị hiện tại, getAttribute('value') trả về giá trị ban đầu.value trả về giá trị ban đầu, getAttribute('value') trả về giá trị hiện tại.value trả về khoá và giá trị, getAttribute('value') chỉ trả về giá trị.