Làm cách nào để tô xám một hộp văn bản trong html?

Question

Có ai biết cách 'làm mờ' một trường trên màn hình lựa chọn không?

Tôi nghĩ phải làm gì với Screen itab?

Bất kỳ trợ giúp được đánh giá cao

        string GrayedText;
        private void textBox1_Enter(object sender, System. EventArgs e)
        {
            GrayedText = textBox1. Chữ; . Văn bản = ""; . Chỉ đọc = sai;
            textBox1.Text = ""; // Clears the text field
            textBox1.ReadOnly = false; // Makes the field editable
        }

        private void textBox1_Leave(object sender, System. EventArgs e)
        {
        textBox1. ReadOnly = true; . Văn bản = GrayedText;
            textBox1.Text = GrayedText; // Returns old text if you want
        }

Tuy nhiên, tôi muốn áp dụng một số kiểu dáng CSS cho văn bản mặc định để nó trông giống như văn bản hướng dẫn và không có gì khác. Bạn có bất cứ ý tưởng về làm thế nào để thực hiện điều này?

Văn bản mặc định sẽ có màu xám
Onmouseover, văn bản sẽ biến mất và khi người dùng bắt đầu nhập, nó sẽ chỉ có màu đen thông thường

Đây là mã hiện tại cho việc này

Cảm ơn.
Donny

Thuộc tính

<input type="checkbox" name="checkbox"/>

49 có thể được đặt để ngăn người dùng sử dụng phần tử

<input type="checkbox" name="checkbox"/>

50 cho đến khi một số điều kiện khác được đáp ứng (như chọn hộp kiểm, v.v. ). Sau đó, JavaScript có thể xóa giá trị bị vô hiệu hóa và làm cho phần tử

<input type="checkbox" name="checkbox"/>

50 có thể sử dụng được

Bây giờ, tôi có thể giúp tôi giảm đầu vào Độ tuổi (434) về chiều rộng của
nhãn của nó không và hy vọng vẫn có chiều cao và cân nặng trên cùng một dòng.
Ngoài ra, bạn có thể cung cấp cho tôi mã để thay đổi giao diện của trường nhập thành
'màu xám' hoặc một số giao diện khác để phân biệt với trường đang hoạt động không
field requiring an input. I have set the field to read-only, but that
không thay đổi giao diện của trường
https. //www. dấu gạch nối. com//?formID=43420990799871
Tôi đã sử dụng Trình thiết kế biểu mẫu để tạo kiểu cụ thể cho trường Tuổi
Đây là kết quả mã CSS
#input_434 {
chiều rộng. 35px;
lai lịch. #e1c2c2;
}
Bạn có thể điều chỉnh độ rộng px và màu nền theo sở thích của mình
Hãy cho chúng tôi biết nếu bạn cần thêm sự trợ giúp

Phần tử HTML

<input type="date" name="date"/>

7 được sử dụng để tạo các điều khiển tương tác cho các biểu mẫu dựa trên web nhằm chấp nhận dữ liệu từ người dùng; . Phần tử

<input type="date" name="date"/>

7 là một trong những phần tử mạnh mẽ và phức tạp nhất trong toàn bộ HTML do số lượng kết hợp tuyệt đối của các loại đầu vào và thuộc tính

Thử nó

các loại

Cách thức hoạt động của một

<input type="date" name="date"/>

7 thay đổi đáng kể tùy thuộc vào giá trị của thuộc tính

<input type="datetime-local" name="datetime-local"/>

0 của nó, do đó các loại khác nhau được trình bày trong các trang tham khảo riêng của chúng. Nếu thuộc tính này không được chỉ định, loại mặc định được chấp nhận là

<input type="datetime-local" name="datetime-local"/>

1

Các loại có sẵn như sau

LoạiMô tảVí dụ cơ bảnnútMột nút ấn không có hành vi mặc định hiển thị giá trị của thuộc tính

<input type="datetime-local" name="datetime-local"/>

2, trống theo mặc định

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

hộp kiểmMột hộp kiểm cho phép chọn/bỏ chọn các giá trị đơn lẻ

________số 8

colorMột điều khiển để chỉ định một màu;

<input type="color" name="color"/>

dateMột điều khiển để nhập ngày (năm, tháng và ngày, không có thời gian). Mở bộ chọn ngày hoặc bánh xe số cho năm, tháng, ngày khi hoạt động trong trình duyệt hỗ trợ

<input type="date" name="date"/>

datetime-localMột điều khiển để nhập ngày và giờ, không có múi giờ. Mở bộ chọn ngày hoặc bánh xe số cho các thành phần ngày và giờ khi hoạt động trong các trình duyệt hỗ trợ

<input type="datetime-local" name="datetime-local"/>

emailMột trường để chỉnh sửa địa chỉ email. Trông giống như một đầu vào

<input type="datetime-local" name="datetime-local"/>

1, nhưng có các tham số xác thực và bàn phím có liên quan trong việc hỗ trợ các trình duyệt và thiết bị có bàn phím động

<input type="date" name="date"/>

3

fileMột điều khiển cho phép người dùng chọn một tập tin. Sử dụng thuộc tính

<input type="datetime-local" name="datetime-local"/>

4 để xác định loại tệp mà điều khiển có thể chọn

<input type="date" name="date"/>

5

hiddenMột điều khiển không được hiển thị nhưng giá trị của nó được gửi tới máy chủ. Có một ví dụ trong cột tiếp theo, nhưng nó bị ẩn

<input type="date" name="date"/>

6

hình ảnhMột nút

<input type="datetime-local" name="datetime-local"/>

5 đồ họa. Hiển thị hình ảnh được xác định bởi thuộc tính

<input type="datetime-local" name="datetime-local"/>

6. Thuộc tính

<input type="datetime-local" name="datetime-local"/>

7 hiển thị nếu hình ảnh

<input type="datetime-local" name="datetime-local"/>

6 bị thiếu

<input type="date" name="date"/>

1

monthMột điều khiển để nhập một tháng và năm, không có múi giờ

<input type="date" name="date"/>

2

numberMột điều khiển để nhập một số. Hiển thị một công cụ quay vòng và thêm xác thực mặc định. Hiển thị bàn phím số trong một số thiết bị có bàn phím động

<input type="checkbox" name="checkbox"/>

0

mật khẩuMột trường văn bản một dòng có giá trị bị che khuất. Sẽ cảnh báo người dùng nếu trang web không an toàn

<input type="checkbox" name="checkbox"/>

1

nút radio radio, cho phép chọn một giá trị duy nhất trong số nhiều lựa chọn có cùng giá trị ________ 49

<input type="checkbox" name="checkbox"/>

2

phạm viMột điều khiển để nhập một số có giá trị chính xác là không quan trọng. Hiển thị dưới dạng tiện ích phạm vi mặc định là giá trị ở giữa. Được sử dụng kết hợp với

<input type="date" name="date"/>

30 và

<input type="date" name="date"/>

31 để xác định phạm vi giá trị chấp nhận được

<input type="checkbox" name="checkbox"/>

3

resetMột nút đặt lại nội dung của biểu mẫu về giá trị mặc định. Không được khuyến khích

<input type="checkbox" name="checkbox"/>

4

tìm kiếm Trường văn bản một dòng để nhập chuỗi tìm kiếm. Ngắt dòng được tự động loại bỏ khỏi giá trị đầu vào. Có thể bao gồm biểu tượng xóa trong các trình duyệt hỗ trợ có thể được sử dụng để xóa trường. Hiển thị biểu tượng tìm kiếm thay vì phím enter trên một số thiết bị có bàn phím động

<input type="checkbox" name="checkbox"/>

5

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

<input type="checkbox" name="checkbox"/>

6

Điều khiển telA để nhập số điện thoại. Hiển thị bàn phím điện thoại trong một số thiết bị có bàn phím động

<input type="checkbox" name="checkbox"/>

7

textGiá trị mặc định. Trường văn bản một dòng. Ngắt dòng được tự động loại bỏ khỏi giá trị đầu vào

<input type="checkbox" name="checkbox"/>

8

timeMột điều khiển để nhập giá trị thời gian không có múi giờ

<input type="checkbox" name="checkbox"/>

9

trường urlA để nhập URL. Trông giống như một đầu vào

<input type="datetime-local" name="datetime-local"/>

1, nhưng có các tham số xác thực và bàn phím có liên quan trong việc hỗ trợ các trình duyệt và thiết bị có bàn phím động

<input type="color" name="color"/>

0

weekMột điều khiển để nhập ngày bao gồm số tuần-năm và số tuần không có múi giờ

<input type="color" name="color"/>

1

Các giá trị lỗi thời_______133 Không dùng nữa Kiểm soát để nhập ngày và giờ (giờ, phút, giây và phần nhỏ của giây) dựa trên UTC .

<input type="color" name="color"/>

2

Thuộc tính

Phần tử

<input type="date" name="date"/>

7 rất mạnh vì các thuộc tính của nó; . Vì mọi phần tử

<input type="date" name="date"/>

7, bất kể loại nào, đều dựa trên giao diện

<input type="date" name="date"/>

37, nên về mặt kỹ thuật, chúng chia sẻ cùng một bộ thuộc tính. Tuy nhiên, trên thực tế, hầu hết các thuộc tính chỉ có tác dụng đối với một tập con cụ thể của các loại đầu vào. Ngoài ra, cách một số thuộc tính tác động đến đầu vào phụ thuộc vào loại đầu vào, tác động đến các loại đầu vào khác nhau theo những cách khác nhau

Phần này cung cấp một bảng liệt kê tất cả các thuộc tính với một mô tả ngắn gọn. Theo sau bảng này là một danh sách mô tả chi tiết hơn từng thuộc tính, cùng với loại đầu vào mà chúng được liên kết với. Những loại phổ biến đối với hầu hết hoặc tất cả các loại đầu vào được xác định chi tiết hơn bên dưới. Các thuộc tính duy nhất cho các loại đầu vào cụ thể—hoặc các thuộc tính chung cho tất cả các loại đầu vào nhưng có hành vi đặc biệt khi được sử dụng trên một loại đầu vào nhất định—thay vào đó được ghi lại trên các trang của các loại đó

Các thuộc tính cho phần tử

<input type="date" name="date"/>

7 bao gồm các thuộc tính HTML toàn cục và thêm vào đó

Loại thuộc tính hoặc LoạiMô tả

<input type="datetime-local" name="datetime-local"/>

4

<input type="date" name="date"/>

50Gợi ý cho loại tệp dự kiến trong các điều khiển tải tệp lên

<input type="datetime-local" name="datetime-local"/>

7

<input type="date" name="date"/>

52thuộc tính alt cho loại hình ảnh. Cần thiết cho khả năng truy cập

<input type="date" name="date"/>

53tất cả ngoại trừ

<input type="date" name="date"/>

54,

<input type="date" name="date"/>

55 và các nútGợi ý cho tính năng tự động điền biểu mẫu

<input type="date" name="date"/>

56

<input type="date" name="date"/>

50Phương thức nhập chụp phương tiện trong điều khiển tải lên tệp

<input type="date" name="date"/>

58

<input type="date" name="date"/>

54,

<input type="date" name="date"/>

55Liệu lệnh hoặc điều khiển có được kiểm tra hay không

<input type="date" name="date"/>

61

<input type="date" name="date"/>

62,

<input type="datetime-local" name="datetime-local"/>

