Đầu vào trong HTML là gì?

Gần như mọi ứng dụng chúng tôi phát triển bằng HTML đều sử dụng

 Nội dung chính Show
 
Các loại đầu vào HTML phổ biến
loại ẩn cho đầu vào
loại văn bản cho đầu vào
loại mật khẩu cho đầu vào
gửi loại cho đầu vào
loại nút cho đầu vào
loại tìm kiếm cho đầu vào
loại radio cho đầu vào
loại hộp kiểm cho đầu vào
loại đặt lại cho đầu vào
Đầu vào HTML cơ bản với xác thực loại
loại điện thoại cho đầu vào
loại url cho đầu vào
loại email cho đầu vào
loại số cho đầu vào
loại phạm vi cho đầu vào
Ngày Loại đầu vào HTML
loại ngày cho đầu vào
loại tháng cho đầu vào
loại tuần cho đầu vào
loại thời gian cho đầu vào
loại ngày cho đầu vào
Các loại đầu vào HTML khác
loại tệp cho đầu vào
loại hình ảnh cho đầu vào
Sự kết luận
5 loại yếu tố đầu vào trong HTML là gì?
Văn bản loại đầu vào trong HTML là gì?
 
<input type="submit" value="Submit" />

3 ở đâu đó, nhưng có một loạt các

<input type="submit" value="Submit" />

4 đầu vào mà bạn có thể không biết về. Vì vậy, hãy xem mọi thứ bạn có thể chưa biết về các loại

<input type="submit" value="Submit" />

3

Các loại đầu vào HTML phổ biến

Trong HTML, chúng ta có thể cung cấp cho đầu vào một loại cụ thể. Ví dụ: một đầu vào

<input type="submit" value="Submit" />

6 đơn giản, nơi người dùng có thể nhập văn bản vào một hộp, trông như thế này

<input type="text" />

Các loại đầu vào phổ biến nhất mà chúng tôi sử dụng là

• <input type="submit" value="Submit" />
  

  7 - đầu vào biểu mẫu bị ẩn, thường để lưu trữ các giá trị mà người dùng không cần xem

• <input type="submit" value="Submit" />
  

  6 - một kiểu nhập văn bản đơn giản

• <input type="submit" value="Submit" />
  

  9 - đầu vào trong đó văn bản được đánh dấu sao vì đó là mật khẩu

• <input type="button" value="My Button" />
  

  0 - ​​nút gửi để gửi biểu mẫu

• <input type="button" value="My Button" />
  

  1 - giống như gửi, nhưng nó không gửi biểu mẫu

• <input type="button" value="My Button" />
  

  2 - một nút có thể được chọn, từ một loạt các mục danh sách

• <input type="button" value="My Button" />
  

  3 - một tập hợp các nút có thể được kiểm tra và bỏ chọn

Cũng như các loại cơ bản này

• Ngoài ra còn có

  <input type="button" value="My Button" />
  

  4 - mặc dù không được sử dụng phổ biến nhưng nó có thể được sử dụng cho trường nhập liệu tìm kiếm, hiển thị một dấu gạch chéo nhỏ khi bạn nhập vào trường đó
• và chúng tôi cũng có

  <input type="button" value="My Button" />
  

  5, tạo một nút không gửi biểu mẫu và cho biết

  <input type="button" value="My Button" />
  

  5. Nó sẽ đặt lại tất cả các thành phần biểu mẫu khác

Những loại

<input type="submit" value="Submit" />

3 phổ biến này có ở khắp mọi nơi và chúng trông như thế này

loại ẩn cho đầu vào

(bạn không thể nhìn thấy cái này, vì nó bị ẩn. 😁)

loại văn bản cho đầu vào

Đây là cho bất kỳ đầu vào văn bản

loại mật khẩu cho đầu vào

Mọi thứ được nhập vào đây sẽ là mật khẩu

gửi loại cho đầu vào

Điều này tạo ra một nút gửi

<input type="submit" value="Submit" />

loại nút cho đầu vào

Điều này tạo ra một nút không gửi biểu mẫu

________số 8

loại tìm kiếm cho đầu vào

Điều này sẽ hiển thị một chút

<input type="button" value="My Button" />

8 khi bạn bắt đầu nhập vào nó

loại radio cho đầu vào

Loại

<input type="button" value="My Button" />

2 dành cho một tập hợp các mục, trong đó chúng tôi chỉ có thể chọn một. Chúng ta có thể phân biệt các bộ nút

<input type="button" value="My Button" />

2 khác nhau bằng cách gán cho chúng các thuộc tính

<input type="submit" value="Submit" />

11 phù hợp. Ví dụ, bên dưới, hai

<input type="submit" value="Submit" />

3 đầu tiên có tên là

<input type="submit" value="Submit" />

13, vì vậy chúng ta chỉ có thể chọn một từ bộ đó

Ghi chú. rằng

<input type="submit" value="Submit" />

14 là giá trị được gửi khi chúng tôi nhấp vào gửi. Nếu chúng tôi muốn cung cấp cho những thứ này một

<input type="submit" value="Submit" />

15, chúng tôi cần thêm văn bản bên cạnh

<input type="submit" value="Submit" />

3 hoặc sử dụng thẻ html

<input type="submit" value="Submit" />

15

<input type="submit" value="Submit" />

1

loại hộp kiểm cho đầu vào

Loại

<input type="button" value="My Button" />

3 tương tự như

<input type="button" value="My Button" />

2, chỉ khác là ta có thể chọn nhiều mục ở đây. Một lần nữa, chúng tôi có thể chia chúng thành các bộ, nhưng bạn vẫn có thể chọn nhiều

