Hướng dẫn xem thêm trong html
Có rất nhiều loại thẻ trong HTML như thẻ div, thẻ form, thẻ table,…Trong bài viết này, Vietnix sẽ giới thiệu đến bạn một loại thẻ thông dụng đó là thẻ Input. Vậy thẻ input trong HTML là gì? Thẻ này được sử dụng với mục đích gì? Thẻ input có những loại và thuộc tính nào. Cùng tìm hiểu nhé và xem các ví dụ cụ thể dưới đây nhé! Show Nội dung
Định nghĩa và mục đích sử dụng thẻ Input trong HTML
>> Xem thêm: Thẻ a trong HTML là gì? Các thuộc tính của thẻ a thông dụng là gì? Các loại (type) trong HTMLCác thẻ input trong html đều giống nhau về cấu trúc và chỉ khác nhau về type. Chính type này sẽ quyết định kiểu của input. Có đến hơn 20 type khác nhau. Có một số type input chỉ được hỗ trợ trong HTML5 mà thôi. Các type dưới đây là type được tất cả các trình duyệt thông dụng hỗ trợ.
Code mẫu:
Code mẫu:
Code mẫu:
Code mẫu:
Code mẫu:
Tổng hợp những ví dụ cụ thể về thẻ input trong HTML
0Để xác định chiều dài lớn nhất (trong ký tự) của một trường text hay password.
1Text hiển thị bên trong dưới dạng là password.
2Dạng này sẽ không được hiển thị ra trình duyệt. Và thường được sử dụng khi không muốn dữ liệu bị thay đổi.
3Dạng này thường được sử dụng cho nhiều lựa chọn khác nhau.
3Dạng này thường được sử dụng cho một chọn lựa mặc định.
5Dạng này được sử dụng để upload file.
6Sử dụng như một nút nhấn nhưng bằng hình ảnh.
7Được dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong
9Sử dụng như một nút nhấn. >> Xem thêm: Thẻ iFrame trong HTML là gì? Cách sử dụng iFrame trong HTML Những điểm cần lưu ý đối với thẻ inputCó 3 điểm cần lưu ý đối với thẻ input trong HTML sau đây:
Các thuộc tính của thẻ input trong HTML5 và HTMLBảng dưới đây giới thiệu chi tiết các thuộc tính của thẻ input trong HTML và HTML5: Thuộc tínhGiá trịMô tảacceptfile_extensionaudio/* video/* image/* media_typeDùng để chỉ định kiểu của file mà server chấp nhận (chỉ khi type=”file”)alignleft right top middle bottomThuộc tính align là một trong các thuộc tính không được hỗ trợ trong HTML5.Được dùng để chỉ định sự sắp hàng của image input (chỉ khi type=”image”)alttextĐược dùng để chỉ định một văn bản thay thế cho hình ảnh (chỉ khi type=”image”)autocompleteon offĐược dùng để chỉ định một phần tử có cần phải bật tính năng tự động hoàn tấtautofocusauto focusĐược dùng để chỉ định rằng một phần tử được focus tự động khi trang tải trang webcheckedcheckedĐược dùng để chỉ định rằng một phần tử có được chọn trước (pre-selected) khi tải trang web (đối với type=”checkbox” hoặc type=”radio”)dirnameinputname.dirĐược dùng để chỉ định rằng hướng văn bản sẽ được gửidisableddisabledĐược dùng để chỉ định rằng một phần tử bị vô hiệu hóaformform_idĐược dùng để chỉ định một hoặc nhiều form mà có phần tử thuộc về nóformactionURLĐược dùng để chỉ định URL của file sẽ xử lý các thông tin của form được gửi(đối với type=”submit” và type=”image”)formenctypeapplication/x-www-form-urlencoded multipart/form-datatext/plainĐược dùng để chỉ định cách dữ liệu của form phải được mã hoá khi gửi nó lên máy chủ (đối với type=”submit” và type=”image”)formmethodget postĐược dùng để chỉ định nghĩa phương thức HTTP cho việc gửi dữ liệu của form tới action URL (đối với type=”submit” và type=”image”)formnovalidateformnovalidateĐược dùng để chỉ định nghĩa các phần tử của form không cần phải kiểm tra hợp lệ khi gửiformtarget_blank _self _parent _topframenameĐược dùng để chỉ định nơi hiển thị những gì nhận được sau khi gửi form (đối với type=”submit” và type=”image”)heightpixelsĐược dùng để chỉ định chiều cao của một phần tử (chỉ đối với type=”image”)listdatalist_idĐược dùng để tham chiếu đến một phần tử |