1Tên của trường biểu mẫu sẽ sử dụng để gửi hướng của phần tử trong biểu mẫu gửi

<input type="date" name="date"/>

64tất cả Điều khiển biểu mẫu có bị vô hiệu hóa hay không

<input type="date" name="date"/>

65tất cả các Hiệp hội . Có cho phép nhiều giá trị

<input type="datetime-local" name="datetime-local"/>

9allName của điều khiển biểu mẫu hay không. Được gửi cùng với biểu mẫu như một phần của cặp tên/giá trị

<input type="checkbox" name="checkbox"/>

36

<input type="datetime-local" name="datetime-local"/>

1,

<input type="date" name="date"/>

62,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

13,

<input type="date" name="date"/>

26Mẫu mà

<input type="datetime-local" name="datetime-local"/>

2 phải khớp để hợp lệ

<input type="checkbox" name="checkbox"/>

44

<input type="datetime-local" name="datetime-local"/>

1,

<input type="date" name="date"/>

62,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

13,

<input type="date" name="date"/>

26,

<input type="checkbox" name="checkbox"/>

06Văn bản xuất hiện trong biểu mẫu kiểm soát khi nó có . Giá trị không thể chỉnh sửa

<input type="checkbox" name="checkbox"/>

58tất cả ngoại trừ

<input type="date" name="date"/>

25,

<input type="checkbox" name="checkbox"/>

07,

<input type="checkbox" name="checkbox"/>

55 và các nútBoolean. Một giá trị được yêu cầu hoặc phải được kiểm tra để biểu mẫu có thể gửi được

<input type="checkbox" name="checkbox"/>

62

<input type="datetime-local" name="datetime-local"/>

1,

<input type="date" name="date"/>

62,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

13,

<input type="date" name="date"/>

26Kích thước của điều khiển

<input type="datetime-local" name="datetime-local"/>

6

<input type="date" name="date"/>

52Giống như thuộc tính

<input type="datetime-local" name="datetime-local"/>

6 cho

<input type="date" name="date"/>

23;

Một vài thuộc tính không chuẩn bổ sung được liệt kê sau phần mô tả của các thuộc tính chuẩn

thuộc tính cá nhân

<input type="datetime-local" name="datetime-local"/>

4

Chỉ hợp lệ cho loại đầu vào

<input type="date" name="date"/>

50, thuộc tính

<input type="datetime-local" name="datetime-local"/>

4 xác định loại tệp nào có thể chọn trong điều khiển tải lên

<input type="date" name="date"/>

50. Xem loại tệp đầu vào

<input type="datetime-local" name="datetime-local"/>

7

Chỉ hợp lệ cho nút

<input type="date" name="date"/>

52, thuộc tính

<input type="datetime-local" name="datetime-local"/>

7 cung cấp văn bản thay thế cho hình ảnh, hiển thị giá trị của thuộc tính nếu hình ảnh

<input type="datetime-local" name="datetime-local"/>

6 bị thiếu hoặc không tải được. Xem loại đầu vào hình ảnh

<input type="date" name="date"/>

53

(Không phải thuộc tính Boolean. ) Thuộc tính

<input type="date" name="date"/>

53 lấy giá trị của nó là một chuỗi được phân tách bằng dấu cách mô tả loại chức năng tự động hoàn thành, nếu có, mà đầu vào sẽ cung cấp. Việc triển khai tính năng tự động hoàn thành điển hình gọi lại các giá trị trước đó đã nhập trong cùng một trường đầu vào, nhưng có thể tồn tại các dạng tự động hoàn thành phức tạp hơn. Chẳng hạn, trình duyệt có thể tích hợp với danh sách liên hệ của thiết bị để tự động điền địa chỉ

<input type="checkbox" name="checkbox"/>

13 trong trường nhập email. Xem Giá trị trong thuộc tính HTML. tự động hoàn thành cho các giá trị được phép

Thuộc tính

<input type="date" name="date"/>

53 có giá trị trên

<input type="date" name="date"/>

25,

<input type="datetime-local" name="datetime-local"/>

1,

<input type="date" name="date"/>

62,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

13,

<input type="checkbox" name="checkbox"/>

01,

<input type="checkbox" name="checkbox"/>

02,

<input type="checkbox" name="checkbox"/>

03,

<input type="checkbox" name="checkbox"/>

04,

<input type="checkbox" name="checkbox"/>

05,

<input type="checkbox" name="checkbox"/>

06,

<input type="checkbox" name="checkbox"/>

07,

<input type="checkbox" name="checkbox"/>

55 và

<input type="date" name="date"/>

26. Thuộc tính này không có tác dụng đối với các loại đầu vào không trả về dữ liệu số hoặc văn bản, có giá trị đối với tất cả các loại đầu vào ngoại trừ

<input type="date" name="date"/>

54,

<input type="date" name="date"/>

55,

<input type="date" name="date"/>

50 hoặc bất kỳ loại nút nào

Xem Thuộc tính tự động điền HTML để biết thêm thông tin, bao gồm thông tin về bảo mật mật khẩu và cách

<input type="date" name="date"/>

53 hơi khác đối với

<input type="date" name="date"/>

25 so với các loại đầu vào khác

<input type="color" name="color"/>

19

Một thuộc tính Boolean, nếu có, cho biết rằng đầu vào sẽ tự động có tiêu điểm khi trang tải xong (hoặc khi

<input type="color" name="color"/>

20 chứa phần tử đã được hiển thị)

Ghi chú. Một phần tử có thuộc tính

<input type="color" name="color"/>

19 có thể lấy tiêu điểm trước khi sự kiện

<input type="color" name="color"/>

22 được kích hoạt

Không nhiều hơn một phần tử trong tài liệu có thể có thuộc tính

<input type="color" name="color"/>

19. Nếu đặt nhiều hơn một phần tử, phần tử đầu tiên có thuộc tính sẽ nhận tiêu điểm

Không thể sử dụng thuộc tính

<input type="color" name="color"/>

19 cho các đầu vào loại

<input type="date" name="date"/>

25, vì không thể tập trung vào các đầu vào ẩn

Cảnh báo. Tự động tập trung điều khiển biểu mẫu có thể gây nhầm lẫn cho những người khiếm thị đang sử dụng công nghệ đọc màn hình và những người bị suy giảm nhận thức. Khi

<input type="color" name="color"/>

19 được chỉ định, trình đọc màn hình "dịch chuyển tức thời" người dùng của họ đến điều khiển biểu mẫu mà không báo trước cho họ

Cân nhắc cẩn thận khả năng truy cập khi áp dụng thuộc tính

<input type="color" name="color"/>

19. Tự động tập trung vào một điều khiển có thể khiến trang cuộn khi tải. Tiêu điểm cũng có thể khiến bàn phím động hiển thị trên một số thiết bị cảm ứng. Mặc dù trình đọc màn hình sẽ thông báo nhãn của tiêu điểm nhận điều khiển biểu mẫu, nhưng trình đọc màn hình sẽ không thông báo bất kỳ điều gì trước nhãn và người dùng được nhìn thấy trên một thiết bị nhỏ cũng sẽ bỏ lỡ ngữ cảnh được tạo bởi nội dung trước đó

<input type="date" name="date"/>

56

Được giới thiệu trong đặc tả HTML Media Capture và chỉ hợp lệ cho loại đầu vào

<input type="date" name="date"/>

50, thuộc tính

<input type="date" name="date"/>

56 xác định phương tiện nào—micrô, video hoặc máy ảnh—nên được sử dụng để chụp tệp mới để tải lên với điều khiển tải lên

<input type="date" name="date"/>

50 trong các tình huống hỗ trợ. Xem loại tệp đầu vào

<input type="date" name="date"/>

58

Hợp lệ cho cả hai loại

<input type="date" name="date"/>

55 và

<input type="date" name="date"/>

54,

<input type="date" name="date"/>

58 là một thuộc tính Boolean. Nếu xuất hiện trên loại

<input type="date" name="date"/>

55, điều đó cho biết rằng nút radio là nút hiện được chọn trong nhóm các nút radio cùng tên. Nếu xuất hiện trên loại

<input type="date" name="date"/>

54, điều đó cho biết rằng hộp kiểm được chọn theo mặc định (khi tải trang). Nó không cho biết liệu hộp kiểm này hiện có được chọn hay không. nếu trạng thái của hộp kiểm bị thay đổi, thuộc tính nội dung này không phản ánh sự thay đổi. (Chỉ thuộc tính IDL

<input type="date" name="date"/>

58 của

<input type="date" name="date"/>

37 được cập nhật. )

Ghi chú. Không giống như các điều khiển đầu vào khác, giá trị hộp kiểm và nút radio chỉ được bao gồm trong dữ liệu đã gửi nếu chúng hiện đang

<input type="date" name="date"/>

58. Nếu có, tên và (các) giá trị của các điều khiển đã chọn sẽ được gửi

Ví dụ: nếu một hộp kiểm có

<input type="datetime-local" name="datetime-local"/>

9 là

<input type="color" name="color"/>

42 có một

<input type="datetime-local" name="datetime-local"/>

2 là

<input type="color" name="color"/>

44 và hộp kiểm này được chọn, thì dữ liệu biểu mẫu được gửi sẽ bao gồm

<input type="color" name="color"/>

45. Nếu hộp kiểm không hoạt động, nó hoàn toàn không được liệt kê trong dữ liệu biểu mẫu.

<input type="datetime-local" name="datetime-local"/>

2 mặc định cho các hộp kiểm và nút radio là

<input type="color" name="color"/>

47

<input type="date" name="date"/>

61

Chỉ hợp lệ cho các loại đầu vào

<input type="datetime-local" name="datetime-local"/>

1 và

<input type="date" name="date"/>

62, thuộc tính

<input type="date" name="date"/>

61 cho phép gửi hướng của phần tử. Khi được bao gồm, điều khiển biểu mẫu sẽ gửi với hai cặp tên/giá trị. đầu tiên là

<input type="datetime-local" name="datetime-local"/>

9 và

<input type="datetime-local" name="datetime-local"/>

2, thứ hai là giá trị của

<input type="date" name="date"/>

61 dưới dạng tên với giá trị của

<input type="color" name="color"/>

55 hoặc

<input type="color" name="color"/>

56 được đặt bởi trình duyệt

<input type="color" name="color"/>

3

Khi biểu mẫu trên được gửi, đầu vào khiến cả cặp

<input type="datetime-local" name="datetime-local"/>

9 /

<input type="datetime-local" name="datetime-local"/>

2 của

<input type="color" name="color"/>

45 và cặp

<input type="date" name="date"/>

61 / hướng của

<input type="color" name="color"/>

61 được gửi

<input type="date" name="date"/>

64

Một thuộc tính Boolean, nếu có, cho biết rằng người dùng sẽ không thể tương tác với đầu vào. Đầu vào bị vô hiệu hóa thường được hiển thị bằng màu mờ hơn hoặc sử dụng một số hình thức chỉ báo khác rằng trường không khả dụng để sử dụng

Cụ thể, đầu vào bị vô hiệu hóa không nhận được sự kiện

<input type="color" name="color"/>

63 và đầu vào bị vô hiệu hóa không được gửi cùng với biểu mẫu

Ghi chú. Mặc dù thông số kỹ thuật không yêu cầu, nhưng theo mặc định, Firefox sẽ duy trì trạng thái bị vô hiệu hóa động của một

