Thuộc tính biểu mẫu trong HTML5

Trong các bài viết trước, chúng ta đã đi sâu vào HTML5, sự ra đời của nó, các phần tử HTML5, khả năng tương thích với trình duyệt của chúng và các nội dung khác. Hãy cùng tìm hiểu sâu hơn về các biểu mẫu HTML5 trong bài viết này. Phần tử biểu mẫu đóng một vai trò rất quan trọng trong phát triển web, đây là thực thể trong đó chúng tôi giữ nhiều phần tử khác và cố gắng đăng dữ liệu trong biểu mẫu lên phía máy chủ

Hãy tạo một biểu mẫu HTML để hiểu thêm về nó, biểu mẫu này sẽ giống như bên dưới

Biểu mẫu này có 3 trường loại đầu vào là Tên, Thành phố, Tin nhắn và một nút có tên là Gửi. Ý tưởng chung là nhấp vào nút Gửi để lưu 3 đầu vào vào một loại kho lưu trữ ở cuối máy chủ. Hãy tạo biểu mẫu này trong HTML

  
  
  
  
  
  
  
  
 
 
 
 
 
 Name: 
 
 
  
 
 
 City: 
 
 
  
 
 
 Message: 
 
 
  
 
  
 
 
 
 

Màn hình trong trình duyệt sẽ như dưới đây

• 2 phần tử loại đầu vào = “văn bản”

• 1 phần tử vùng văn bản

• 1 loại đầu vào = phần tử "gửi"

để tạo biểu mẫu trên

In the

element, we see that we have an attribute as method=”post”, which tells that the data within the form needs to be posted to the server as soon as we click on the submit button. I have created an MVC app in which this form would be posted to the controller (server-side through the API) end for further processing to the database layer or else. Let’s have a look at the controller code

 
 public class HomeController : Controller 
 { 
 public IActionResult Index() 
 { 
 return View(); 
 } 
 
 [HttpPost] 
 public IActionResult Index(UserModel model) 
 { 
 var userDetails = $"{model.UserName}{"--"}{model.UserCity}{"--"}{model.UserMessage}"; 
 return NoContent(); } 
 }

> sẽ được đăng lên phương thức POST Index vì nó có loại HTTP là HttpPost, có một đối số, cụ thể là UserModel. Nó không là gì ngoài một mô hình chứa các thuộc tính để ánh xạ dữ liệu biểu mẫu như tên người dùng, thành phố người dùng và thông báo của người dùng

 
 public class UserModel 
 { 
 public string UserName { get; set; } 
 public string UserCity { get; set; } 
 public string UserMessage { get; set; } 
 }

Hãy xem liệu phương thức POST phía máy chủ có thực sự bắt dữ liệu biểu mẫu hay không và để làm điều đó, hãy đặt một trình gỡ lỗi với phương thức chỉ mục để xác định dữ liệu được gửi như được đưa ra bên dưới

Chúng ta có thể thấy rằng mã phía máy chủ phản ánh chính xác dữ liệu biểu mẫu; . Trong trường hợp này, ứng dụng MVC được viết bằng C# đã được sử dụng, dạng HTML có thể được sử dụng cùng với bất kỳ ngôn ngữ phía máy chủ nào. Thuộc tính tên của các phần tử biểu mẫu là rất quan trọng để ánh xạ dữ liệu tới đầu máy chủ cùng với giá trị mô hình và nó phải giống nhau. Vì chúng ta đang nói về các thuộc tính, hãy xem những thuộc tính mới nào đã được thêm vào trong HTML5

THUỘC TÍNH MỚI CỦA HTML5

element new attributes -

• tự động hoàn thành

• hợp thức hóa

Hãy xem các ví dụ liên quan

tự động hoàn thành

Như tên gợi ý, thuộc tính tự động hoàn thành của biểu mẫu sẽ nhắc tính năng tự động hoàn thành đối với các phần tử đầu vào khác nhau có trong biểu mẫu. Nó có thể được đặt ở cấp biểu mẫu và cũng có thể được bật/tắt ở cấp thành phần riêng lẻ

Tính năng tự động hoàn thành có thể được cập nhật từ trình duyệt cho dù chúng tôi có muốn cho phép các giá trị biểu mẫu tự động hoàn thành hay không và chúng tôi cũng có thể thiết lập các giá trị biểu mẫu được sử dụng thường xuyên cho tính năng tự động hoàn thành, chẳng hạn như chi tiết thẻ tín dụng/thẻ ghi nợ, nơi cư trú bản địa hoặc các địa chỉ khác, chi tiết công ty/khách hàng,

  
  
  
  
  
  
  
  
  
 
 
 
 Name: 
 
 
  
 
 
 City: 
 
 
  
 
 
 Email: 
 
 
  
 
 
 DOB: 
 
 
  
 
 
  
 
 
 
  
  
  

