Như đã giải thích trong chương trước, các phần tử có thể chứa các thuộc tính được sử dụng để thiết lập các thuộc tính khác nhau của phần tử
Một số thuộc tính được xác định trên toàn cầu và có thể được sử dụng trên bất kỳ phần tử nào, trong khi các thuộc tính khác chỉ được xác định cho các phần tử cụ thể. Tất cả các thuộc tính có một tên và một giá trị và trông giống như trong ví dụ dưới đây
Sau đây là ví dụ về một thuộc tính HTML5 minh họa cách đánh dấu một phần tử div bằng một thuộc tính có tên class bằng cách sử dụng giá trị "example" −
...
Các thuộc tính chỉ có thể được chỉ định trong thẻ bắt đầu và không bao giờ được sử dụng trong thẻ kết thúc
Các thuộc tính HTML5 không phân biệt chữ hoa chữ thường và có thể được viết bằng tất cả chữ hoa hoặc chữ thường, mặc dù quy ước phổ biến nhất là sử dụng chữ thường
Thuộc tính tiêu chuẩn
Các thuộc tính được liệt kê bên dưới được hỗ trợ bởi hầu hết tất cả các thẻ HTML 5
Thuộc tính OptionsFunctionaccesskeyUser Defined Chỉ định một phím tắt để truy cập một phần tử. căn phải, trái, trung tâm Căn chỉnh các thẻ theo chiều ngangnềnURLĐặt một hình nền phía sau một phần tửbgmàucác giá trị số, thập lục phân, RGBĐặt một màu nền phía sau một phần tửlớpNgười dùng xác địnhPhân loại một phần tử để sử dụng với Cascading Style Sheets. contenteditabletrue, falseXác định xem người dùng có thể chỉnh sửa nội dung của phần tử hay không. contextmenuMenu idChỉ định menu ngữ cảnh cho một phần tử. data-XXXXUser DefinedThuộc tính tùy chỉnh. Tác giả của tài liệu HTML có thể xác định các thuộc tính của riêng họ. Phải bắt đầu bằng "data-". draggabletrue,false, autoXác định người dùng có được phép kéo phần tử hay không. heightNumeric ValueXác định chiều cao của bảng, hình ảnh hoặc ô bảng. hiddenhiddenChỉ định xem phần tử có được hiển thị hay không. idUser DefinedNames một thành phần để sử dụng với Cascading Style Sheets. itemDanh sách các phần tửĐược sử dụng để nhóm các phần tử. itempropDanh sách các mụcĐược sử dụng để nhóm các mục. kiểm tra chính tảtrue, falseXác định nếu phần tử phải được kiểm tra chính tả hoặc ngữ pháp. style CSS Style sheet Chỉ định một kiểu nội tuyến cho một phần tử. chủ đềUser xác định idChỉ định mục tương ứng của phần tử. tabindexTab numberChỉ định thứ tự tab của một phần tử. title Tiêu đề "Cửa sổ bật lên" do người dùng xác định cho các phần tử của bạn. valigntop, middle, bottom Căn chỉnh các thẻ theo chiều dọc trong một phần tử HTML. widthNumeric ValueXác định chiều rộng của bảng, hình ảnh hoặc ô bảngĐể biết danh sách đầy đủ về Thẻ HTML5 và các thuộc tính có liên quan, vui lòng kiểm tra tài liệu tham khảo của chúng tôi về Thẻ HTML5
Thuộc tính tùy chỉnh
Một tính năng mới được giới thiệu trong HTML 5 là việc bổ sung các thuộc tính dữ liệu tùy chỉnh
Thuộc tính dữ liệu tùy chỉnh bắt đầu bằng dữ liệu- và sẽ được đặt tên dựa trên yêu cầu của bạn. Đây là một ví dụ đơn giản -
...
Đoạn mã trên sẽ là HTML5 hoàn toàn hợp lệ với hai thuộc tính tùy chỉnh được gọi là datasubject và data-level. Bạn có thể lấy giá trị của các thuộc tính này bằng cách sử dụng API JavaScript hoặc CSS theo cách tương tự như cách bạn lấy các thuộc tính tiêu chuẩn
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
HTML FormsName: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 cung cấp 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,
HTML5 Form AttributesName: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
HTML FormsName: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ố
________số 8lấ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ề
0...
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ụ
1...
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 cho thấy, 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[]; } }0
Ở đâ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[]; } }1
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[]; } }2
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[]; } }3
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[]; } }4
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[]; } }5
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[]; } }6
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[]; } }7
Công cụ chọn số sẽ không vượt quá giới hạn 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[]; } }8
Họa tiết
Đượ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[]; } }9
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; } }0
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 ý rằng 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; } }1
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; } }2
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; } }3
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; } }4
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; } }5
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; } }6
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; } }7
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; } }8
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; } }9
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
HTML5 Form Attributes0Name:City:Email:DOB:
Xác thực số với Min và Max
HTML5 Form Attributes1Name: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
HTML5 Form Attributes2Name: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ủ
BẢN TÓM TẮTTrong 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