<input type="date" name="date"/>

7 trong các lần tải trang. Sử dụng thuộc tính

<input type="date" name="date"/>

53 để kiểm soát tính năng này

<input type="date" name="date"/>

65

Một chuỗi chỉ định phần tử

<input type="color" name="color"/>

67 mà đầu vào được liên kết với (nghĩa là chủ sở hữu biểu mẫu của nó). Giá trị của chuỗi này, nếu có, phải khớp với

<input type="color" name="color"/>

68 của phần tử

<input type="color" name="color"/>

67 trong cùng một tài liệu. Nếu thuộc tính này không được chỉ định, phần tử

<input type="date" name="date"/>

7 được liên kết với biểu mẫu chứa gần nhất, nếu có

Thuộc tính

<input type="date" name="date"/>

65 cho phép bạn đặt đầu vào ở bất kỳ đâu trong tài liệu nhưng bao gồm nó cùng với một biểu mẫu ở nơi khác trong tài liệu

Ghi chú. Một đầu vào chỉ có thể được liên kết với một hình thức

<input type="date" name="date"/>

66

Chỉ hợp lệ cho các loại đầu vào

<input type="date" name="date"/>

52 và

<input type="datetime-local" name="datetime-local"/>

5. Xem loại đầu vào gửi để biết thêm thông tin

<input type="date" name="date"/>

69

Chỉ hợp lệ cho các loại đầu vào

<input type="date" name="date"/>

52 và

<input type="datetime-local" name="datetime-local"/>

5. Xem loại đầu vào gửi để biết thêm thông tin

<input type="date" name="date"/>

12

Chỉ hợp lệ cho các loại đầu vào

<input type="date" name="date"/>

52 và

<input type="datetime-local" name="datetime-local"/>

5. Xem loại đầu vào gửi để biết thêm thông tin

<input type="date" name="date"/>

15

Chỉ hợp lệ cho các loại đầu vào

<input type="date" name="date"/>

52 và

<input type="datetime-local" name="datetime-local"/>

5. Xem loại đầu vào gửi để biết thêm thông tin

<input type="date" name="date"/>

18

Chỉ hợp lệ cho các loại đầu vào

<input type="date" name="date"/>

52 và

<input type="datetime-local" name="datetime-local"/>

5. Xem loại đầu vào gửi để biết thêm thông tin

<input type="date" name="date"/>

21

Chỉ hợp lệ cho nút nhập

<input type="date" name="date"/>

52,

<input type="date" name="date"/>

21 là chiều cao của tệp hình ảnh sẽ hiển thị để thể hiện nút gửi đồ họa. Xem loại đầu vào hình ảnh

<input type="color" name="color"/>

68

Thuộc tính toàn cầu hợp lệ cho tất cả các phần tử, bao gồm tất cả các loại đầu vào, nó xác định một mã định danh (ID) duy nhất phải là duy nhất trong toàn bộ tài liệu. Mục đích của nó là để xác định phần tử khi liên kết. Giá trị được sử dụng làm giá trị của thuộc tính

<input type="color" name="color"/>

92 của

<input type="color" name="color"/>

91 để liên kết nhãn với điều khiển biểu mẫu. Xem

<input type="color" name="color"/>

91

<input type="color" name="color"/>

94

Giá trị chung hợp lệ cho tất cả các phần tử, nó cung cấp gợi ý cho trình duyệt về loại cấu hình bàn phím ảo sẽ sử dụng khi chỉnh sửa phần tử này hoặc nội dung của nó. Các giá trị bao gồm

<input type="color" name="color"/>

95,

<input type="datetime-local" name="datetime-local"/>

1,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

13,

<input type="date" name="date"/>

00,

<input type="date" name="date"/>

01 và

<input type="date" name="date"/>

62

<input type="date" name="date"/>

24

Giá trị được cung cấp cho thuộc tính

<input type="date" name="date"/>

24 phải là

<input type="color" name="color"/>

68 của phần tử

<input type="date" name="date"/>

29 nằm trong cùng một tài liệu.

<input type="date" name="date"/>

29 cung cấp danh sách các giá trị được xác định trước để đề xuất cho người dùng cho đầu vào này. Bất kỳ giá trị nào trong danh sách không tương thích với

<input type="datetime-local" name="datetime-local"/>

0 đều không được đưa vào các tùy chọn được đề xuất. Các giá trị được cung cấp là đề xuất, không phải yêu cầu. người dùng có thể chọn từ danh sách được xác định trước này hoặc cung cấp một giá trị khác

Nó có hiệu lực trên

<input type="datetime-local" name="datetime-local"/>

1,

<input type="date" name="date"/>

62,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

13,

<input type="checkbox" name="checkbox"/>

01,

<input type="checkbox" name="checkbox"/>

02,

<input type="checkbox" name="checkbox"/>

03,

<input type="checkbox" name="checkbox"/>

04,

<input type="checkbox" name="checkbox"/>

05,

<input type="checkbox" name="checkbox"/>

06,

<input type="checkbox" name="checkbox"/>

07, và

<input type="checkbox" name="checkbox"/>

55

Theo thông số kỹ thuật, thuộc tính

<input type="date" name="date"/>

24 không được hỗ trợ bởi

<input type="date" name="date"/>

25,

<input type="date" name="date"/>

26,

<input type="date" name="date"/>

54,

<input type="date" name="date"/>

55,

<input type="date" name="date"/>

50 hoặc bất kỳ loại nút nào

Tùy thuộc vào trình duyệt, người dùng có thể thấy một bảng màu tùy chỉnh được đề xuất, các dấu tic dọc theo một phạm vi hoặc thậm chí một đầu vào mở ra như một

<input type="date" name="date"/>

28 nhưng cho phép các giá trị không được liệt kê. Kiểm tra bảng tương thích của trình duyệt để biết các loại đầu vào khác

Xem phần tử

<input type="date" name="date"/>

29

<input type="date" name="date"/>

31

Hợp lệ cho

<input type="checkbox" name="checkbox"/>

01,

<input type="checkbox" name="checkbox"/>

02,

<input type="checkbox" name="checkbox"/>

03,

<input type="checkbox" name="checkbox"/>

04,

<input type="checkbox" name="checkbox"/>

05,

<input type="checkbox" name="checkbox"/>

06 và

<input type="checkbox" name="checkbox"/>

07, nó xác định giá trị lớn nhất trong phạm vi giá trị được phép. Nếu

<input type="datetime-local" name="datetime-local"/>

2 được nhập vào phần tử vượt quá giá trị này, thì phần tử không xác thực được ràng buộc. Nếu giá trị của thuộc tính

<input type="date" name="date"/>

31 không phải là số thì phần tử đó không có giá trị lớn nhất

Có một trường hợp đặc biệt. nếu loại dữ liệu là định kỳ (chẳng hạn như ngày tháng hoặc thời gian), giá trị của

<input type="date" name="date"/>

31 có thể thấp hơn giá trị của

<input type="date" name="date"/>

30, điều này cho biết rằng phạm vi có thể bao quanh;

<input type="checkbox" name="checkbox"/>

08

Hợp lệ cho

<input type="datetime-local" name="datetime-local"/>

1,

<input type="date" name="date"/>

62,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

13 và

<input type="date" name="date"/>