<input type="submit" value="Submit" />

3

<input type="submit" value="Submit" />

2

loại đặt lại cho đầu vào

Điều này sẽ đặt lại tất cả các thành phần đầu vào biểu mẫu khác. Nó tạo ra một nút có nội dung đơn giản là

<input type="submit" value="Submit" />

21

<input type="submit" value="Submit" />

4

Hãy thử thay đổi giá trị của đầu vào bên dưới, sau đó nhấp vào Đặt lại

Đầu vào HTML cơ bản với xác thực loại

Ngoài những kiểu đơn giản này, còn có một vài kiểu khác có thể khá hữu ích, chẳng hạn như

• <input type="submit" value="Submit" />
  

  22 - cho một số điện thoại

• <input type="submit" value="Submit" />
  

  23 - xác thực rằng đầu vào là một url

• <input type="submit" value="Submit" />
  

  24 - xác thực rằng đầu vào là một email

• <input type="submit" value="Submit" />
  

  25 - xác thực rằng đầu vào là một số

• <input type="submit" value="Submit" />
  

  26 - xác thực rằng đầu vào là một phạm vi

Ghi chú. các loại đầu vào này xác thực đầu vào ở phía máy khách, nhưng nó không nên được sử dụng như một phương pháp để đảm bảo rằng đầu vào chỉ chứa loại đó. Ví dụ:

<input type="submit" value="Submit" />

24 chỉ chấp nhận một loại email, nhưng người dùng có thể dễ dàng thay đổi giao diện người dùng để gửi nội dung nào đó không phải là

<input type="submit" value="Submit" />

24. Vì vậy, hãy chắc chắn rằng bạn cũng kiểm tra phần phụ trợ

loại điện thoại cho đầu vào

Về lý thuyết, điều này sẽ tạo ra lỗi nếu bạn cung cấp số điện thoại không hợp lệ sau khi nhấn gửi - tuy nhiên trên thực tế, nó không thực thi bất kỳ cú pháp cụ thể nào. Vì vậy,

<input type="submit" value="Submit" />

22 khá giống với

<input type="submit" value="Submit" />

6, chỉ khác là nó không thể chứa dấu xuống dòng hoặc xuống dòng

<input type="text" />

4

loại url cho đầu vào

Điều này sẽ không cho phép bất kỳ thứ gì không có định dạng URL

<input type="text" />

5

loại email cho đầu vào

Điều này sẽ chỉ cho phép các email hợp lệ

<input type="text" />

5

loại số cho đầu vào

Điều này sẽ xác nhận rằng đầu vào là một số

<input type="text" />

7

loại phạm vi cho đầu vào

Điều này sẽ tạo ra một thanh phạm vi. Vì nó cho phép chúng tôi chọn một phạm vi, chúng tôi cũng có thể sử dụng các thuộc tính

<input type="submit" value="Submit" />

41,

<input type="submit" value="Submit" />

42 và

<input type="submit" value="Submit" />

43 để đặt giá trị tối thiểu, giá trị tối đa và mức độ tăng của mỗi bước tương ứng

<input type="submit" value="Submit" />

0

Ngày Loại đầu vào HTML

Hầu hết chúng ta đều quen thuộc với

<input type="submit" value="Submit" />

44, nhưng có rất nhiều loại ngày cho đầu vào HTML, bao gồm

• <input type="submit" value="Submit" />
  

  45 - nhập ngày bất kỳ

• <input type="submit" value="Submit" />
  

  46 - cho phép bạn chọn một tháng

• <input type="submit" value="Submit" />
  

  47 - cho phép bạn chọn một tuần

• <input type="submit" value="Submit" />
  

  48 - cho phép bạn chọn thời gian cụ thể

• <input type="submit" value="Submit" />
  

  49 - cho phép bạn chọn kết hợp ngày/giờ

Mỗi trong số này được hiển thị dưới đây. Chúng khá hữu ích, mặc dù bị giới hạn trong việc triển khai giao diện người dùng của trình duyệt

loại ngày cho đầu vào

loại tháng cho đầu vào

loại tuần cho đầu vào

loại thời gian cho đầu vào

loại ngày cho đầu vào

Các loại đầu vào HTML khác

Ngoài tất cả những thứ này, chúng tôi cũng có các loại bổ sung sau

• <input type="text" />
  

  40 - để tải tệp lên máy chủ

• <input type="text" />
  

  41 - điều kỳ lạ nhất đối với các nút gửi đồ họa

loại tệp cho đầu vào

Loại tệp cho đầu vào tạo giao diện tải tệp lên

<input type="submit" value="Submit" />

1

loại hình ảnh cho đầu vào

Đây có lẽ là cái bạn ít có khả năng sử dụng nhất. Nó cho phép bạn cung cấp thuộc tính

<input type="text" />

42 và

<input type="text" />

43 cho thông tin đầu vào của bạn, được sử dụng làm nút gửi cho biểu mẫu của bạn - cuối cùng làm cho thông tin đầu vào của bạn hoạt động giống như một hình ảnh

<input type="submit" value="Submit" />

2

Sự kết luận

Điều đó bao gồm mọi loại đầu vào HTML mà bạn có thể sử dụng ngày nay. Tôi hy vọng bạn đã học được điều gì đó mới, ngay cả khi đó chỉ là kiểu đầu vào

<input type="text" />

44 kỳ quặc. Nếu bạn muốn tìm hiểu thêm về phát triển web, bạn có thể theo dõi tôi trên twitter hoặc xem fjolt

5 loại yếu tố đầu vào trong HTML là gì?

Văn bản loại đầu vào trong HTML là gì?