Ở đây, tính năng tự động điền được bật ở cấp biểu mẫu, hãy xem liệu các trường nhập có được nhắc nhập giá trị hay không

Ngay sau khi người dùng nhấp vào mục nhập văn bản, trường tự động hoàn thành sẽ hiển thị bổ sung kịp thời với các giá trị được đề xuất và nếu bạn nhấp vào các giá trị đó thì các giá trị sẽ được điền vào bên trong thành phần như được hiển thị ở trên

Chúng ta có thể tắt tính năng tự động điền ở cấp phần tử như hình bên dưới

hợp thức hóa

Như tên gợi ý, việc bổ sung thuộc tính biểu mẫu này sẽ không xác thực biểu mẫu, ngay cả khi dữ liệu không hợp lệ đã được nhập. Hãy xem một ví dụ. Chúng tôi biết rằng phần tử input type=”email” sẽ xác thực mẫu email như hình bên dưới

Nhưng nếu chúng tôi bật novalidate ở cấp biểu mẫu, biểu mẫu sẽ không được xác thực ngay cả khi chúng tôi đã nhập mẫu email không hợp lệ. Mẫu email không hợp lệ được nhập như trong ảnh chụp màn hình bên dưới

Hãy nhấn gửi, chúng ta sẽ thấy rằng dữ liệu biểu mẫu sẽ chuyển đến cuối máy chủ mà không có bất kỳ lỗi xác thực nào được đưa ra

Mã HTML hoàn chỉnh như sau

  
  
  
  
  
  
  
  
 
 
 
 
 
 Name: 
 
 
  
 
 
 City: 
 
 
  
 
 
 Email: 
 
 
  
 
 
 Message: 
 
 
 "> 
 
  
 
 
 
  

New elements attribute in alphabetical order are as below

• tự động hoàn thành

• tự động lấy nét

• hình thức

• sự hình thành

• định dạng

• phương pháp tạo hình

• formnovalidate

• mục tiêu biểu mẫu

• chiều cao và chiều rộng

• danh sách

• tối thiểu và tối đa

• nhiều

• mẫu (regrec)

• giữ chỗ

• yêu cầu

• bươc

Chúng ta hãy xem xét từng người trong số họ một cách chi tiết

tự động hoàn thành

Chúng tôi đã tắt tính năng tự động hoàn thành đối với trường nhập Tên một cách rõ ràng, do đó tính năng tự động hoàn thành không nhắc trên trường Tên nhưng có trên trường Thành phố

lấy nét tự động

Thuộc tính lấy nét tự động đặt tiêu điểm vào thành phần mà nó đã được bật khi tải trang web

Trong ảnh chụp nhanh ở trên, chúng tôi đã bật lấy nét tự động cho trường Thành phố

Hình thức

thuộc tính biểu mẫu trên phần tử đầu vào đề cập đến biểu mẫu HTML mà phần tử đầu vào thuộc về

Chúng tôi có một biểu mẫu HTML có id = 'SearchForm', chúng tôi có một phần tử đầu vào DOB, nằm ngoài biểu mẫu, nhưng thuộc tính biểu mẫu được đặt thành chính 'SearchForm'. Hãy xem đầu ra trong trình duyệt và liệu biểu mẫu đã gửi có giữ giá trị cho trường DOB hay không

Chúng ta có thể thấy từ ảnh chụp nhanh ở trên rằng giá trị của DOB cũng được đăng lên máy chủ mặc dù nó nằm ngoài biểu mẫu

sự hình thành

Thuộc tính Formaction giúp gửi biểu mẫu tới một phương thức khác thay vì phương thức mặc định được xác định bởi thuộc tính biểu mẫu HTML. Hãy xem một ví dụ

Dữ liệu biểu mẫu được đăng thành công vào phương thức Chi tiết theo đề xuất của thuộc tính định dạng

định dạng

Như tên gợi ý, nó đề cập đến định dạng mã hóa khi đăng dữ liệu lên máy chủ và định dạng mã hóa quyết định loại dữ liệu nào đang được gửi, chẳng hạn như văn bản, tệp, phương tiện, v.v. Hãy xem một ví dụ trong đó chúng ta cần đăng một tệp lên cuối máy chủ

 
 public class HomeController : Controller 
 { 
 public IActionResult Index() 
 { 
 return View(); 
 } 
 
 [HttpPost] 
 public IActionResult Index(UserModel model) 
 { 
 var userDetails = $"{model.UserName}{"--"}{model.UserCity}{"--"}{model.UserMessage}"; 
 return NoContent(); } 
 }