26, nó xác định số ký tự tối đa (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào trường. Đây phải là một giá trị số nguyên

<input type="date" name="date"/>

49 hoặc cao hơn. Nếu không có

<input type="checkbox" name="checkbox"/>

08 nào được chỉ định hoặc một giá trị không hợp lệ được chỉ định, thì trường này không có độ dài tối đa. Giá trị này cũng phải lớn hơn hoặc bằng giá trị của

<input type="checkbox" name="checkbox"/>

24

Đầu vào sẽ không xác thực được ràng buộc nếu độ dài của văn bản được nhập vào trường này dài hơn

<input type="checkbox" name="checkbox"/>

08 đơn vị mã UTF-16. Theo mặc định, trình duyệt ngăn người dùng nhập nhiều ký tự hơn mức cho phép của thuộc tính

<input type="checkbox" name="checkbox"/>

08. Xem Xác thực phía máy khách để biết thêm thông tin

<input type="date" name="date"/>

30

Hợp lệ cho

<input type="checkbox" name="checkbox"/>

01,

<input type="checkbox" name="checkbox"/>

02,

<input type="checkbox" name="checkbox"/>

03,

<input type="checkbox" name="checkbox"/>

04,

<input type="checkbox" name="checkbox"/>

05,

<input type="checkbox" name="checkbox"/>

06 và

<input type="checkbox" name="checkbox"/>

07, nó xác định giá trị âm nhất trong phạm vi giá trị được phép. Nếu

<input type="datetime-local" name="datetime-local"/>

2 được nhập vào phần tử nhỏ hơn giá trị này, thì phần tử không xác thực được ràng buộc. Nếu giá trị của thuộc tính

<input type="date" name="date"/>

30 không phải là số thì phần tử đó không có giá trị nhỏ nhất

Giá trị này phải nhỏ hơn hoặc bằng giá trị của thuộc tính

<input type="date" name="date"/>

31. Nếu có thuộc tính

<input type="date" name="date"/>

30 nhưng không được chỉ định hoặc không hợp lệ, thì không có giá trị

<input type="date" name="date"/>

30 nào được áp dụng. Nếu thuộc tính

<input type="date" name="date"/>

30 hợp lệ và giá trị không trống nhỏ hơn giá trị tối thiểu mà thuộc tính

<input type="date" name="date"/>

30 cho phép, thì việc xác thực ràng buộc sẽ ngăn việc gửi biểu mẫu. Xem Xác thực phía máy khách để biết thêm thông tin

Có một trường hợp đặc biệt. nếu loại dữ liệu là định kỳ (chẳng hạn như ngày tháng hoặc thời gian), giá trị của

<input type="date" name="date"/>

31 có thể thấp hơn giá trị của

<input type="date" name="date"/>

30, điều này cho biết rằng phạm vi có thể bao quanh;

<input type="checkbox" name="checkbox"/>

24

Hợp lệ cho

<input type="datetime-local" name="datetime-local"/>

1,

<input type="date" name="date"/>

62,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

13 và

<input type="date" name="date"/>

26, nó xác định số ký tự tối thiểu (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào trường nhập. Đây phải là một giá trị số nguyên không âm nhỏ hơn hoặc bằng giá trị được chỉ định bởi

<input type="checkbox" name="checkbox"/>

08. Nếu không có

<input type="checkbox" name="checkbox"/>

24 nào được chỉ định hoặc giá trị không hợp lệ được chỉ định, đầu vào không có độ dài tối thiểu

Đầu vào sẽ không xác thực ràng buộc nếu độ dài của văn bản được nhập vào trường nhỏ hơn

<input type="checkbox" name="checkbox"/>

24 đơn vị mã UTF-16, ngăn việc gửi biểu mẫu. Xem Xác thực phía máy khách để biết thêm thông tin

<input type="checkbox" name="checkbox"/>

32

Thuộc tính Boolean

<input type="checkbox" name="checkbox"/>

32, nếu được đặt, có nghĩa là người dùng có thể nhập các địa chỉ email được phân tách bằng dấu phẩy trong tiện ích email hoặc có thể chọn nhiều tệp có đầu vào

<input type="date" name="date"/>

50. Xem loại đầu vào email và tệp

<input type="datetime-local" name="datetime-local"/>

9

Một chuỗi chỉ định tên cho điều khiển đầu vào. Tên này được gửi cùng với giá trị của điều khiển khi dữ liệu biểu mẫu được gửi

Hãy coi

<input type="datetime-local" name="datetime-local"/>

9 là một thuộc tính bắt buộc (mặc dù không phải vậy). Nếu đầu vào không có

<input type="datetime-local" name="datetime-local"/>

9 được chỉ định hoặc

<input type="datetime-local" name="datetime-local"/>

9 trống, giá trị của đầu vào không được gửi cùng với biểu mẫu. (Điều khiển bị vô hiệu hóa, nút radio không được chọn, hộp kiểm không được chọn và nút đặt lại cũng không được gửi. )

Có hai trường hợp đặc biệt

```
<input type="date" name="date"/>
```
88. Nếu được sử dụng làm tên của phần tử
```
<input type="date" name="date"/>
```
7 thuộc loại ẩn, thì giá trị đầu vào
```
<input type="datetime-local" name="datetime-local"/>
```
2 sẽ được tác nhân người dùng tự động đặt thành mã hóa ký tự được sử dụng để gửi biểu mẫu

<input type="date" name="date"/>

91. Vì lý do lịch sử, tên

<input type="date" name="date"/>

91 không được phép

Thuộc tính

<input type="datetime-local" name="datetime-local"/>

9 tạo ra một hành vi duy nhất cho các nút radio

Mỗi lần chỉ có thể kiểm tra một nút radio trong một nhóm nút radio cùng tên. Chọn bất kỳ nút radio nào trong nhóm đó sẽ tự động bỏ chọn bất kỳ nút radio nào hiện được chọn trong cùng một nhóm. Giá trị của một nút radio đã chọn đó được gửi cùng với tên nếu biểu mẫu được gửi,

Khi tab vào một loạt các nút radio cùng tên, nếu một nút được chọn, nút đó sẽ nhận được tiêu điểm. Nếu chúng không được nhóm lại với nhau theo thứ tự nguồn, nếu một trong nhóm được chọn, thì việc chuyển sang nhóm sẽ bắt đầu khi gặp cái đầu tiên trong nhóm, bỏ qua tất cả những thứ không được chọn. Nói cách khác, nếu một nút được chọn, việc lập tab sẽ bỏ qua các nút radio không được chọn trong nhóm. Nếu không có cái nào được chọn, nhóm nút radio sẽ nhận được tiêu điểm khi đạt đến nút đầu tiên trong nhóm cùng tên

Sau khi một trong các nút radio trong nhóm có tiêu điểm, sử dụng các phím mũi tên sẽ điều hướng qua tất cả các nút radio cùng tên, ngay cả khi các nút radio không được nhóm lại với nhau theo thứ tự nguồn

Khi một phần tử đầu vào được gán một

<input type="datetime-local" name="datetime-local"/>

9, tên đó sẽ trở thành một thuộc tính của thuộc tính

<input type="date" name="date"/>

95 của phần tử biểu mẫu sở hữu. Nếu bạn có một đầu vào có

<input type="datetime-local" name="datetime-local"/>

9 được đặt thành

<input type="date" name="date"/>

97 và một đầu vào khác có

<input type="datetime-local" name="datetime-local"/>

9 là

<input type="date" name="date"/>

99, mã sau đây có thể được sử dụng

<input type="color" name="color"/>

4

Khi mã này đã chạy,

<input type="datetime-local" name="datetime-local"/>

00 sẽ là

<input type="date" name="date"/>

37 cho trường

<input type="date" name="date"/>

97 và

<input type="datetime-local" name="datetime-local"/>

03 là đối tượng cho trường

<input type="date" name="date"/>

99

Cảnh báo. Tránh cung cấp cho các phần tử biểu mẫu một

<input type="datetime-local" name="datetime-local"/>

9 tương ứng với thuộc tính tích hợp sẵn của biểu mẫu, vì khi đó bạn sẽ ghi đè thuộc tính hoặc phương thức được xác định trước bằng tham chiếu này đến đầu vào tương ứng

<input type="checkbox" name="checkbox"/>

36

Có giá trị đối với

<input type="datetime-local" name="datetime-local"/>

1,

<input type="date" name="date"/>

62,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

13 và

<input type="date" name="date"/>

26, thuộc tính

<input type="checkbox" name="checkbox"/>

36 xác định một biểu thức chính quy mà giá trị đầu vào của

<input type="datetime-local" name="datetime-local"/>

2 phải khớp để giá trị vượt qua xác thực ràng buộc. Nó phải là một biểu thức chính quy JavaScript hợp lệ, như được sử dụng bởi loại

<input type="datetime-local" name="datetime-local"/>

15 và như được ghi lại trong hướng dẫn của chúng tôi về các biểu thức chính quy; . Không được chỉ định dấu gạch chéo lên xung quanh văn bản mẫu

Nếu có thuộc tính

<input type="checkbox" name="checkbox"/>

36 nhưng không được chỉ định hoặc không hợp lệ, thì không có biểu thức chính quy nào được áp dụng và thuộc tính này bị bỏ qua hoàn toàn. Nếu thuộc tính mẫu hợp lệ và giá trị không trống không khớp với mẫu, xác thực ràng buộc sẽ ngăn việc gửi biểu mẫu

Ghi chú. Nếu sử dụng thuộc tính

<input type="checkbox" name="checkbox"/>

36, hãy thông báo cho người dùng về định dạng dự kiến bằng cách bao gồm văn bản giải thích bên cạnh. Bạn cũng có thể bao gồm thuộc tính

<input type="datetime-local" name="datetime-local"/>

19 để giải thích những yêu cầu để khớp với mẫu; . Lời giải thích rõ ràng là cần thiết cho khả năng tiếp cận. Chú giải công cụ là một cải tiến

Xem Xác thực phía máy khách để biết thêm thông tin

<input type="checkbox" name="checkbox"/>

44

Có giá trị đối với

<input type="datetime-local" name="datetime-local"/>

1,

<input type="date" name="date"/>

62,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

13,

<input type="date" name="date"/>

26 và

<input type="checkbox" name="checkbox"/>

06, thuộc tính

<input type="checkbox" name="checkbox"/>

44 cung cấp gợi ý ngắn gọn cho người dùng về loại thông tin được mong đợi trong trường. Nó phải là một từ hoặc cụm từ ngắn cung cấp gợi ý về loại dữ liệu dự kiến, thay vì giải thích hoặc nhắc nhở. Văn bản không được bao gồm dấu xuống dòng hoặc xuống dòng. Vì vậy, ví dụ: nếu một trường được mong đợi ghi lại tên của người dùng và nhãn của trường là "Tên", trình giữ chỗ phù hợp có thể là "e. g. Mustafa"

Ghi chú. Thuộc tính

<input type="checkbox" name="checkbox"/>

44 không hữu ích về mặt ngữ nghĩa như các cách khác để giải thích biểu mẫu của bạn và có thể gây ra sự cố kỹ thuật không mong muốn với nội dung của bạn. Xem Nhãn để biết thêm thông tin

<input type="checkbox" name="checkbox"/>

52

Một thuộc tính Boolean, nếu có, cho biết rằng người dùng sẽ không thể chỉnh sửa giá trị của đầu vào. Thuộc tính

<input type="checkbox" name="checkbox"/>

52 được hỗ trợ bởi các loại đầu vào

<input type="datetime-local" name="datetime-local"/>

1,

<input type="date" name="date"/>

62,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

13,

<input type="checkbox" name="checkbox"/>

01,

<input type="checkbox" name="checkbox"/>

02,

<input type="checkbox" name="checkbox"/>

03,

<input type="checkbox" name="checkbox"/>

04,

<input type="checkbox" name="checkbox"/>

05,

<input type="checkbox" name="checkbox"/>

06 và

<input type="date" name="date"/>

26

Xem thuộc tính HTML.

<input type="checkbox" name="checkbox"/>

52 để biết thêm thông tin

<input type="checkbox" name="checkbox"/>

58

<input type="checkbox" name="checkbox"/>

58 là một thuộc tính Boolean, nếu có, cho biết rằng người dùng phải chỉ định một giá trị cho đầu vào trước khi có thể gửi biểu mẫu sở hữu. Thuộc tính

<input type="checkbox" name="checkbox"/>

58 được hỗ trợ bởi các đầu vào

<input type="datetime-local" name="datetime-local"/>

1,

<input type="date" name="date"/>

62,

<input type="checkbox" name="checkbox"/>

11,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

13,

<input type="checkbox" name="checkbox"/>

01,

<input type="checkbox" name="checkbox"/>

02,

<input type="checkbox" name="checkbox"/>

03,

<input type="checkbox" name="checkbox"/>

04,

<input type="checkbox" name="checkbox"/>

05,

<input type="checkbox" name="checkbox"/>

06,

<input type="date" name="date"/>

26,

<input type="date" name="date"/>

54,

<input type="date" name="date"/>

55 và

<input type="date" name="date"/>

50

Xem Xác thực phía máy khách và thuộc tính HTML.

<input type="checkbox" name="checkbox"/>

58 để biết thêm thông tin

<input type="checkbox" name="checkbox"/>

62

Hợp lệ cho

<input type="checkbox" name="checkbox"/>

13,

<input type="date" name="date"/>

26,

<input type="checkbox" name="checkbox"/>

12,

<input type="checkbox" name="checkbox"/>

11 và

<input type="datetime-local" name="datetime-local"/>

1, thuộc tính

<input type="checkbox" name="checkbox"/>

62 chỉ định lượng đầu vào được hiển thị. Về cơ bản tạo ra kết quả tương tự như đặt thuộc tính CSS

<input type="checkbox" name="checkbox"/>

83 với một số điểm đặc biệt. Đơn vị thực tế của giá trị phụ thuộc vào loại đầu vào. Đối với

<input type="date" name="date"/>

26 và

<input type="datetime-local" name="datetime-local"/>

1, đó là một số ký tự (hoặc

<input type="datetime-local" name="datetime-local"/>

74 đơn vị) có giá trị mặc định là

<input type="datetime-local" name="datetime-local"/>

75 và đối với những người khác, đó là pixel (hoặc

<input type="datetime-local" name="datetime-local"/>

76 đơn vị). CSS

<input type="checkbox" name="checkbox"/>

83 được ưu tiên hơn thuộc tính

<input type="checkbox" name="checkbox"/>

62

<input type="datetime-local" name="datetime-local"/>

6

Chỉ hợp lệ cho nút nhập

<input type="date" name="date"/>

52, chuỗi

<input type="datetime-local" name="datetime-local"/>

6 chỉ định URL của tệp hình ảnh sẽ hiển thị để đại diện cho nút gửi đồ họa. Xem loại đầu vào hình ảnh

<input type="checkbox" name="checkbox"/>

73

Hợp lệ cho

<input type="checkbox" name="checkbox"/>

01,

<input type="checkbox" name="checkbox"/>

02,

<input type="checkbox" name="checkbox"/>

03,

<input type="checkbox" name="checkbox"/>

04,

<input type="checkbox" name="checkbox"/>

05,

<input type="checkbox" name="checkbox"/>

06 và

<input type="checkbox" name="checkbox"/>

07, thuộc tính

<input type="checkbox" name="checkbox"/>

73 là một số chỉ định mức độ chi tiết mà giá trị phải tuân thủ

Nếu không bao gồm rõ ràng

<input type="checkbox" name="checkbox"/>

73 mặc định là 1 cho

<input type="checkbox" name="checkbox"/>

06 và

<input type="checkbox" name="checkbox"/>

07

Mỗi loại đầu vào ngày/giờ có một giá trị mặc định

<input type="checkbox" name="checkbox"/>

73 phù hợp với loại; .

<input type="checkbox" name="checkbox"/>

01,

<input type="checkbox" name="checkbox"/>

05,

<input type="checkbox" name="checkbox"/>

02,

<input type="checkbox" name="checkbox"/>

04 và

<input type="checkbox" name="checkbox"/>

03

Giá trị phải là số dương—số nguyên hoặc số thực—hoặc giá trị đặc biệt

<input type="date" name="date"/>

300, có nghĩa là không ngụ ý bước nào và mọi giá trị đều được phép (ngoại trừ các ràng buộc khác, chẳng hạn như

<input type="date" name="date"/>

30 và

<input type="date" name="date"/>

31)

Nếu

<input type="date" name="date"/>

300 không được đặt rõ ràng, các giá trị hợp lệ cho loại đầu vào

<input type="checkbox" name="checkbox"/>

06, ngày/giờ và loại đầu vào

<input type="checkbox" name="checkbox"/>

07 sẽ bằng với cơ sở cho bước — giá trị

<input type="date" name="date"/>

30 và gia số của giá trị bước, lên đến giá trị

<input type="date" name="date"/>

31, nếu được chỉ định

Ví dụ: nếu bạn có

<input type="date" name="date"/>

308, thì bất kỳ số nguyên chẵn nào,

<input type="date" name="date"/>

309 trở lên, đều hợp lệ. Nếu bỏ qua,

<input type="date" name="date"/>

310, bất kỳ số nguyên nào cũng hợp lệ, nhưng số float (như

<input type="date" name="date"/>

311) không hợp lệ, vì

<input type="checkbox" name="checkbox"/>

73 mặc định là

<input type="date" name="date"/>

313. Để

<input type="date" name="date"/>

311 hợp lệ,

<input type="checkbox" name="checkbox"/>

73 sẽ phải được đặt thành

<input type="date" name="date"/>

300, 0. 1, 0. 2, hoặc bất kỳ giá trị

<input type="date" name="date"/>

30 nào sẽ phải là một số kết thúc bằng

<input type="date" name="date"/>

318, chẳng hạn như

<input type="date" name="date"/>

319

Ghi chú. Khi dữ liệu do người dùng nhập không tuân theo cấu hình từng bước, giá trị được coi là không hợp lệ trong xác thực ràng buộc và sẽ khớp với lớp giả

<input type="date" name="date"/>

320

Xem Xác thực phía máy khách để biết thêm thông tin

<input type="date" name="date"/>

321

Thuộc tính chung hợp lệ cho tất cả các phần tử, bao gồm tất cả các loại đầu vào, một thuộc tính số nguyên cho biết liệu phần tử có thể lấy tiêu điểm đầu vào hay không (có thể đặt tiêu điểm) hay không, liệu nó có tham gia vào điều hướng bàn phím tuần tự hay không. Vì tất cả các loại đầu vào ngoại trừ đầu vào của loại ẩn đều có thể đặt tiêu điểm, nên không nên sử dụng thuộc tính này trên các điều khiển biểu mẫu vì làm như vậy sẽ yêu cầu quản lý thứ tự tiêu điểm cho tất cả các thành phần trong tài liệu có nguy cơ gây hại cho khả năng sử dụng và khả năng truy cập nếu được thực hiện

<input type="datetime-local" name="datetime-local"/>

19

Thuộc tính chung hợp lệ cho tất cả các phần tử, bao gồm tất cả các loại đầu vào, chứa văn bản đại diện cho thông tin tư vấn liên quan đến phần tử thuộc về nó. Những thông tin như vậy thường có thể, nhưng không nhất thiết, được trình bày cho người dùng dưới dạng chú giải công cụ. KHÔNG nên sử dụng tiêu đề làm giải thích chính về mục đích của điều khiển biểu mẫu. Thay vào đó, hãy sử dụng phần tử

<input type="color" name="color"/>

91 với thuộc tính

<input type="color" name="color"/>

92 được đặt thành thuộc tính

<input type="color" name="color"/>

68 của điều khiển biểu mẫu. Xem Nhãn bên dưới

<input type="datetime-local" name="datetime-local"/>

0

Một chuỗi chỉ định loại điều khiển để hiển thị. Ví dụ: để tạo hộp kiểm, giá trị của

<input type="date" name="date"/>

54 được sử dụng. Nếu bị bỏ qua (hoặc một giá trị không xác định được chỉ định), loại đầu vào

<input type="datetime-local" name="datetime-local"/>

1 được sử dụng, tạo trường nhập văn bản gốc

Các giá trị được phép được liệt kê trong Loại đầu vào ở trên

<input type="datetime-local" name="datetime-local"/>

2

Giá trị của điều khiển đầu vào. Khi được chỉ định trong HTML, đây là giá trị ban đầu và từ đó trở đi, giá trị này có thể được thay đổi hoặc truy xuất bất kỳ lúc nào bằng cách sử dụng JavaScript để truy cập thuộc tính

<input type="datetime-local" name="datetime-local"/>

2 của đối tượng

<input type="date" name="date"/>

37 tương ứng. Thuộc tính

<input type="datetime-local" name="datetime-local"/>

2 luôn là tùy chọn, mặc dù nên được coi là bắt buộc đối với

<input type="date" name="date"/>

54,

<input type="date" name="date"/>

55 và

<input type="date" name="date"/>

25

<input type="checkbox" name="checkbox"/>

83

Chỉ hợp lệ cho nút nhập

<input type="date" name="date"/>

52,

<input type="checkbox" name="checkbox"/>

83 là chiều rộng của tệp hình ảnh sẽ hiển thị để thể hiện nút gửi đồ họa. Xem loại đầu vào hình ảnh

Thuộc tính không chuẩn

Các thuộc tính không chuẩn sau đây cũng có sẵn trên một số trình duyệt. Theo nguyên tắc chung, bạn nên tránh sử dụng chúng trừ khi không thể giúp được

AttributeDescription

<input type="date" name="date"/>

339Một chuỗi cho biết tính năng tự động sửa lỗi là

<input type="color" name="color"/>

47 hay

<input type="date" name="date"/>

341. chỉ Safari.

<input type="date" name="date"/>

342Có hay không gửi các sự kiện

<input type="date" name="date"/>

62 lặp đi lặp lại để cho phép cập nhật kết quả tìm kiếm trực tiếp trong khi người dùng vẫn đang chỉnh sửa giá trị của trường. Chỉ dành cho WebKit và Blink (Safari, Chrome, Opera, v.v. ).

<input type="date" name="date"/>

344

Một chuỗi cho biết loại hành động sẽ được thực hiện khi người dùng nhấn phím Enter hoặc Return trong khi chỉnh sửa trường;

không dùng nữa. sử dụng

<input type="date" name="date"/>

345 thay thế

<input type="date" name="date"/>

346Đặt hướng của thanh trượt phạm vi. chỉ Firefox.

<input type="date" name="date"/>

347Số lượng mục tối đa sẽ được hiển thị trong danh sách thả xuống của các truy vấn tìm kiếm trước đó. chỉ Safari.

<input type="date" name="date"/>

348A Boolean cho biết liệu có chỉ cho phép người dùng chọn một thư mục (hoặc các thư mục, nếu cũng có

<input type="checkbox" name="checkbox"/>

32)

<input type="date" name="date"/>

339 Không chuẩn

(Chỉ dành cho Safari). Một chuỗi cho biết có kích hoạt hiệu chỉnh tự động trong khi người dùng đang chỉnh sửa trường này hay không. giá trị được phép là

<input type="color" name="color"/>

47

Cho phép tự động sửa lỗi chính tả, cũng như xử lý thay thế văn bản nếu có được định cấu hình

<input type="date" name="date"/>

341

Vô hiệu hóa tự động sửa và thay thế văn bản

<input type="date" name="date"/>

342 Không chuẩn

Thuộc tính Boolean

<input type="date" name="date"/>

342 là một tiện ích mở rộng WebKit và Blink (được hỗ trợ bởi Safari, Opera, Chrome, v.v. ), nếu có, thông báo cho tác nhân người dùng xử lý đầu vào dưới dạng tìm kiếm trực tiếp. Khi người dùng chỉnh sửa giá trị của trường, tác nhân người dùng sẽ gửi các sự kiện

<input type="date" name="date"/>

62 đến đối tượng

<input type="date" name="date"/>

37 đại diện cho hộp tìm kiếm. Điều này cho phép mã của bạn cập nhật kết quả tìm kiếm theo thời gian thực khi người dùng chỉnh sửa tìm kiếm

Nếu

<input type="date" name="date"/>

342 không được chỉ định, sự kiện

<input type="date" name="date"/>

62 chỉ được gửi khi người dùng bắt đầu tìm kiếm một cách rõ ràng (chẳng hạn như bằng cách nhấn phím Enter hoặc Return trong khi chỉnh sửa trường)

Sự kiện

<input type="date" name="date"/>

62 bị giới hạn tốc độ để nó không được gửi thường xuyên hơn khoảng thời gian do triển khai xác định

<input type="date" name="date"/>

346 Không chuẩn

Tương tự như thuộc tính CSS không chuẩn -moz-orient ảnh hưởng đến các phần tử

<input type="date" name="date"/>

361 và

<input type="date" name="date"/>

362, thuộc tính

<input type="date" name="date"/>

346 xác định hướng của thanh trượt phạm vi. Các giá trị bao gồm

<input type="date" name="date"/>

364, nghĩa là phạm vi được hiển thị theo chiều ngang và

<input type="date" name="date"/>

365, trong đó phạm vi được hiển thị theo chiều dọc

<input type="date" name="date"/>

347 Không chuẩn

Thuộc tính

<input type="date" name="date"/>

347—chỉ được Safari hỗ trợ—là một giá trị số cho phép bạn ghi đè số lượng mục nhập tối đa được hiển thị trong menu thả xuống được cung cấp nguyên bản của phần tử

<input type="date" name="date"/>

7 trong các truy vấn tìm kiếm trước đó

Giá trị phải là số thập phân không âm. Nếu không được cung cấp hoặc giá trị không hợp lệ được cung cấp, số lượng mục nhập tối đa mặc định của trình duyệt sẽ được sử dụng

<input type="date" name="date"/>

348 Không chuẩn

Thuộc tính Boolean

<input type="date" name="date"/>

348, nếu có, cho biết rằng người dùng chỉ có thể chọn các thư mục trong giao diện bộ chọn tệp. Xem

<input type="date" name="date"/>

371 để biết thêm chi tiết và ví dụ

Mặc dù ban đầu chỉ được triển khai cho các trình duyệt dựa trên WebKit, nhưng

<input type="date" name="date"/>

348 cũng có thể sử dụng được trong Microsoft Edge cũng như Firefox 50 trở lên. Tuy nhiên, mặc dù nó có hỗ trợ tương đối rộng, nhưng nó vẫn không phải là tiêu chuẩn và không nên được sử dụng trừ khi bạn không có giải pháp thay thế nào

phương pháp

Các phương thức sau được cung cấp bởi giao diện

<input type="date" name="date"/>

37 đại diện cho các phần tử

<input type="date" name="date"/>

7 trong DOM. Cũng có sẵn các phương thức được chỉ định bởi các giao diện gốc,

<input type="date" name="date"/>

375,

<input type="date" name="date"/>

376,

<input type="date" name="date"/>

377 và

<input type="date" name="date"/>

378

<input type="date" name="date"/>

379

Trả về

<input type="date" name="date"/>

380 nếu giá trị của phần tử vượt qua kiểm tra tính hợp lệ;

<input type="date" name="date"/>

383

Trả về

<input type="date" name="date"/>

380 nếu giá trị của phần tử vượt qua kiểm tra tính hợp lệ;

<input type="date" name="date"/>

387

Chọn toàn bộ nội dung của phần tử

<input type="date" name="date"/>

7, nếu nội dung của phần tử có thể chọn được. Đối với các phần tử không có nội dung văn bản có thể chọn (chẳng hạn như bộ chọn màu trực quan hoặc đầu vào ngày theo lịch), phương pháp này không thực hiện gì

<input type="date" name="date"/>

389

Đặt thông báo tùy chỉnh để hiển thị nếu giá trị của phần tử đầu vào không hợp lệ

<input type="date" name="date"/>

390

Đặt nội dung của phạm vi ký tự đã chỉ định trong phần tử đầu vào thành một chuỗi đã cho. Tham số

<input type="date" name="date"/>

391 có sẵn để cho phép kiểm soát mức độ ảnh hưởng của nội dung hiện có

<input type="date" name="date"/>

392

Chọn phạm vi ký tự được chỉ định trong phần tử nhập văn bản. Không làm gì cho đầu vào không được trình bày dưới dạng trường nhập văn bản

<input type="date" name="date"/>

393

Giảm giá trị của đầu vào số theo mặc định hoặc theo số đơn vị đã chỉ định

<input type="date" name="date"/>

394

Tăng giá trị của đầu vào số theo một hoặc theo số lượng đơn vị đã chỉ định

CSS

Đầu vào, là phần tử thay thế, có một vài tính năng không áp dụng cho phần tử không phải dạng. Có các bộ chọn CSS có thể nhắm mục tiêu cụ thể các điều khiển biểu mẫu dựa trên các tính năng giao diện người dùng của chúng, còn được gọi là các lớp giả giao diện người dùng. Phần tử đầu vào cũng có thể được nhắm mục tiêu theo loại với bộ chọn thuộc tính. Có một số thuộc tính cũng đặc biệt hữu ích

Lớp giả giao diện người dùng

Chú thích cực kỳ liên quan đến yếu tố

<input type="date" name="date"/>

7. Pseudo-classDescription

<input type="date" name="date"/>

396Bất kỳ phần tử hiện đang được bật nào có thể được kích hoạt (được chọn, nhấp vào, nhập vào, v.v. ) hoặc chấp nhận tiêu điểm và cũng có trạng thái bị tắt, trong đó không thể kích hoạt hoặc chấp nhận tiêu điểm.

<input type="date" name="date"/>

397Bất kỳ phần tử hiện đang bị vô hiệu hóa nào có trạng thái được bật, nghĩa là nếu không thì nó có thể được kích hoạt (được chọn, nhấp vào, nhập vào, v.v. ) hoặc chấp nhận tiêu điểm nếu nó không bị tắt.

<input type="date" name="date"/>

398Phần tử mà người dùng không thể chỉnh sửa____1399Phần tử mà người dùng có thể chỉnh sửa. Phần tử

<input type="date" name="date"/>

500 hiện đang hiển thị văn bản

<input type="checkbox" name="checkbox"/>

44, bao gồm các phần tử

<input type="date" name="date"/>

7 và

<input type="date" name="date"/>

503 với thuộc tính

<input type="checkbox" name="checkbox"/>

44 hiện chưa có giá trị.

<input type="date" name="date"/>

505Các phần tử biểu mẫu là mặc định trong một nhóm các phần tử liên quan. Khớp hộp kiểm và loại đầu vào radio đã được kiểm tra khi tải hoặc hiển thị trang.

<input type="date" name="date"/>

506Khớp hộp kiểm và các loại đầu vào radio hiện đang được chọn (và (

<input type="date" name="date"/>

507 trong một

<input type="date" name="date"/>

28 hiện đang được chọn).

<input type="date" name="date"/>

509phần tử hộp kiểm có thuộc tính không xác định được đặt thành true bởi JavaScript, phần tử radio, khi tất cả các nút radio có cùng giá trị tên trong biểu mẫu không được chọn và phần tử

<input type="date" name="date"/>

361 ở trạng thái không xác định

<input type="date" name="date"/>

511Điều khiển biểu mẫu có thể áp dụng xác thực ràng buộc và hiện đang hợp lệ.

<input type="date" name="date"/>

320Các điều khiển biểu mẫu đã áp dụng xác thực ràng buộc và hiện không hợp lệ. So khớp với một điều khiển biểu mẫu có giá trị không khớp với các ràng buộc được đặt trên nó bởi các thuộc tính của nó, chẳng hạn như

<input type="checkbox" name="checkbox"/>

58,

<input type="checkbox" name="checkbox"/>

36,

<input type="checkbox" name="checkbox"/>

73 và

<input type="date" name="date"/>

31.

<input type="date" name="date"/>

517Một đầu vào không trống có giá trị hiện tại nằm trong giới hạn phạm vi được chỉ định bởi các thuộc tính

<input type="date" name="date"/>

30 và

<input type="date" name="date"/>

31 và

<input type="checkbox" name="checkbox"/>

73.

<input type="date" name="date"/>

521Một đầu vào không trống có giá trị hiện tại KHÔNG nằm trong giới hạn phạm vi được chỉ định bởi các thuộc tính

<input type="date" name="date"/>

30 và

<input type="date" name="date"/>

31 hoặc không tuân thủ ràng buộc

<input type="checkbox" name="checkbox"/>

73. Phần tử

<input type="date" name="date"/>

525

<input type="date" name="date"/>

7,

<input type="date" name="date"/>

28 hoặc

<input type="date" name="date"/>

503 có thuộc tính

<input type="checkbox" name="checkbox"/>

58 được đặt trên đó. Chỉ đối sánh các yếu tố có thể được yêu cầu. Thuộc tính được bao gồm trong phần tử không bắt buộc sẽ không phù hợp. Phần tử

<input type="date" name="date"/>

530

<input type="date" name="date"/>

7,

<input type="date" name="date"/>

28 hoặc

<input type="date" name="date"/>

503 KHÔNG có thuộc tính

<input type="checkbox" name="checkbox"/>

58 được đặt trên đó. Không phù hợp với các yếu tố không thể được yêu cầu. Các phần tử

<input type="date" name="date"/>

535

<input type="date" name="date"/>

7 và

<input type="date" name="date"/>

503 hiện không có giá trị.

<input type="date" name="date"/>

538Tương tự như

<input type="date" name="date"/>

320, nhưng được kích hoạt khi làm mờ. So khớp thông tin nhập không hợp lệ nhưng chỉ sau khi người dùng tương tác, chẳng hạn như bằng cách tập trung vào điều khiển, rời khỏi điều khiển hoặc cố gắng gửi biểu mẫu chứa điều khiển không hợp lệ

Ví dụ về lớp giả

Chúng tôi có thể định kiểu nhãn hộp kiểm dựa trên việc hộp kiểm có được chọn hay không. Trong ví dụ này, chúng tôi đang tạo kiểu cho

<input type="checkbox" name="checkbox"/>

55 và

<input type="date" name="date"/>

541 của

<input type="color" name="color"/>

91 xuất hiện ngay sau khi đầu vào được kiểm tra. Chúng tôi chưa áp dụng bất kỳ kiểu nào nếu

<input type="date" name="date"/>

543 không được chọn

<input type="color" name="color"/>

5

<input type="color" name="color"/>

6

bộ chọn thuộc tính

Có thể nhắm mục tiêu các loại điều khiển biểu mẫu khác nhau dựa trên

<input type="datetime-local" name="datetime-local"/>

0 của chúng bằng bộ chọn thuộc tính. Bộ chọn thuộc tính CSS so khớp các phần tử dựa trên sự hiện diện của một thuộc tính hoặc giá trị của một thuộc tính nhất định

<input type="color" name="color"/>

7

giữ chỗ

Theo mặc định, giao diện của văn bản giữ chỗ có màu mờ hoặc xám nhạt. Phần tử giả

<input type="date" name="date"/>

545 là văn bản

<input type="checkbox" name="checkbox"/>

44 của đầu vào. Nó có thể được tạo kiểu với một tập hợp con giới hạn các thuộc tính CSS

<input type="color" name="color"/>

8

Chỉ tập hợp con các thuộc tính CSS áp dụng cho phần tử giả

<input type="date" name="date"/>

547 mới có thể được sử dụng trong quy tắc sử dụng

<input type="date" name="date"/>

545 trong bộ chọn của nó

xuất hiện

Thuộc tính

<input type="date" name="date"/>

549 cho phép hiển thị (hầu hết) bất kỳ phần tử nào dưới dạng kiểu nền gốc dựa trên chủ đề của hệ điều hành cũng như loại bỏ bất kỳ kiểu gốc nền tảng nào có giá trị

<input type="color" name="color"/>

95

Bạn có thể làm cho một

<input type="date" name="date"/>

551 trông giống như một nút radio với ________ 1552 hoặc một radio trông giống như một hộp kiểm với ________ 1553, nhưng đừng

Cài đặt

<input type="date" name="date"/>

554 xóa đường viền gốc của nền tảng, nhưng không xóa chức năng

màu dấu mũ

Thuộc tính dành riêng cho các phần tử liên quan đến mục nhập văn bản là thuộc tính CSS

<input type="date" name="date"/>

555, cho phép bạn đặt màu được sử dụng để vẽ dấu mũ nhập văn bản

HTML

<input type="color" name="color"/>

9

CSS

<input type="date" name="date"/>

0

Kết quả

vị trí đối tượng và đối tượng phù hợp

Trong một số trường hợp nhất định (thường liên quan đến đầu vào phi văn bản và giao diện chuyên biệt), phần tử

<input type="date" name="date"/>

7 là phần tử được thay thế. Khi đó, vị trí và kích thước của kích thước và vị trí của phần tử trong khung của nó có thể được điều chỉnh bằng cách sử dụng các thuộc tính CSS

<input type="date" name="date"/>

557 và

<input type="date" name="date"/>

558

tạo kiểu

Để biết thêm thông tin về cách thêm màu vào các phần tử trong HTML, hãy xem

Áp dụng màu cho các phần tử HTML bằng CSS

Cũng thấy

Tạo kiểu biểu mẫu HTML
Kiểu dáng nâng cao cho các biểu mẫu HTML và
bảng tương thích của các thuộc tính CSS

Tính năng bổ sung

nhãn

Nhãn là cần thiết để liên kết văn bản hỗ trợ với một

<input type="date" name="date"/>

7. Phần tử

<input type="color" name="color"/>

91 cung cấp thông tin giải thích về trường biểu mẫu luôn phù hợp (ngoài mọi lo ngại về bố cục mà bạn có). Không bao giờ là một ý tưởng tồi khi sử dụng

<input type="color" name="color"/>

91 để giải thích những gì nên được nhập vào

<input type="date" name="date"/>

7 hoặc

<input type="date" name="date"/>

503

nhãn liên kết

Việc ghép nối ngữ nghĩa của các yếu tố

<input type="date" name="date"/>

7 và

<input type="color" name="color"/>

91 rất hữu ích cho các công nghệ hỗ trợ như trình đọc màn hình. Bằng cách ghép nối chúng bằng thuộc tính

<input type="color" name="color"/>

92 của

<input type="color" name="color"/>

91, bạn liên kết nhãn với đầu vào theo cách cho phép trình đọc màn hình mô tả đầu vào cho người dùng chính xác hơn

Không đủ để có văn bản thuần túy bên cạnh phần tử

<input type="date" name="date"/>

7. Thay vào đó, khả năng sử dụng và khả năng truy cập yêu cầu bao gồm cả

<input type="color" name="color"/>

91 ẩn hoặc rõ ràng

<input type="date" name="date"/>

1

Ví dụ đầu tiên không thể truy cập được. không có mối quan hệ nào tồn tại giữa dấu nhắc và phần tử

<input type="date" name="date"/>

7

Ngoài tên có thể truy cập, nhãn còn cung cấp vùng 'đánh' lớn hơn để người dùng chuột và màn hình cảm ứng nhấp vào hoặc chạm vào. Bằng cách ghép nối một

<input type="color" name="color"/>

91 với một

<input type="date" name="date"/>

7, nhấp vào một trong hai sẽ tập trung vào

<input type="date" name="date"/>

7. Nếu bạn sử dụng văn bản thuần túy để "gắn nhãn" đầu vào của mình, điều này sẽ không xảy ra. Có phần nhắc của khu vực kích hoạt cho đầu vào rất hữu ích cho những người có điều kiện điều khiển động cơ

Là nhà phát triển web, điều quan trọng là chúng ta không bao giờ cho rằng mọi người sẽ biết tất cả những điều mà chúng ta biết. Sự đa dạng của những người sử dụng web—và mở rộng ra là trang web của bạn—thực tế đảm bảo rằng một số khách truy cập trang web của bạn sẽ có một số thay đổi trong quá trình suy nghĩ và/hoặc hoàn cảnh khiến họ diễn giải các biểu mẫu của bạn rất khác với bạn mà không được trình bày rõ ràng và hợp lý

Trình giữ chỗ không thể truy cập được

Thuộc tính

<input type="checkbox" name="checkbox"/>

44 cho phép bạn chỉ định văn bản xuất hiện trong chính khu vực nội dung của phần tử

<input type="date" name="date"/>

7 khi nó trống. Trình giữ chỗ không bao giờ được yêu cầu hiểu các biểu mẫu của bạn. Nó không phải là nhãn và không nên được sử dụng để thay thế vì nó không. Trình giữ chỗ được sử dụng để cung cấp gợi ý về giá trị được nhập sẽ trông như thế nào, không phải là lời giải thích hoặc lời nhắc

Trình giữ chỗ không chỉ không thể truy cập được đối với trình đọc màn hình mà khi người dùng nhập bất kỳ văn bản nào vào điều khiển biểu mẫu hoặc nếu điều khiển biểu mẫu đã có giá trị, trình giữ chỗ sẽ biến mất. Các trình duyệt có tính năng dịch trang tự động có thể bỏ qua các thuộc tính khi dịch, nghĩa là

<input type="checkbox" name="checkbox"/>

44 có thể không được dịch

Ghi chú. Không sử dụng thuộc tính

<input type="checkbox" name="checkbox"/>

44 nếu bạn có thể tránh được. Nếu bạn cần gắn nhãn một phần tử

<input type="date" name="date"/>

7, hãy sử dụng phần tử

<input type="color" name="color"/>

91

Xác thực phía máy khách

Cảnh báo. Xác thực phía máy khách rất hữu ích nhưng không đảm bảo rằng máy chủ sẽ nhận được dữ liệu hợp lệ. Nếu dữ liệu phải ở định dạng cụ thể, hãy luôn xác minh dữ liệu đó ở phía máy chủ và trả về phản hồi HTTP

<input type="date" name="date"/>

580 nếu định dạng không hợp lệ

Ngoài việc sử dụng CSS để tạo kiểu đầu vào dựa trên trạng thái giao diện người dùng

<input type="date" name="date"/>

511 hoặc

<input type="date" name="date"/>

320 dựa trên trạng thái hiện tại của từng đầu vào, như đã lưu ý trong phần lớp giả giao diện người dùng ở trên, trình duyệt cung cấp tính năng xác thực phía máy khách khi gửi biểu mẫu (đã thử). Khi gửi biểu mẫu, nếu có một điều khiển biểu mẫu không xác thực được ràng buộc, các trình duyệt hỗ trợ sẽ hiển thị thông báo lỗi trên điều khiển biểu mẫu không hợp lệ đầu tiên;

Một số loại đầu vào và các thuộc tính khác đặt giới hạn cho những giá trị hợp lệ đối với một đầu vào nhất định. Ví dụ:

<input type="date" name="date"/>

583 có nghĩa là chỉ các số 2, 4, 6, 8 hoặc 10 là hợp lệ. Một số lỗi có thể xảy ra, bao gồm lỗi

<input type="date" name="date"/>

584 nếu giá trị nhỏ hơn 2,

<input type="date" name="date"/>

585 nếu lớn hơn 10,

<input type="date" name="date"/>

586 nếu giá trị là một số từ 2 đến 10, nhưng không phải là số nguyên chẵn (không khớp với yêu cầu của thuộc tính

<input type="checkbox" name="checkbox"/>

73

Đối với các loại đầu vào có miền giá trị có thể có là định kỳ (nghĩa là ở giá trị cao nhất có thể, các giá trị sẽ bao quanh phần đầu chứ không phải phần cuối), giá trị của các thuộc tính

<input type="date" name="date"/>

31 và

<input type="date" name="date"/>

30 có thể bị đảo ngược. . Điều này đặc biệt hữu ích cho ngày và giờ, chẳng hạn như khi bạn muốn cho phép phạm vi từ 8 giờ tối đến 8 giờ sáng

<input type="date" name="date"/>

2

Các thuộc tính cụ thể và giá trị của chúng có thể dẫn đến một lỗi cụ thể

<input type="date" name="date"/>

593

Lỗi đối tượng hợp lệ phụ thuộc vào thuộc tính

<input type="date" name="date"/>

7 và giá trị của chúng. Thuộc tính Thuộc tính liên quanMô tả

<input type="date" name="date"/>

31

<input type="date" name="date"/>

596Xảy ra khi giá trị lớn hơn giá trị tối đa được xác định bởi thuộc tính

<input type="date" name="date"/>

31

<input type="checkbox" name="checkbox"/>

08

<input type="date" name="date"/>

599Xảy ra khi số lượng ký tự lớn hơn số lượng được phép bởi thuộc tính

<input type="checkbox" name="checkbox"/>

08

<input type="date" name="date"/>

30

<input type="date" name="date"/>

602Xảy ra khi giá trị nhỏ hơn giá trị tối thiểu được xác định bởi thuộc tính

<input type="date" name="date"/>

30

<input type="checkbox" name="checkbox"/>

24

<input type="date" name="date"/>

605Xảy ra khi số .

<input type="checkbox" name="checkbox"/>

58

<input type="date" name="date"/>

611Xảy ra khi có thuộc tính

<input type="checkbox" name="checkbox"/>

58 nhưng giá trị là

<input type="date" name="date"/>

613 hoặc radio hoặc hộp kiểm không được chọn.

<input type="checkbox" name="checkbox"/>

73

<input type="date" name="date"/>

615Giá trị không khớp với bước tăng. Giá trị gia tăng mặc định là

<input type="date" name="date"/>

313, vì vậy chỉ các số nguyên mới hợp lệ trên ____1617, không bao gồm bước.

<input type="date" name="date"/>

618 sẽ không bao giờ ném lỗi này.

<input type="datetime-local" name="datetime-local"/>

0

<input type="date" name="date"/>

620Xảy ra khi giá trị không đúng loại, ví dụ: email không chứa

<input type="date" name="date"/>

621 hoặc url không chứa giao thức

Nếu điều khiển biểu mẫu không có thuộc tính

<input type="checkbox" name="checkbox"/>

58, không có giá trị hoặc chuỗi trống thì không phải là không hợp lệ. Ngay cả khi có các thuộc tính trên, ngoại trừ

<input type="checkbox" name="checkbox"/>

58 và chuỗi rỗng sẽ không dẫn đến lỗi

Chúng tôi có thể đặt giới hạn cho những giá trị mà chúng tôi chấp nhận và các trình duyệt hỗ trợ sẽ xác thực các giá trị biểu mẫu này một cách tự nhiên và cảnh báo người dùng nếu có lỗi khi biểu mẫu được gửi

Ngoài các lỗi được mô tả trong bảng trên, giao diện

<input type="date" name="date"/>

624 chứa các thuộc tính chỉ đọc boolean

<input type="date" name="date"/>

625,

<input type="date" name="date"/>

626 và

<input type="date" name="date"/>

627. Đối tượng hợp lệ bao gồm

```
<input type="date" name="date"/>
```
611
```
<input type="date" name="date"/>
```
620
```
<input type="date" name="date"/>
```
608
```
<input type="date" name="date"/>
```
599
```
<input type="date" name="date"/>
```
605
```
<input type="date" name="date"/>
```
602
```
<input type="date" name="date"/>
```
596
```
<input type="date" name="date"/>
```
615
```
<input type="date" name="date"/>
```
636
```
<input type="date" name="date"/>
```
637
```
<input type="date" name="date"/>
```
638

Đối với mỗi thuộc tính Boolean này, giá trị của

<input type="date" name="date"/>

380 cho biết rằng việc xác thực lý do được chỉ định có thể không thành công, ngoại trừ thuộc tính

<input type="date" name="date"/>

626, là

<input type="date" name="date"/>

380 nếu giá trị của phần tử tuân theo tất cả các ràng buộc

Nếu có lỗi, các trình duyệt hỗ trợ sẽ vừa cảnh báo người dùng vừa ngăn biểu mẫu được gửi. Một lời cảnh báo. nếu lỗi tùy chỉnh được đặt thành giá trị trung thực (bất kỳ giá trị nào khác ngoài chuỗi trống hoặc

<input type="date" name="date"/>

613), biểu mẫu sẽ không được gửi. Nếu không có thông báo lỗi tùy chỉnh và không có thuộc tính nào khác trả về giá trị true, thì

<input type="date" name="date"/>

626 sẽ là true và có thể gửi biểu mẫu

<input type="date" name="date"/>

3

Dòng cuối cùng, đặt thông báo hiệu lực tùy chỉnh thành chuỗi trống là rất quan trọng. Nếu người dùng mắc lỗi và tính hợp lệ được đặt, nó sẽ không gửi được, ngay cả khi tất cả các giá trị đều hợp lệ, cho đến khi thông báo là

<input type="date" name="date"/>

613

Ví dụ về lỗi xác thực tùy chỉnh

Nếu bạn muốn hiển thị thông báo lỗi tùy chỉnh khi một trường không xác thực được, bạn cần sử dụng API Xác thực ràng buộc có sẵn trên các phần tử

<input type="date" name="date"/>

7 (và có liên quan). Lấy mẫu sau

<input type="date" name="date"/>

4

Các tính năng xác thực biểu mẫu HTML cơ bản sẽ khiến điều này tạo ra thông báo lỗi mặc định nếu bạn cố gửi biểu mẫu mà không điền thông tin hợp lệ hoặc giá trị không khớp với

<input type="checkbox" name="checkbox"/>

36

Thay vào đó, nếu bạn muốn hiển thị thông báo lỗi tùy chỉnh, bạn có thể sử dụng JavaScript như sau

<input type="date" name="date"/>

5

Ví dụ hiển thị như vậy

Tóm lại

Chúng tôi kiểm tra trạng thái hợp lệ của phần tử đầu vào mỗi khi giá trị của nó thay đổi bằng cách chạy phương thức
```
<input type="date" name="date"/>
```
379 thông qua trình xử lý sự kiện
```
<input type="date" name="date"/>
```
543
Nếu giá trị không hợp lệ, một sự kiện
```
<input type="date" name="date"/>
```
382 sẽ được kích hoạt và chức năng xử lý sự kiện
```
<input type="date" name="date"/>
```
382 sẽ được chạy. Bên trong chức năng này, chúng tôi tìm hiểu xem giá trị không hợp lệ vì nó trống hay vì nó không khớp với mẫu, sử dụng khối
```
<input type="date" name="date"/>
```
651 và đặt thông báo lỗi hợp lệ tùy chỉnh
Do đó, nếu giá trị đầu vào không hợp lệ khi nhấn nút gửi, một trong các thông báo lỗi tùy chỉnh sẽ được hiển thị
Nếu nó hợp lệ, nó sẽ gửi như bạn mong muốn. Để điều này xảy ra, tính hợp lệ tùy chỉnh phải bị hủy, bằng cách gọi
```
<input type="date" name="date"/>
```
389 với một giá trị chuỗi trống. Do đó, chúng tôi làm điều này mỗi khi sự kiện
```
<input type="date" name="date"/>
```
543 được nêu ra. Nếu bạn không làm điều này và giá trị hiệu lực tùy chỉnh đã được đặt trước đó, thông tin đầu vào sẽ đăng ký là không hợp lệ, ngay cả khi thông tin đó hiện chứa giá trị hợp lệ khi gửi

Ghi chú. Luôn xác thực các ràng buộc đầu vào ở cả phía máy khách và phía máy chủ. Xác thực ràng buộc không loại bỏ nhu cầu xác thực ở phía máy chủ. Các giá trị không hợp lệ vẫn có thể được gửi bởi các trình duyệt cũ hơn hoặc bởi các tác nhân xấu

Ghi chú. Firefox đã hỗ trợ thuộc tính lỗi độc quyền —

<input type="date" name="date"/>

654 — cho nhiều phiên bản, cho phép bạn đặt các thông báo lỗi tùy chỉnh theo cách tương tự. Tính năng này đã bị xóa kể từ phiên bản 66 (xem lỗi 1513890)

bản địa hóa

Đầu vào được phép cho một số loại

<input type="date" name="date"/>

7 nhất định tùy thuộc vào ngôn ngữ. Ở một số địa phương, 1.000. 00 là một số hợp lệ, trong khi ở các địa phương khác, cách hợp lệ để nhập số này là 1. 000,00

Firefox sử dụng phương pháp phỏng đoán sau để xác định ngôn ngữ nhằm xác thực đầu vào của người dùng (ít nhất là cho

<input type="date" name="date"/>

617)

Hãy thử ngôn ngữ được chỉ định bởi thuộc tính
```
<input type="date" name="date"/>
```
657/
```
<input type="date" name="date"/>
```
658 trên phần tử hoặc bất kỳ cha mẹ nào của phần tử đó
Hãy thử ngôn ngữ được chỉ định bởi bất kỳ tiêu đề HTTP
```
<input type="date" name="date"/>
```
659 nào. Hoặc,
Nếu không được chỉ định, hãy sử dụng ngôn ngữ của trình duyệt

Tóm tắt kỹ thuật

Danh mục nội dung Nội dung luồng, được liệt kê, có thể gửi, có thể đặt lại, phần tử liên kết với biểu mẫu, nội dung theo cụm từ. Nếu

<input type="datetime-local" name="datetime-local"/>

0 không phải là

<input type="date" name="date"/>

25, thì yếu tố có thể gắn nhãn, nội dung có thể sờ thấy. Nội dung được phép Không có; . Bỏ thẻ Phải có thẻ bắt đầu và không được có thẻ kết thúc. Cha mẹ được phépBất kỳ phần tử nào chấp nhận nội dung cụm từ. Vai trò ARIA ngầm định

<input type="date" name="date"/>

662.

<input type="date" name="date"/>

663

<input type="date" name="date"/>

664.

<input type="date" name="date"/>

665

<input type="date" name="date"/>

666

không có thuộc tính

<input type="date" name="date"/>

24.

<input type="date" name="date"/>

668

với thuộc tính

<input type="date" name="date"/>

24.

<input type="date" name="date"/>

670

<input type="date" name="date"/>

671.

<input type="date" name="date"/>

663

<input type="date" name="date"/>

673.

<input type="date" name="date"/>

674

<input type="date" name="date"/>

675.

<input type="date" name="date"/>

676

<input type="date" name="date"/>

677.

<input type="date" name="date"/>

678

<input type="date" name="date"/>

679.

<input type="date" name="date"/>

663

<input type="date" name="date"/>

681

không có thuộc tính

<input type="date" name="date"/>

24.

<input type="date" name="date"/>

683

với thuộc tính

<input type="date" name="date"/>

24.

<input type="date" name="date"/>

670

<input type="date" name="date"/>

686.

<input type="date" name="date"/>

663

<input type="date" name="date"/>

688

không có thuộc tính

<input type="date" name="date"/>

24.

<input type="date" name="date"/>

668

với thuộc tính

<input type="date" name="date"/>

24.

<input type="date" name="date"/>

670

<input type="date" name="date"/>

693

không có thuộc tính

<input type="date" name="date"/>

24.

<input type="date" name="date"/>

668

với thuộc tính

<input type="date" name="date"/>

24.

<input type="date" name="date"/>

670

<input type="date" name="date"/>

698

không có thuộc tính

<input type="date" name="date"/>

24.

<input type="date" name="date"/>

668

với thuộc tính

<input type="date" name="date"/>

24.

<input type="date" name="date"/>

670

```
<input type="date" name="date"/>
```
103. không có vai trò tương ứng

Vai trò ARIA được phép

<input type="date" name="date"/>

662.

<input type="date" name="date"/>

105,

<input type="date" name="date"/>

670,

<input type="date" name="date"/>

107,

<input type="date" name="date"/>

108,

<input type="date" name="date"/>

109,

<input type="date" name="date"/>

110,

<input type="date" name="date"/>

111,

<input type="date" name="date"/>

676,

<input type="date" name="date"/>

113,

<input type="date" name="date"/>

114

```
<input type="date" name="date"/>
```
664.
```
<input type="date" name="date"/>
```
116 khi dùng với ________ 2117, ________ 2109, ________ 2111, _______ 2113

<input type="date" name="date"/>

671.

<input type="date" name="date"/>

107,

<input type="date" name="date"/>

108,

<input type="date" name="date"/>

109,

<input type="date" name="date"/>

110,

<input type="date" name="date"/>

676,

<input type="date" name="date"/>

113

<input type="date" name="date"/>

675.

<input type="date" name="date"/>

110

<input type="date" name="date"/>

693 không có thuộc tính

<input type="date" name="date"/>

24.

<input type="date" name="date"/>

670,

<input type="date" name="date"/>

683,

<input type="date" name="date"/>

674

<input type="date" name="date"/>

135

<input type="date" name="date"/>

136 hoặc

<input type="datetime-local" name="datetime-local"/>

1 với thuộc tính

<input type="date" name="date"/>

24. không cho phép

<input type="date" name="date"/>

139

Giao diện DOM____137

Mối quan tâm về khả năng tiếp cận

nhãn

Khi bao gồm đầu vào, yêu cầu trợ năng là thêm nhãn bên cạnh. Điều này là cần thiết để những người sử dụng công nghệ hỗ trợ có thể biết đầu vào dùng để làm gì. Ngoài ra, nhấp hoặc chạm vào nhãn sẽ tập trung vào kiểm soát biểu mẫu được liên kết của nhãn. Điều này cải thiện khả năng truy cập và khả năng sử dụng cho người dùng sáng mắt, tăng diện tích mà người dùng có thể nhấp hoặc chạm để kích hoạt điều khiển biểu mẫu. Điều này đặc biệt hữu ích (và thậm chí cần thiết) đối với các nút radio và hộp kiểm nhỏ. Để biết thêm thông tin về nhãn nói chung, hãy xem Nhãn

Sau đây là ví dụ về cách liên kết

<input type="color" name="color"/>

91 với phần tử

<input type="date" name="date"/>

7 theo kiểu trên. Bạn cần cung cấp cho

<input type="date" name="date"/>

7 một thuộc tính

<input type="color" name="color"/>

68. Sau đó,

<input type="color" name="color"/>

91 cần thuộc tính

<input type="color" name="color"/>

92 có giá trị giống với giá trị của đầu vào

<input type="color" name="color"/>

68

<input type="date" name="date"/>

6

Kích thước

Các yếu tố tương tác như đầu vào biểu mẫu phải cung cấp một khu vực đủ lớn để dễ dàng kích hoạt chúng. Điều này giúp ích cho nhiều người, bao gồm cả những người có vấn đề về điều khiển động cơ và những người sử dụng các hình thức nhập liệu không chính xác như bút stylus hoặc ngón tay. Nên sử dụng kích thước tương tác tối thiểu là 44 × 44 pixel CSS

Làm cách nào để tô màu TextBox trong JavaScript?

Vô hiệu hóa TextBox bằng cách thêm e-disabled vào phần tử gốc đầu vào và đặt thuộc tính bị vô hiệu hóa cho phần tử đầu vào .

Bạn sẽ sử dụng yếu tố nào trong thẻ đầu vào để hiển thị văn bản màu xám là gợi ý cho kiểu nhập văn bản?

Thuộc tính placeholder đặt văn bản bên trong hộp nhập liệu, thường có màu xám nhạt, làm trình giữ chỗ, cho biết loại nội dung là gì . Văn bản vẫn còn trong khi đầu vào không có giá trị, ngay cả khi điều khiển biểu mẫu nhận được tiêu điểm.

programming html

Làm cách nào để tô xám một hộp văn bản trong html?

Thử nó

các loại

Thuộc tính

thuộc tính cá nhân

Thuộc tính không chuẩn

phương pháp

CSS

Lớp giả giao diện người dùng

Ví dụ về lớp giả

bộ chọn thuộc tính

giữ chỗ

xuất hiện

màu dấu mũ

HTML

CSS

Kết quả

vị trí đối tượng và đối tượng phù hợp

tạo kiểu

Tính năng bổ sung

nhãn

nhãn liên kết

Trình giữ chỗ không thể truy cập được

Xác thực phía máy khách

Ví dụ về lỗi xác thực tùy chỉnh

bản địa hóa

Tóm tắt kỹ thuật

Mối quan tâm về khả năng tiếp cận

nhãn

Kích thước

Làm cách nào để tô màu TextBox trong JavaScript?

Bạn sẽ sử dụng yếu tố nào trong thẻ đầu vào để hiển thị văn bản màu xám là gợi ý cho kiểu nhập văn bản?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội