HTML có 30 thuộc tính nên sử dụng | Thiết kế web kết hợp ERP

Nội dung

Biểu mẫu HTML đã tồn tại từ rất lâu, nhưng thành thật mà nói, hầu hết các nhà phát triển vẫn đang viết những biểu mẫu cơ bản mà họ đã học từ nhiều năm trước. Trong khi đó, HTML đã âm thầm bổ sung các thuộc tính mạnh mẽ có thể giúp bạn tiết kiệm hàng tấn JavaScript. Tôi đang nói về việc xác thực, cải thiện trải nghiệm người dùng và các tính năng trợ năng đã có sẵn, sẵn sàng sử dụng.

Chúng được hỗ trợ tốt, thiết thực và sẽ giúp biểu mẫu của bạn tốt hơn ngay hôm nay.

Lưu ý:Danh sách hỗ trợ trình duyệt hiển thị phiên bản tối thiểu. Hầu hết các thuộc tính đều hoạt động trên tất cả các trình duyệt hiện đại.

Trước khi đi sâu hơn, đây là ví dụ mã đầy đủ dành cho bạn:

1.`autocomplete`

Điều này cho trình duyệt biết loại dữ liệu nào sẽ được đưa vào một trường để trình duyệt có thể tự động điền một cách thông minh.

< input  type = "email" name = "email" autocomplete = "email" > 
< input  type = "tel" name = "phone" autocomplete = "tel" > 
< input  type = "text" name = "cc-number" autocomplete = "cc-number" >

Người dùng thích tính năng tự động điền. Đừng bắt họ nhập email đến lần thứ một trăm. Hãy sử dụng các giá trị tự động điền phù hợp nhưemail,tel,street-address,cc-number,bday, và hàng chục giá trị khác nữa.

Hỗ trợ trình duyệt:Hỗ trợ phổ biến trên tất cả các trình duyệt hiện đại. Chrome 17+, Firefox 4+, Safari 5.1+, Edge 12+

2.`autofocus`

Tự động tập trung vào một mục nhập khi trang tải xong. Hoàn hảo cho hộp tìm kiếm hoặc biểu mẫu đăng nhập.

< kiểu đầu vào  = "văn bản" tên = "tìm kiếm" tự động lấy nét>

Hãy sử dụng tính năng này một cách tiết kiệm. Chỉ lấy nét tự động một trường và đảm bảo đó là trường mà người dùng thực sự muốn tương tác trước tiên.

Hỗ trợ trình duyệt:Chrome 5+, Firefox 4+, Safari 5+, Edge 12+, IE 10+

3.`inputmode`

Cho thiết bị di động biết nên hiển thị bàn phím nào. Điều này rất quan trọng đối với trải nghiệm người dùng trên thiết bị di động.

< kiểu đầu vào  = "văn bản" chế độ đầu vào = "số" > < kiểu đầu vào = "văn bản" chế độ đầu vào = "thập phân" > < kiểu đầu vào = "văn bản" chế độ đầu vào = "email" > < kiểu đầu vào = "văn bản" chế độ đầu vào = "url" >

Ngay cả khi bạn sử dụngtype="text"vì lý do xác thực,inputmodenó vẫn cung cấp cho người dùng thiết bị di động bàn phím phù hợp. Sử dụngnumericcho mã PIN,decimalgiá cả,emailemail.

Hỗ trợ trình duyệt:Chrome 66+, Firefox 95+, Safari 12.1+, Edge 79+, iOS Safari 12.2+

4.`pattern`

Xác thực tùy chỉnh bằng regex. Tính năng này cực kỳ mạnh mẽ.

< input  type = "text" pattern= "[0-9]{4}" placeholder= "Mã PIN (4 chữ số)" > 
< input  type = "text" pattern= "[A-Za-z]{3,}" placeholder= "Ít nhất 3 chữ cái" >

Trình duyệt sẽ xác thực theo mẫu của bạn và hiển thị thông báo lỗi nếu không khớp. Sử dụngtitlethuộc tính để hiển thị thông báo lỗi hữu ích.

Hỗ trợ trình duyệt:Chrome 10+, Firefox 4+, Safari 10.1+, Edge 12+, IE 10+