Ở đây formenctype là multipart/form-data, hãy xem loại thuộc tính sẽ giữ giá trị của nó ở cuối máy chủ

 
 public class HomeController : Controller 
 { 
 public IActionResult Index() 
 { 
 return View(); 
 } 
 
 [HttpPost] 
 public IActionResult Index(UserModel model) 
 { 
 var userDetails = $"{model.UserName}{"--"}{model.UserCity}{"--"}{model.UserMessage}"; 
 return NoContent(); } 
 }

ASP. NET Core cung cấp cho chúng tôi loại IFormFile để làm việc với tệp tải lên theo cách rất dễ dàng và tương thích

Một tệp văn bản đã được duyệt qua bởi điều khiển tệp

Mã phía máy chủ ghi lại tệp đã tải lên và các chi tiết của tệp như contentType, tên tệp, Độ dài, Tên, v.v. Nếu chúng tôi không đề cập đến loại định dạng, thì dữ liệu đã đăng sẽ không có giá trị đối với kiểm soát tệp tải lên, vì vậy bạn nên cung cấp loại mã hóa thích hợp trước khi tải tệp lên

phương pháp định dạng

Như tên gợi ý, thuộc tính này đề cập đến loại phương thức được đánh ở cuối máy chủ. Thuộc tính này ở cấp độ phần tử sẽ ghi đè phương thức gốc được xác định ở cấp độ biểu mẫu. Chúng ta có thể thấy trong đoạn mã dưới đây rằng phương thức biểu mẫu là GET, nó ghi đè kiểu POST gốc và được gửi tới phương thức GET ở cuối bộ điều khiển

 
 public class HomeController : Controller 
 { 
 public IActionResult Index() 
 { 
 return View(); 
 } 
 
 [HttpPost] 
 public IActionResult Index(UserModel model) 
 { 
 var userDetails = $"{model.UserName}{"--"}{model.UserCity}{"--"}{model.UserMessage}"; 
 return NoContent(); } 
 }

Formnovalidate

Thuộc tính này không cho phép biểu mẫu tự xác thực trước khi đăng

 
 public class HomeController : Controller 
 { 
 public IActionResult Index() 
 { 
 return View(); 
 } 
 
 [HttpPost] 
 public IActionResult Index(UserModel model) 
 { 
 var userDetails = $"{model.UserName}{"--"}{model.UserCity}{"--"}{model.UserMessage}"; 
 return NoContent(); } 
 }

Trường email ở đây không được xác thực và gửi

mục tiêu định dạng

formtarget đề cập đến mục tiêu nơi phản hồi của hành động sẽ được hiển thị

 
 public class HomeController : Controller 
 { 
 public IActionResult Index() 
 { 
 return View(); 
 } 
 
 [HttpPost] 
 public IActionResult Index(UserModel model) 
 { 
 var userDetails = $"{model.UserName}{"--"}{model.UserCity}{"--"}{model.UserMessage}"; 
 return NoContent(); } 
 }

Nó có 4 giá trị khác nhau

Ở đây, chúng tôi đã đặt mục tiêu biểu mẫu là _blank và do đó phản hồi được hiển thị trong một cửa sổ mới

Chiều cao và chiều rộng

Như tên gợi ý, các thuộc tính này được sử dụng để đặt chiều cao và chiều rộng của phần tử input type=”image”

Luôn chỉ định cả thuộc tính chiều cao và chiều rộng cùng với các giá trị thích hợp cho các phần tử hình ảnh. Nếu chiều cao và chiều rộng được đặt, không gian cần thiết cho hình ảnh sẽ được giữ nguyên khi tải trang. nhưng, không có thuộc tính chiều cao và chiều rộng, trình duyệt có thể không biết kích thước thực của hình ảnh và không thể dành không gian thích hợp cho nó vào DOM. Hiệu ứng sẽ là bố cục trang sẽ được thay đổi trong khi tải hình ảnh

 
 public class HomeController : Controller 
 { 
 public IActionResult Index() 
 { 
 return View(); 
 } 
 
 [HttpPost] 
 public IActionResult Index(UserModel model) 
 { 
 var userDetails = $"{model.UserName}{"--"}{model.UserCity}{"--"}{model.UserMessage}"; 
 return NoContent(); } 
 }

Danh sách

