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ức

Là 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

  • Thuộc tính
    8 truyền vào đường dẫn hoặc tệp xử lý thông tin của biểu mẫu khi người dùng nhấn nút gửi
  • Thuộc tính
    9 thì nó liên quan đến các phương thức HTTP khi submit form, nếu các bạn học cơ bản tới đây thì chưa cần phải hiểu những cái này, sau này các bạn học Javascript rồi làm việc với API Server thì các bạn nhé.
  • Thuộc tính
    0 giúp phân biệt giữa các biểu mẫu với nhau nếu các bạn sử dụng nhiều biểu mẫu trong một trang web
  • Thuộc tính
    1 có giá trị mặc định là
    2 có nghĩa là nó sẽ hiển thị gợi ý khi bạn đăng nhập hoặc đăng ký khi bạn đưa chuột vào ô nhập thì nó gợi ý ra email không có giới hạn thì đó gọi là tự động hoàn thành, nếu bạn
  • Thuộc tính
    4 định nghĩa các kiểu dữ liệu sẽ được gửi đến máy chủ, như là chữ, hay html hay là hình ảnh…

Nút css bị vô hiệu hóa
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à

  • Giá trị
    6, cho phép người dùng nhập vào các ký tự nào cũng được như chữ, số, email…
  • Giá trị
    7 khá giống giá trị văn bản tuy nhiên trình duyệt sẽ hiểu đây là loại email buộc người dùng phải nhập email hợp lệ, khi ở trên thiết bị điện thoại thì bàn phím dành cho email sẽ hiển thị lên với dấu
    8
  • Giá trị
    9 thì phải nhập vào là số như số nguyên hoặc số lẻ, trên thiết bị điện thoại thì bàn phím số sẽ hiển thị lên tương ứng
  • Giá trị
    30 để khi người dùng nhập mật khẩu sẽ hiển thị dấu *
  • Giá trị
    31 sẽ hiển thị ngày khi người dùng nhập vào ngày tháng năm
  • Giá trị
    32 sẽ hiển thị thời gian khi người dùng muốn chọn thời gian
  • Giá trị
    33 dành cho người dùng muốn tải tệp lên ví dụ như cập nhật avatar thì phải có đầu vào là tệp để người dùng chọn được ảnh họ muốn
  • Giá trị
    34 là nút kiểm tra cho phép người dùng chọn hoặc bỏ chọn, hoặc có thể chọn nhiều cái, như khi liệt kê danh sách sở thích và người dùng có thể chọn nhiều cái trong đó hoặc không chọn cái nào
  • Giá trị
    35 cũng là nút kiểm tra nhưng chỉ được chọn 1 trong 2 hoặc 1 trong nhiều thứ chứ không được chọn nhiều ví dụ khi người dùng chọn giới tính nam hoặc nữ
  • Giá trị
    36 sẽ làm cho nó trở thành nút gửi cho người dùng khi điền xong thông tin và nhấn nút này hoặc nhấn nút Enter thì biểu mẫu sẽ gửi dữ liệu

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

Nút css bị vô hiệu hóa
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 đây

Thuộ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
Nút css bị vô hiệu hóa
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
Nút css bị vô hiệu hóa
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 đây

## Nhãn

Là 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

1
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
Nút css bị vô hiệu hóa
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
Nút css bị vô hiệu hóa
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ào

Nú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é

4
Nút css bị vô hiệu hóa
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

5 ## Tùy chọn chọn thẻ

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 nha

6
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 (
Nút css bị vô hiệu hóa
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

7
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 css bị vô hiệu hóa
Nút đang tải

# Tạm dừng

Phầ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ẻ