5.`title`(có mẫu)

Khi sử dụng vớipattern,titlesẽ trở thành thông báo lỗi.

< input  type = "text" 
        pattern= "[0-9]{4}" 
        title= "Vui lòng nhập chính xác 4 chữ số" >

Đừng bỏ qua bước này. Thông báo lỗi mặc định rất tệ. Hãy cung cấp cho người dùng phản hồi hữu ích.

Hỗ trợ trình duyệt:Hỗ trợ chung trên mọi trình duyệt

6.`minlength`và`maxlength`

Đặt giới hạn ký tự tối thiểu và tối đa. Không chỉ để xác thực, mà trình duyệt còn hiển thị bộ đếm ký tự trong một số trường hợp.

< kiểu nhập  = "văn bản" độ dài tối thiểu = "3" độ dài tối đa = "20" >   
< vùng văn bản  độ dài tối thiểu = "10"  độ dài tối đa = "500" > </ vùng văn bản >

Người dùng sẽ nhận được phản hồi ngay lập tức nếu họ cố gắng gửi nội dung quá ngắn hoặc quá dài.

Hỗ trợ trình duyệt:

maxlength: Hỗ trợ toàn cầu (Chrome 4+, Firefox 4+, Safari 5+, IE 10+)
minlength: Chrome 40+, Firefox 51+, Safari 10.1+, Edge 17+ (Không hỗ trợ IE)

7.`min`và`max`

Đối với dữ liệu đầu vào là số và ngày tháng, hãy đặt ranh giới.

< kiểu đầu vào  = "số" min = "1" max = "100" > < kiểu đầu vào = "ngày" min = "2025-01-01" max = "2025-12-31" > < kiểu đầu vào = "thời gian" min = "09:00" max = "17:00" >

Trình duyệt sẽ không cho phép người dùng chọn các giá trị không hợp lệ. Không cần JavaScript.

Hỗ trợ trình duyệt:Chrome 10+, Firefox 16+, Safari 5+, Edge 12+, IE 10+

8.`step`

Kiểm soát mức tăng cho đầu vào số và bộ chọn ngày/giờ.

< input  type = "number"  step = "0.01"  placeholder = "Price" > 
< input  type = "time"  step = "900" >  <!-- Khoảng thời gian 15 phút --> 
< input  type = "range"  min = "0"  max = "100"  step = "5" >

Sử dụngstep="0.01"cho tiền tệ,step="any"cho số thập phân mà không có hạn chế nào.

Hỗ trợ trình duyệt:Chrome 6+, Firefox 16+, Safari 5+, Edge 12+, IE 10+

9.`multiple`

Cho phép tải lên nhiều tệp hoặc nhiều địa chỉ email.

< input  type = "file" nhiều> 
< input  type = "email" nhiều placeholder = "Phân tách email bằng dấu phẩy" >

Đối với dữ liệu đầu vào là tệp, người dùng có thể chọn nhiều tệp cùng lúc. Đối với dữ liệu đầu vào là email, trình duyệt sẽ xác thực từng email trong danh sách được phân tách bằng dấu phẩy.

Hỗ trợ trình duyệt:Chrome 6+, Firefox 3.6+, Safari 4+, Edge 12+, IE 10+

10.`accept`

Hạn chế nhập tệp vào các loại tệp cụ thể.

< kiểu đầu vào  = "tệp" chấp nhận = "hình ảnh/*" > < kiểu đầu vào = "tệp" chấp nhận = ".pdf,.doc,.docx" > < kiểu đầu vào = "tệp" chấp nhận = "hình ảnh/png,hình ảnh/jpeg" >

Sử dụngimage/*cho bất kỳ hình ảnh,video/*video hoặc loại MIME và phần mở rộng cụ thể nào. Trình chọn tệp sẽ lọc theo đó.

Hỗ trợ trình duyệt:Chrome 16+, Firefox 9+, Safari 6+, Edge 12+, IE 10+

11.`formnovalidate`

Bỏ qua xác thực cho nút gửi cụ thể. Rất hữu ích cho nút “Lưu bản nháp”.

<button type = "submit" >Gửi</button> 
<button type = "submit" formnovalidate>Lưu bản nháp</button>

Biểu mẫu sẽ được xác thực khi gửi bình thường nhưng bỏ qua xác thực khi lưu bản nháp.

Hỗ trợ trình duyệt:Chrome 10+, Firefox 4+, Safari 10.1+, Edge 12+, IE 10+

12.`formaction`

Thay đổi nơi gửi biểu mẫu khi sử dụng một nút cụ thể.

< form  action = "/save" > 
  < button  type = "submit" > Lưu </ button > 
  < button  type = "submit"  formaction = "/preview" > Xem trước </ button > 
</ form >

Các nút khác nhau có thể gửi đến các điểm cuối khác nhau mà không cần JavaScript.

Hỗ trợ trình duyệt:Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE 10+

13.`formmethod`

Ghi đè phương thức của biểu mẫu cho một nút cụ thể.

< form  method = "get"  action = "/search" > 
  < button  type = "submit" > Tìm kiếm </ button > 
  < button  type = "submit"  formmethod = "post" > Lưu tìm kiếm </ button > 
</ form >

Cho phép các nút khác nhau sử dụng các phương thức HTTP khác nhau (GET hoặc POST).

Hỗ trợ trình duyệt:Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE 10+

14.`formenctype`

Ghi đè kiểu mã hóa của biểu mẫu cho nút gửi cụ thể.

< form > 
  < input  type = "text"  name = "title" > 
  < button  type = "submit" > Lưu văn bản </ button > 
  < button  type = "submit"  formenctype = "multipart/form-data" > Tải tệp lên </ button > 
</ form >

Sử dụng tùy chọn này khi một nút cần xử lý việc tải tệp lên nhưng các nút khác thì không.

Hỗ trợ trình duyệt:Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE 10+

15.`formtarget`

Chỉ định nơi hiển thị phản hồi cho nút gửi cụ thể.

< form  action = "/submit" > 
  < button  type = "submit" > Gửi </ button > 
  < button  type = "submit"  formtarget = "_blank" > Gửi trong Tab mới </ button > 
</ form >

Giá trị bao gồm_self,_blank,_parent,_top, hoặc một khung được đặt tên. Hữu ích cho các nút xem trước hoặc khi bạn muốn giữ trang hiện tại mở.

Hỗ trợ trình duyệt:Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE 10+

16.`readonly`

Làm cho đầu vào không thể thay đổi nhưng vẫn gửi giá trị của nó. Khác vớidisabled.

< kiểu đầu vào = "văn bản" giá trị = "Đơn hàng #12345"  chỉ đọc >

Sử dụngreadonlykhi bạn muốn giá trị được gửi đi nhưng không muốn người dùng thay đổi nó. Sử dụngdisabledkhi bạn không muốn giá trị được gửi đi chút nào.

Hỗ trợ trình duyệt:Hỗ trợ chung trên mọi trình duyệt

17.`placeholder`

Hiển thị văn bản gợi ý bên trong đầu vào. Có thể bạn đã sử dụng tính năng này rồi, nhưng hãy sử dụng đúng cách.

< kiểu đầu vào  = "email" giữ chỗ = "bạn@example.com" >

Không sử dụng placeholder để thay thế nhãn. Placeholder sẽ biến mất khi người dùng bắt đầu nhập. Luôn sử dụng<label>các phần tử phù hợp.

Hỗ trợ trình duyệt:Chrome 10+, Firefox 4+, Safari 5+, Edge 12+, IE 10+

18.`list`và`<datalist>`

Tạo danh sách thả xuống các gợi ý mà người dùng có thể chọn hoặc bỏ qua.

< input  type = "text"  list = "browsers" > 
< datalist  id = "browsers" > 
  < option  value = "Chrome" > 
  < option  value = "Firefox" > 
  < option  value = "Safari" > 
  < option  value = "Edge" > 
</ datalist >

Giống như tính năng tự động hoàn thành nhưng bạn kiểm soát các gợi ý. Người dùng có thể tự do nhập hoặc chọn từ danh sách của bạn.

Hỗ trợ trình duyệt:Chrome 20+, Firefox 4+, Safari 12.1+, Edge 12+ (Không hỗ trợ IE)

19.`spellcheck`

Kiểm soát xem trình duyệt có kiểm tra chính tả trường này hay không.

< textarea  spellcheck = "true" > </ textarea > 
< input  type = "text"  name = "code"  spellcheck = "false" >

Tắt tính năng này khi nhập mã, tên người dùng hoặc các trường kỹ thuật. Giữ nguyên tính năng này khi nhập văn bản và nội dung.

Hỗ trợ trình duyệt:Chrome 10+, Firefox 2+, Safari 3.1+, Edge 12+, IE 10+

20.`enterkeyhint`

Thay đổi nhãn phím Enter trên bàn phím di động.

< input  type = "tìm kiếm" enterkeyhint = "tìm kiếm" > 
< input  type = "văn bản" enterkeyhint = "tiếp theo" > 
<textarea enterkeyhint = "gửi" ></textarea>

Các giá trị bao gồmenter,done,go,next,previous,search,send. Điều này chỉ dành cho trải nghiệm người dùng trên thiết bị di động nhưng tạo ra sự khác biệt lớn.

Hỗ trợ trình duyệt:Chrome 77+, Firefox 94+, Safari 13.1+, Edge 79+, iOS Safari 13.4+

21.`dirname`

Tự động gửi hướng văn bản đầu vào. Rất quan trọng đối với các biểu mẫu quốc tế.

<input type = "text" name = "comment"  dirname = "comment.dir" >

Khi biểu mẫu được gửi, nó sẽ bao gồm cảcomment(giá trị) vàcomment.dir(hoặcltr)rtl. Điều cần thiết để xử lý đúng các ngôn ngữ viết từ phải sang trái như tiếng Ả Rập hoặc tiếng Do Thái.

Hỗ trợ trình duyệt:Chrome 17+, Safari 6+, Edge 79+ (Không hỗ trợ Firefox hoặc IE)

22.`form`

Liên kết đầu vào với biểu mẫu ngay cả khi nó nằm ngoài<form>phần tử.

<form id = "myForm" action = "/submit" > 
  <input type = "text" name = "username" > 
</form>

<input type="email" name="email" form="myForm"> 
<button type="submit" form="myForm">Gửi</button>

Hữu ích khi biểu mẫu của bạn nằm ở một phần của trang nhưng bạn cần nhập dữ liệu hoặc nút ở nơi khác.formThuộc tính này sẽ liên kết chúng lại với nhau.

Hỗ trợ trình duyệt:Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, IE 11+

23.`capture`

Đối với đầu vào tệp di động, hãy mở trực tiếp camera thay vì trình chọn tệp.

< input  type = "file" accept = "image/*" capture = "environment" > 
< input  type = "file" accept = "video/*" capture = "user" >

Dùngcapture="user"cho camera trước,capture="environment"camera sau. Hoàn hảo cho các ứng dụng mà người dùng cần chụp ảnh hoặc quay video trực tiếp.

Trình duyệt hỗ trợ:Chrome 53+ (Android), Safari 11+ (iOS), Samsung Internet 6.2+. Trình duyệt máy tính để bàn bỏ qua thuộc tính này.

24.`novalidate`

Vô hiệu hóa xác thực HTML5 cho toàn bộ biểu mẫu.

< form  novalidate > 
  < input  type = "email"  required > 
  < button  type = "submit" > Gửi </ button > 
</ form >

Sử dụng tùy chọn này khi bạn xử lý xác thực hoàn toàn bằng JavaScript hoặc muốn triển khai logic xác thực tùy chỉnh.

Hỗ trợ trình duyệt:Chrome 10+, Firefox 4+, Safari 10.1+, Edge 12+, IE 10+

25.`autocapitalize`

Kiểm soát việc viết hoa tự động trên bàn phím di động.

< input  type = "text" autocapitalize= "words" > 
< input  type = "text" autocapitalize= "sentences" > 
< input  type = "email" autocapitalize= "none" >

Giá trị:none,sentences,words,characters. Sử dụngnonecho email và tên người dùng,wordscho tên,sentencescho văn bản thông thường.

Trình duyệt hỗ trợ:Safari 5+ (iOS), Chrome 43+, Edge 79+. Firefox không hỗ trợ thuộc tính này.

26.`size`

Đặt chiều rộng hiển thị của đầu vào theo ký tự.

< kiểu đầu vào  = "văn bản" kích thước = "30" > < kiểu đầu vào = "văn bản" kích thước = "5" chỗ giữ chỗ = "Mã" >

Tùy chọn này không giới hạn dữ liệu đầu vào, mà chỉ kiểm soát độ rộng hiển thị. Sử dụngmaxlengthnếu bạn muốn giới hạn độ dài dữ liệu đầu vào thực tế.

Hỗ trợ trình duyệt:Hỗ trợ chung trên mọi trình duyệt

27.`cols`và`rows`

Kiểm soát kích thước hiển thị của vùng văn bản.

< textarea  cols = "50"  rows = "10" > </ textarea >

colsthiết lập chiều rộng tính bằng ký tự,rowsthiết lập chiều cao tính bằng dòng. Người dùng vẫn có thể thay đổi kích thước nếu bạn không thiết lập CSS để ngăn chặn điều này.

Hỗ trợ trình duyệt:Hỗ trợ chung trên mọi trình duyệt

28.`wrap`

Kiểm soát cách ngắt dòng văn bản trong vùng văn bản khi gửi.

< textarea  wrap = "mềm" > </ textarea > 
< textarea  wrap = "cứng"  cols = "40" > </ textarea >

softkhông thêm ngắt dòng vào văn bản đã gửi,hardmà thêm ngắt dòng theocolschiều rộng đã chỉ định. Hầu hết thời gian bạn muốnsoft.

Hỗ trợ trình duyệt:Hỗ trợ chung trên mọi trình duyệt

29.`disabled`

Vô hiệu hóa hoàn toàn dữ liệu đầu vào. Dữ liệu sẽ không thể chỉnh sửa hoặc gửi đi.

<input type = "text" disabled> 
<button type = "submit" disabled>Gửi</button>

Khác vớireadonly. Các mục nhập bị vô hiệu hóa sẽ không gửi giá trị của chúng và thường hiển thị màu xám. Sử dụng khi các trường tạm thời không khả dụng.

Hỗ trợ trình duyệt:Hỗ trợ chung trên mọi trình duyệt

30.`required`

Bắt buộc phải điền một trường trước khi gửi biểu mẫu.

< input  type = "text"  required > 
< input  type = "email"  required > 
< select  required > 
  < option  value = "" > Chọn một... </ option > 
  < option  value = "1" > Tùy chọn 1 </ option > 
</ select >

Trình duyệt sẽ hiển thị lỗi nếu người dùng cố gắng gửi mà không điền đầy đủ các trường bắt buộc. Hoạt động với mọi kiểu nhập liệu.

Hỗ trợ trình duyệt:Chrome 10+, Firefox 4+, Safari 10.1+, Edge 12+, IE 10+

Tại sao những điều này quan trọng

Vấn đề là. Những thuộc tính này không hề mới mẻ hay cầu kỳ. Chúng được tích hợp sẵn trong HTML, được trình duyệt hỗ trợ, và chúng giải quyết những vấn đề thực tế. Hầu hết các nhà phát triển đều tìm đến JavaScript khi HTML đã có câu trả lời.

Sử dụng các thuộc tính này và bạn sẽ nhận được:

Trải nghiệm người dùng tốt hơn với ít mã hơn
Xác thực trình duyệt gốc hoạt động ở mọi nơi
Các tính năng trợ năng được tích hợp sẵn
Bàn phím và tương tác được tối ưu hóa cho thiết bị di động
Ít JavaScript để duy trì

Tóm tắt hỗ trợ trình duyệt

Hỗ trợ tuyệt vời (Hoạt động ở mọi nơi):

autocomplete,autofocus,title,readonly,placeholder,size,cols,rows,wrap,disabled,spellcheck
Xác thực HTML5:required,pattern,min,max,step,multiple,accept
Nút biểu mẫu ghi đè:formaction,formmethod,formenctype,formtarget,formnovalidate,novalidate

Chỉ dành cho trình duyệt hiện đại:

inputmode: Chrome 66+, Firefox 95+, Safari 12.1+
enterkeyhint: Chrome 77+, Firefox 94+, Safari 13.1+
minlength: Chrome 40+, Firefox 51+, Safari 10.1+ (Không có IE)
datalist: Chrome 20+, Firefox 4+, Safari 12.1+ (Không có IE)

Giới hạn/Dành riêng cho thiết bị di động:

capture: Chỉ dành cho trình duyệt di động (Chrome Android 53+, iOS Safari 11+)
autocapitalize: Safari/iOS, Chrome 43+ (Không có Firefox)
dirname: Chrome 17+, Safari 6+ (Không có Firefox hoặc IE)

Bắt đầu sử dụng chúng ngay hôm nay

Bạn không cần phải sử dụng cả 30 nút cùng lúc. Hãy chọn một vài nút phù hợp với vấn đề bạn đang gặp phải. Thêminputmodevào biểu mẫu di động. Sử dụngpatternthay vì viết xác thực tùy chỉnh. Thửformnovalidatedùng cho các nút nháp. Thêm vàocapturekhi tải lên bằng camera.

Đây không phải là những tính năng chưa được biết đến đang chờ trình duyệt hỗ trợ. Hãy bắt đầu sử dụng chúng.

Chỉ là một tham khảo nhanh:

<!-- Xác thực --> 
< đầu vào  yêu cầu  minlength = "3"  maxlength = "20"  mẫu = "[A-Za-z]+" > 
< mẫu  novalidate >

<!-- Trải nghiệm người dùng di động --> 
<input inputmode="numeric" enterkeyhint="next" autocomplete="tel" autocapitalize="words"> 
<input type="file" accept="image/*" capture="environment"><!-- Tải tệp lên --> 
<input type="file" accept="image/*" nhiều><!-- Nút nâng cao --> 
<button formnovalidate>Lưu bản nháp</button> 
<button formaction="/preview" formtarget="_blank">Xem trước</button> 
<button formmethod="delete">Xóa</button> 
<button formenctype="multipart/form-data">Tải lên</button><!-- Gợi ý --> 
<input list="suggestions"> 
<datalist id="suggestions"> 
  <option value="Tùy chọn 1"> 
  <option value="Tùy chọn 2"> 
</datalist><!-- Textarea --> 
<textarea cols="50" rows="10" wrap="soft" spellcheck="true"></textarea><!-- Trạng thái đầu vào --> 
<đầu vào chỉ đọc> 
<đầu vào bị vô hiệu hóa><!-- Hướng văn bản --> 
<input dirname="comment.dir">

Liên hệ nhanh

1.autocomplete

2.autofocus

3.inputmode

4.pattern

5.title(có mẫu)

6.minlengthvàmaxlength

7.minvàmax

8.step

9.multiple

10.accept

11.formnovalidate

12.formaction

13.formmethod

14.formenctype

15.formtarget

16.readonly

17.placeholder

18.listvà<datalist>

19.spellcheck

20.enterkeyhint

21.dirname

22.form

23.capture

24.novalidate

25.autocapitalize

26.size

27.colsvàrows

28.wrap

29.disabled

30.required

Tại sao những điều này quan trọng

Tóm tắt hỗ trợ trình duyệt

Bắt đầu sử dụng chúng ngay hôm nay

Để lại một bình luận Hủy

1.`autocomplete`

2.`autofocus`

3.`inputmode`

4.`pattern`

5.`title`(có mẫu)

6.`minlength`và`maxlength`

7.`min`và`max`

8.`step`

9.`multiple`

10.`accept`

11.`formnovalidate`

12.`formaction`

13.`formmethod`

14.`formenctype`

15.`formtarget`

16.`readonly`

17.`placeholder`

18.`list`và`<datalist>`

19.`spellcheck`

20.`enterkeyhint`

21.`dirname`

22.`form`

23.`capture`

24.`novalidate`

25.`autocapitalize`

26.`size`

27.`cols`và`rows`

28.`wrap`

29.`disabled`

30.`required`