thuộc tính danh sách xác định một tập hợp các bản ghi/tùy chọn được xác định trước sẽ được nhắc cho người dùng

 
 public class HomeController : Controller 
 { 
 public IActionResult Index() 
 { 
 return View(); 
 } 
 
 [HttpPost] 
 public IActionResult Index(UserModel model) 
 { 
 var userDetails = $"{model.UserName}{"--"}{model.UserCity}{"--"}{model.UserMessage}"; 
 return NoContent(); } 
 }

tối thiểu và tối đa

Tự giải thích, xác định giới hạn trên và dưới cho các yếu tố đầu vào. Có thể được sử dụng với các loại đầu vào - số, phạm vi, ngày, datetime-local, tháng, thời gian và tuần

 
 public class HomeController : Controller 
 { 
 public IActionResult Index() 
 { 
 return View(); 
 } 
 
 [HttpPost] 
 public IActionResult Index(UserModel model) 
 { 
 var userDetails = $"{model.UserName}{"--"}{model.UserCity}{"--"}{model.UserMessage}"; 
 return NoContent(); } 
 }

Công cụ chọn số sẽ không vượt quá giới hạn của 1 và 10

Nhiều

Thuộc tính này giúp chúng ta chọn nhiều tập tin hoặc email

 
 public class HomeController : Controller 
 { 
 public IActionResult Index() 
 { 
 return View(); 
 } 
 
 [HttpPost] 
 public IActionResult Index(UserModel model) 
 { 
 var userDetails = $"{model.UserName}{"--"}{model.UserCity}{"--"}{model.UserMessage}"; 
 return NoContent(); } 
 }

Mẫu

Được sử dụng để xác thực đầu vào theo biểu thức chính quy (mẫu). Hoạt động với các loại đầu vào - văn bản, tìm kiếm, url, điện thoại, email và mật khẩu

 
 public class HomeController : Controller 
 { 
 public IActionResult Index() 
 { 
 return View(); 
 } 
 
 [HttpPost] 
 public IActionResult Index(UserModel model) 
 { 
 var userDetails = $"{model.UserName}{"--"}{model.UserCity}{"--"}{model.UserMessage}"; 
 return NoContent(); } 
 }

Trình giữ chỗ

Nó nhắc gợi ý về giá trị được nhập vào trường nhập liệu, rất thân thiện với người dùng. Hoạt động với các loại đầu vào - văn bản, tìm kiếm, url, điện thoại, email và mật khẩu

 
 public class UserModel 
 { 
 public string UserName { get; set; } 
 public string UserCity { get; set; } 
 public string UserMessage { get; set; } 
 }

Yêu cầu

Như tên gợi ý, thuộc tính này đặt yêu cầu bắt buộc của trường nhập liệu. Hoạt động với các loại đầu vào - văn bản, tìm kiếm, url, điện thoại, email, mật khẩu, bộ chọn ngày, số, hộp kiểm, radio và tệp

Xin lưu ý hành vi xác thực trường bắt buộc có thể khác đối với khả năng tương thích nhất định của trình duyệt và có thể một số trình duyệt không hỗ trợ xác thực như vậy

 
 public class UserModel 
 { 
 public string UserName { get; set; } 
 public string UserCity { get; set; } 
 public string UserMessage { get; set; } 
 }

Bươc

Như tên gợi ý, thuộc tính này thiết lập khoảng thời gian của một phần tử đầu vào

 
 public class UserModel 
 { 
 public string UserName { get; set; } 
 public string UserCity { get; set; } 
 public string UserMessage { get; set; } 
 }

Bộ chọn số sẽ đặt khoảng thời gian là 2, các giá trị được phép sẽ là …-4,-2,0,2,4,6…. Đã thảo luận về các thuộc tính HTML5 khác nhau, chúng ta hãy xem các thuộc tính dữ liệu HTML5

THUỘC TÍNH DỮ LIỆU HTML5

HTML5 đã giới thiệu các thuộc tính dữ liệu; . Ví dụ: tôi có một phần tử span hiển thị văn bản là 'Tên nhân viên là John. ', để tính toán thêm, tôi cũng cần lưu trữ id nhân viên của John trên giao diện người dùng, Trong trường hợp này, tôi có thể sử dụng thuộc tính dữ liệu và lưu trữ id emp

 
 public class UserModel 
 { 
 public string UserName { get; set; } 
 public string UserCity { get; set; } 
 public string UserMessage { get; set; } 
 }

