Trong bài viết này, chúng ta sẽ tìm hiểu về các thuộc tính của phần tử input trong HTML. Chúng ta sẽ cùng nhau khám phá những điều thú vị về cách thay đổi kích thước và các thuộc tính khác của phần tử input.
HTML - Ngôn ngữ đánh dấu với nhiều ứng dụng
HTML là một ngôn ngữ đánh dấu đơn giản, dễ hiểu và dễ học. Nó cho phép tạo ra các thành phần khác nhau để tạo nên những từ thông thường mang ý nghĩa đặc biệt. HTML là một trong những thành phần cơ bản mà mọi lập trình viên phát triển web đều cần biết.
Thuộc tính value
Thuộc tính value trong HTML được sử dụng để xác định giá trị ban đầu cho phần tử input. Ví dụ sau tạo ra một biểu mẫu lấy tên, tuổi và số liên lạc từ người dùng. Bằng cách khai báo giá trị ban đầu cho các trường input, khi chạy mã HTML, bạn sẽ có một biểu mẫu với dữ liệu đã được điền sẵn.
Thuộc tính readonly
Thuộc tính readonly xác định rằng trường dữ liệu đầu vào chỉ có thể đọc (không thể bị thay đổi). Ví dụ sau chỉnh sửa giá trị của thuộc tính name thành "ten" và thêm thuộc tính readonly vào phần tử input.
Thuộc tính disabled
Thuộc tính disabled xác định rằng trường dữ liệu đầu vào bị vô hiệu hóa, tức là không thể sử dụng, không thể click vào và giá trị cũng không được gửi khi biểu mẫu gửi đi. Ví dụ sau chỉnh sửa giá trị của thuộc tính name thành "ten" và thêm thuộc tính disabled vào phần tử input.
Thuộc tính size
Thuộc tính size xác định kích thước (tính bằng kí tự) cho trường nhập dữ liệu. Ví dụ sau chỉnh sửa giá trị của thuộc tính name thành "ten" và thêm thuộc tính size có giá trị là "49" vào phần tử input.
Thuộc tính maxlength
Thuộc tính maxlength xác định độ dài tối đa cho trường nhập dữ liệu. Ví dụ sau chỉnh sửa giá trị của thuộc tính name thành "ten" và thêm thuộc tính maxlength có giá trị là "10" vào phần tử input.
Những thuộc tính mới trong HTML5
HTML5 đã bổ sung thêm các thuộc tính cho phần tử input như autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder, required và step.
Điều này cho phép xác định các thuộc tính mới và mang lại trải nghiệm người dùng tốt hơn.
Đây là bảng tổng hợp các thuộc tính và giá trị của phần tử input trong HTML:
| Thuộc tính | Giá trị | Mô tả |
|---|---|---|
| type | textcheckboxradiohiddenbuttonsubmitresetpasswordfile-colordatedatetime-localemailsearchimagemonthnumberrangeteltimeurlweek | Kiểu phần tử input được tạo. |
| name | text | Tên của phần tử input. |
| value | text | Giá trị của phần tử input. |
| id | identifier | Xác định một định danh duy nhất cho input. |
| class | classnames | Thiết lập 1 hoặc nhiều class CSS cho input. |
| style | CSS-styles | Đặt kiểu cho input. |
| data-* | value | Xác định dữ liệu bổ sung mà JavaScript có thể sử dụng. |
| hidden | hidden | Xác định input có bị ẩn hay không. |
| title | text | Đặt tiêu đề hiện dưới dạng tooltip. |
| tabindex | index | Đặt trình tự tab liên quan đến phần tử tab khác. |
| checked | checked | Đối với các kiểu: checkbox hoặc radio. Làm lựa chọn đã được tích hoặc tùy chọn. |
| placeholder | text | Gợi ý ngắn mô tả giá trị được mong đợi. |
| maxlength | number | Số lượng tối đa ký tự được phép. |
| required | no value | Đặt input cho trường được yêu cầu. |
| readonly | readonly | Đặt chỉ đọc cho input. |
| disabled | disabled | Vô hiệu hóa phần tử input. |
| autofocus | no value | Đặt tập trung vào phần tử sau khi tải trang. |
| autocomplete | on or off | Trình bày các giá trị đã được nhập vào trước đó cho người dùng. |
| form | form-id | Tham chiếu tới id của biểu mẫu input thuộc về. |
| formaction | URL | Kiểu: submit và image. URL hoặc đường dẫn của file, dữ liệu gửi đi sẽ được xử lý. |
| formtarget | _blank_self_parent_topframename | Kiểu: submit and image. Cho biết vị trí phản hồi được hiển thị. |
| formenctype | application/x-www-form-urlencoded,multipart/form-data,text/plain | Kiểu: submit image. Mã hóa dữ liệu được gửi trên server. |
| formmethod | getpost | Kiểu: submit và image. HTTP gửi dữ liệu biểu mẫu. |
| formnovalidate | formnovalidate | Tránh biểu mẫu được xác thực sau khi gửi. |
| accept | file-extensionaudio/video/image/*media_type | Kiểu: file. Cho biết loại tệp mà người dùng có thể chọn để tải lên. |
| min | numberdate | Giá trị tối thiểu. |
| max | numberdate | Giá trị tối đa. |
| step | numberany | Khoảng cách giữa các số hợp lệ. |
| multiple | multiple | Cho phép người dùng chọn hơn 1 giá trị từ lựa chọn. |
| pattern | regexp | Giá trị của phần tử input được kiểm tra dựa trên phần tử này. |
| size | number | Chiều rộng của phần tử input theo số lượng ký tự. |
| width | pixels | Chiều rộng của phần tử input theo pixel. Được dùng bởi image. |
| height | pixels | Chiều cao của phần tử theo pixel. Được dùng bởi image. |
| list | datalist-id | |
| dirname | inputname | Hướng text được gửi. |
Đó là một số thuộc tính quan trọng của phần tử input trong HTML. Hy vọng rằng những thông tin này sẽ giúp bạn hiểu rõ hơn về cách sử dụng các thuộc tính này để tạo ra những trường nhập dữ liệu tốt hơn cho trang web của bạn.
