Nút css bị vô hiệu hóa
Ở phần trước mình đã hướng dẫn cho các bạn các kiến thức về các thẻ hay dùng trong HTML nhất, tuy nhiên trong HTML thì còn rất nhiều thẻ khác và đi kèm với chúng là những thuộc tính nữa. Trong bài ngày hôm nay chúng ta sẽ cùng nhau khám phá và tìm hiểu thêm các thẻ trong form và table nhé. Bắt đầu hủy nào # Các thẻ về biểu mẫu## Hình thứcLà thẻ bị chặn, thẻ này thường được sử dụng khi bạn muốn gửi dữ liệu tới máy chủ như đăng nhập, đăng ký, cập nhật thông tin thông qua biểu mẫu gửi. Trong biểu mẫu thẻ này có nhiều thuộc tính mà các bạn cần xác định tên như sau
Minh họa một biểu mẫu cơ bản ## Đầu vào thẻ Là thẻ nội tuyến, và là thẻ tự đóng, thẻ này thường được sử dụng bên trong thẻ ở dạng trên, thẻ này có nhiều thuộc tính và trong các thuộc tính thì lại có rất nhiều giá trị mà các bạn nên biết và biết cách sử dụng Đầu tiên là thuộc tính 5, trong thuộc tính này có các giá trị như là
Tiếp tục theo thuộc tính 37, thuộc tính này giúp tạo ra một lớp chữ mờ bên trong đầu vào khi người dùng chưa nhập nội dung vào Placeholder Thuộc tính 38 tức là giá trị của 39 khi gửi biểu mẫu thì người ta sẽ lấy những giá trị này được đưa lên máy chủ xử lý, tuy nhiên làm sao để lấy được những giá trị này thì phải dựa vào thuộc tính 0 bên dưới đâyThuộc tính 0 giúp phân biệt giữa các đầu vào với nhau và rất quan trọng, nó được sử dụng khi làm việc với Javascript để lấy dữ liệu từ các đầu vào cũng dựa vào thuộc tính tên này. Và khi làm việc với đầu vào có loại là hộp kiểm hoặc đài phát thanh thì thuộc tính tên này truyền vào giá trị cho các hộp kiểm hoặc đài phát thanh cùng tên để có thể lấy dữ liệu chính xác ví dụ nếu bạn làm việc với đài phát thanh mà bạn chọn giới tính.3 Các bạn không truyền vào tên hoặc truyền vào tên khác nhau thì khi gửi biểu mẫu nó sẽ hiểu là 2 giá trị khác nhau do tên khác nhau và người dùng có thể chọn . ______28 Thuộc tính 82 khi bạn muốn trường đó buộc người dùng phải nhập nếu không nhập thì sẽ không gửi biểu mẫu được 0 Thuộc tính 83 không cho phép người dùng nhấn vào input hay là làm gì cả, thuộc tính này các bạn sẽ dùng khi muốn cho người ta thấy được giá trị nhưng không thể làm gì chẳng hạn những hệ thống người ta không cho bạn đổi email chẳng hạn thì người sẽ thêm thuộc tính này vào 2 Input bị disabled Thuộc tính 84 được sử dụng với đầu vào có loại là số có nghĩa là số nhỏ nhất mà người dùng phải nhập vào ví dụ đầu vào mà bạn muốn tuổi nhỏ nhất phải là 18 thì sẽ có min=”18″4 Ngược lại thuộc tính tối thiểu đó chính là thuộc tính 85, có nghĩa là số lớn nhất mà người dùng có thể nhập vào ví dụ lớn nhất là 100 lần thôi đừng quên< . 6 Tương tự cho input type là text hay email chẳng hạn bạn muốn người dùng nhập vào tối thiểu bao nhiêu ký tự hay tối đa bao nhiêu ký tự thì chúng ta sẽ dùng 2 thuộc tính tương ứng là 86 và 87 nhé 9 Thuộc tính 88 thì na ná với disabled là không làm được gì cái input cả, chỉ có cái khác là nó vẫn có thể focus còn disabled thì không, khi submit form thì input có readonly vẫn sẽ được gửi dữ liệu tới server còn input có disabled thì không. ______00 Input đang được sử dụng ở chế độ chỉ đọc Ngoài ra đầu vào vẫn sử dụng được các thuộc tính thông tin ứng dụng như 89 hoặc 00 nhé các bạn. And property id in input or used when doing work with the tag Nhãn dưới đâyLà thẻ nội tuyến, thẻ này thường được sử dụng với đầu vào, vùng văn bản để khi người dùng nhấn vào nó thì nó sẽ tự động trỏ tới đầu vào hoặc vùng văn bản để tập trung vào thông tin thuộc tính của chúng trong nhãn Thuộc tính 01 này sẽ trỏ tới 00 của đầu vào cho nên trong đầu vào cần có id tương ứng với giá trị trong nhãn của nhãn như sau, ở đây có giá trị 2 Thẻ label trong thực tế## Thẻ textarea Là thẻ nội tuyến, thẻ này cũng giống thẻ đầu vào là đều có các thuộc tính như đầu vào, điểm khác ở đây là 03 cho phép người dùng nhập vào nhiều nội dung và có thể nhập xuống hàng còn đầu vào thì không được. Nó thường được sử dụng khi người dùng nhập vào mô tả thông tin cá nhân, hoặc là soạn thảo bài viết…3 Vùng văn bản ## Nút thẻ Là thẻ nội tuyến, thẻ này được sử dụng dưới dạng khi người dùng nhấn vào để gửi dữ liệu đã nhập hoặc xóa hết dữ liệu. Nút thẻ này thuộc tính 5 với 3 giá trị là 36 để gửi dữ liệu và 06 để xóa hết dữ liệu trong biểu mẫu khi nhập (khá nguy hiểm), cuối cùng là 07 sẽ không có tác dụng gì khi được nhấn vàoNút thẻ cũng thuộc tính 83 nghĩa là không cho phép người dùng nhấn vào hay làm gì cả, kiểu như sau này các bạn làm việc với Javascript các bạn kiểm tra xem người dùng có nhập đầy đủ thông tin không thì mới cho nhấn hết hạn thì cấm nhéNút Thẻ ## Bộ trường thẻ Là thẻ khi các bạn muốn gom nhóm các trường lại như input, button, textarea vào chung rồi vô hiệu hóa một nhóm luôn thay vì vô hiệu hóa từng cái Là khối thẻ, thẻ này sẽ hiển thị dạng thả xuống dưới dạng cho phép các bạn chọn một danh sách được xổ số trong thẻ 09. Thẻ này sẽ có thẻ 20 đi kèm với đó là tùy chọn tương ứng với 38 mà các bạn chọn. Trong thẻ chọn cũng có trường 0 như những thẻ đầu vào vì để phân biệt và sử dụng trong biểu mẫu nha6 Tuy nhiên, chọn mặc định không được đẹp cho nên thông thường người ta sẽ tùy biến lại bằng các thẻ HTML khác như div, ul li thay vì sử dụng tùy chọn mặc định (Custom dropdown## Sự khác nhau giữa input type submit và button type submit Nhiều bạn có hỏi là 2 thẻ này khác nhau ra sao thì mình xin giải thích cho các bạn biết nhen. Khi các bạn sử dụng input type submit thì nó là thẻ tự đóng cho nên không truyền HTML vào giữa được, còn nút thẻ thì các bạn có thể chèn HTML vào giữa như sau Cái nút thì có thể dùng pseudo như 23 hay 24 còn input type thì không. Làm như vậy thường khi làm việc với số lượng biểu mẫu nhiều hơn sẽ sử dụng nút thẻ hơn vì có thể tùy biến được nhiều hơn như hình bên dưới mình sử dụng nút thẻ và có tải bên trong khi gửi biểu mẫu. Nút đang tải # Tạm dừngPhần này chỉ nói đến các thẻ trong Form thôi mà cũng nhiều kiến thức phết. Hi vọng nó sẽ có ích cho các bạn mới học nha. Ở phần tiếp theo mình sẽ nói đến các thẻ khác như thẻ về bảng, thẻ meta…. Chúc các bạn học tập tốt và một ngày tốt lành vui vẻ |