thuộc tính dữ liệu thường bắt đầu bằng tiền tố 'data-' Hãy thử truy xuất thuộc tính dữ liệu này bằng jQuery

 
 public class UserModel 
 { 
 public string UserName { get; set; } 
 public string UserCity { get; set; } 
 public string UserMessage { get; set; } 
 }

Với việc nhấp vào nút, chúng tôi đang truy xuất giá trị của thuộc tính dữ liệu. jQuery cung cấp cho chúng ta một. data() API, giúp chúng tôi truy xuất thuộc tính dữ liệu. JavaScript cũng cung cấp cho chúng tôi API tập dữ liệu để truy xuất/đặt thuộc tính dữ liệu. Hãy xem chi tiết

 
 public class UserModel 
 { 
 public string UserName { get; set; } 
 public string UserCity { get; set; } 
 public string UserMessage { get; set; } 
 }

API tập dữ liệu hoạt động theo cách sau, Nhận phần tử có thuộc tính dữ liệu cần được chọn

 
 public class UserModel 
 { 
 public string UserName { get; set; } 
 public string UserCity { get; set; } 
 public string UserMessage { get; set; } 
 }

Lấy các giá trị thuộc tính dưới dạng tập dữ liệu. tên thuộc tính. Chúng ta hãy xem Xác thực HTML5

XÁC NHẬN HTML5

HTML5 cung cấp cho chúng tôi một tập hợp các xác nhận chung vốn có

Xác thực bắt buộc

Nó đưa ra yêu cầu bắt buộc

 
 public class UserModel 
 { 
 public string UserName { get; set; } 
 public string UserCity { get; set; } 
 public string UserMessage { get; set; } 
 }

Xác thực email

Loại đầu vào=”email” ném xác thực email nếu giá trị đã nhập không chính xác

 
 public class UserModel 
 { 
 public string UserName { get; set; } 
 public string UserCity { get; set; } 
 public string UserMessage { get; set; } 
 }

Xác thực URL

Loại đầu vào=”URL” đưa ra xác thực URL nếu giá trị đã nhập không chính xác

 
 public class UserModel 
 { 
 public string UserName { get; set; } 
 public string UserCity { get; set; } 
 public string UserMessage { get; set; } 
 }

Xác thực số điện thoại

Loại đầu vào=”tel” cùng với mẫu đưa ra xác thực số điện thoại nếu giá trị đã nhập không chính xác và không khớp với mẫu

  
  
  
  
  
  
  
  
 
 
 
 
 
 Name: 
 
 
  
 
 
 City: 
 
 
  
 
 
 Email: 
 
 
  
 
 
 DOB: 
 
 
  
 
 
  
 
 
 
 
 
  
  

Xác thực số với Min và Max

  
  
  
  
  
  
  
  
 
 
 
 
 
 Name: 
 
 
  
 
 
 City: 
 
 
  
 
 
 Email: 
 
 
  
 
 
 DOB: 
 
 
  
 
 
  
 
 
 
 
 
  
  

Xác thực mẫu

thuộc tính mẫu sẽ khớp với mẫu được cung cấp và thông báo cho chúng tôi nếu giá trị đã nhập không chính xác

  
  
  
  
  
  
  
  
 
 
 
 
 
 Name: 
 
 
  
 
 
 City: 
 
 
  
 
 
 Email: 
 
 
  
 
 
 DOB: 
 
 
  
 
 
  
 
 
 
 
 
  
  

Trên đây là các bộ trình trợ giúp xác thực phổ biến do HTML5 cung cấp, những bộ này không yêu cầu bất kỳ mã JavaScript tùy chỉnh nào được viết. Tuy nhiên, chúng tôi có thể sử dụng mã JavaScript để hiển thị thông báo lỗi tùy chỉnh và để thực hiện xác thực tùy chỉnh. Xác thực hoàn chỉnh cho một ứng dụng cũng bao gồm cả xác thực phía máy chủ

TÓM LƯỢC

Trong bài viết này, chúng ta đã xem xét sâu về biểu mẫu HTML, các thuộc tính khác nhau của nó, các thuộc tính loại đầu vào khác nhau, thuộc tính dữ liệu tùy chỉnh và xác thực thông qua HTML5. Trong các bài viết tới, chúng ta sẽ tìm hiểu về API HTML5, đồ họa và hơn thế nữa

Các thuộc tính trong biểu mẫu là gì?

2 thuộc tính trong HTML5 là gì?

4 thuộc tính của HTML là gì?

Tóm tắt chương .

Tất cả các phần tử HTML có thể có các thuộc tính

The href attribute of specifies the URL of the page the link goes to..

The src attribute of specifies the path to the image to be displayed..

The width and height attributes of provide size information for images..