Thẻ html nào sau đây để tạo ô nhập dữ liệu (text field) 2024

Xem Thẻ html nào sau đây để tạo ô nhập dữ liệu (text field) 2024

Khi làm website bằng HTML, đặc biệt là sau này bạn học lên các ngôn ngữ server-side như PHP hay Python thì việc sử dụng form nhập liệu rất phổ biến như tạo form đăng nhập, form đăng dữ liệu lên website,…nên nếu có thể thì nên hiểu cách tạo một form nhập liệu bằng HTML ngay từ bây giờ.

Ở HTML, để tạo form chúng ta sẽ sử dụng cặp thẻ

, thẻ này sẽ chứa một vài thuộc tính quan trọng và nội dung bên trong cặp thẻ đó là các thẻ  để khai báo các trường nhập liệu. Trước hết hãy xem qua mẫu một cái form đăng nhập bằng HTML dưới đây.

See the Pen qEGdOQ by Thach Pham (@thachpham92) on CodePen.

Các thuộc tính trong thẻ

:

• action: Đường dẫn đến một trang xử lý dữ liệu sau khi người dùng ấn nút gửi dữ liệu.
• method: Phương thức gửi dữ liệu.
• name: Tên của form.

Hiện tại nếu bạn đang học HTML thì không cần quan tâm đến ba thuộc tính trên vì nó thuộc thẩm quyền xử lý của các ngôn ngữ server-side, nhưng bạn chỉ cần nhớ khi tạo form thì nhớ khai báo các thuộc tính đó là được.

Các thuộc tính trong thẻ :

Thẻ này sẽ đại diện cho các trường nhập dữ liệu, mỗi thẻ là một trường nhập dữ liệu khác nhau. Tuy nhiên, kiểu nhập liệu của mỗi thẻ sẽ khác nhau dựa vào thuộc tính type bên trong nó vì hiện tại HTML đang hỗ trợ đến 23 kiểu nhập liệu, tương ứng với 23 giá trị của thuộc tính type.

Danh sách các giá trị của thuộc tính type:

• button
• checkbox
• color
• date
• datetime
• datetime-local
• email
• file
• hidden
• image
• month
• number
• password
• radio
• range
• reset
• search
• submit
• tel
• text
• time
• url
• week

Thay vì giải thích thì bạn nên tự tay thử từng loại để biết chức năng của nó là gì nhé, chỉ cần thay giá trị của thuộc tính type tương ứng với danh sách trên thôi. Tuy nhiên, bạn sẽ sử dụng nhiều nhất là kiểu 1 (trường nhập liệu dạng chữ và số), 2 (trường nhập mật khẩu, nó sẽ tự mã hóa mật khẩu nhập vào bằng ký tự *), 3 (trường tạo nút gửi dữ liệu đi), 4 (khung nhập liệu giống kiểu text nhưng bạn có thể viết xuống dòng).

Xem thêm về các thuộc tính của thẻ

Chỉ vậy thôi, bây giờ bạn chỉ cần nhớ về cách tạo form trong HTML là được, còn khi nào quên thì có thể lên mạng tham khảo tại trang W3Schools nhé.

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é!

Nội dung

1. Định nghĩa và mục đích sử dụng thẻ Input trong HTML
2. Các loại (type) trong HTML
3. Tổng hợp những ví dụ cụ thể về thẻ input trong HTML
4. Những điểm cần lưu ý đối với thẻ input
5. Các thuộc tính của thẻ input trong HTML5 và HTML
6. Trình duyệt hỗ trợ thẻ input
7. Lời kết
   

   Định nghĩa và mục đích sử dụng thẻ Input trong HTML

   • Thẻ HTML hay thẻ input trong HTML được sử dụng để biểu diễn một trường input nơi mà người dùng có thể nhập được dữ liệu.
   • Các phần tử được sử dụng bên trong 1 phần tử gọi là
     
     ; để khai báo các điều khiển đầu vào mà tại đó cho phép người dùng nhập được dữ liệu.
   • Cấu trúc:
   • Ví dụ:

   
   
   Họ tên: 
   Email: 
   Ngày sinh: 
   
   
   

   • Dạng của có thể có rất nhiều dạng khác nhau, chúng tùy thuộc vào thuộc tính tùy chọn type, có thể là text, một checkbox, một trường password, một button radio, một button, …
   • Lời khuyên: Sử dụng tag để tạo nhãn cho các thành phần

   Thẻ input trong HTML là gì?

   >> 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 HTML

   Cá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ợ.

   • Nhập text

   Code mẫu: 

   • Nhập password

   Code mẫu: 

   • File đính kèm

   Code mẫu: 

   • Button reset

   Code mẫu:

   
   Thành phố: 
   
   Nơi cư trú: 
   
   
   

   • Button submit

   Code mẫu:

   
   Tên trường học: 
   
   Giáo viên chủ nhiệm: 
   
   
   

   • Ẩn input

   Code mẫu:

   
   Họ tên đầy đủ: 
   
   
   
   

   • Radio button

   Code mẫu:

   
   Bình Định
   
   Gia Lai
   
   Phú Yên
   
   

   • Checkbox

   Code mẫu:

   
   Tennis
   
   Quần vợt
   
   Bóng rổ
   
   Bóng bàn
   
   Karate
   

   Sự kiện Giáng Sinh tại Vietnix

   Tổng hợp những ví dụ cụ thể về thẻ input trong HTML

   • Input dạng text (maxlength)

   
   
   Họ tên: 
   Email: 
   Ngày sinh: 
   
   
   

   0

   Để xác định chiều dài lớn nhất (trong ký tự) của một trường text hay password.

   • Input dạng password

   
   
   Họ tên: 
   Email: 
   Ngày sinh: 
   
   
   

   1

   Text hiển thị bên trong dưới dạng là password.

   Input dạng password

   • Input dạng hidden

   
   
   Họ tên: 
   Email: 
   Ngày sinh: 
   
   
   

   2

   Dạ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.

   Input dạng hidden

   • Input dạng checkbox (checked)

   
   
   Họ tên: 
   Email: 
   Ngày sinh: 
   
   
   

   3

   Dạng này thường được sử dụng cho nhiều lựa chọn khác nhau.

   Input dạng checkbox (checked)

   • Input dạng radio (checked)

   
   
   Họ tên: 
   Email: 
   Ngày sinh: 
   
   
   

   3

   Dạng này thường được sử dụng cho một chọn lựa mặc định.

   Input dạng radio

   • Input dạng file upload:

   
   
   Họ tên: 
   Email: 
   Ngày sinh: 
   
   
   

   5

   Dạng này được sử dụng để upload file.

   Input dạng file upload

   • Input dạng button image

   
   
   Họ tên: 
   Email: 
   Ngày sinh: 
   
   
   

   6

   Sử dụng như một nút nhấn nhưng bằng hình ảnh.

   Input dạng button image

   • Input dạng button submit

   
   
   Họ tên: 
   Email: 
   Ngày sinh: 
   
   
   

   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

   .

   Input dạng button submit

   Input dạng button reset

   
   
   Họ tên: 
   Email: 
   Ngày sinh: 
   
   
   

   8

   Được dùng để reset lại giá trị trong

   .

   Input dạng button reset

   • Input dạng button

   
   
   Họ tên: 
   Email: 
   Ngày sinh: 
   
   
   

   9

   Sử dụng như một nút nhấn.

   Input dạng button

   >> 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ẻ input

   Có 3 điểm cần lưu ý đối với thẻ input trong HTML sau đây:

   • Thứ nhất, sử dụng phần tử input bên trong phần tử form để khai báo các điều khiển đầu vào cho phép người dùng nhập dữ liệu.
   • Thứ hai, phần tử input là trống. Nó chỉ chứa các thuộc tính và không cần thẻ kết thúc trong HTML.
   • Thứ ba, nếu bạn muốn định nghĩa nhãn cho phần tử input, sử dụng phần tử label với mỗi thẻ input.

   Các thuộc tính của thẻ input trong HTML5 và HTML

   Bả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_extension
   audio/*
   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ử

   Trình duyệt hỗ trợ thẻ input

   Bảng dưới đây thể hiện các trình duyệt có hỗ trợ thẻ input.

   ChromeFirefoxMicrosoft EdgeOperaSafariAndroid

   Các trình duyệt hỗ trợ thẻ input

   Lời kết

   Bài viết trên đã đem đến cho bạn những thông tin hữu ích về thẻ input trong HTML. Hy vọng qua bài viết này bạn sẽ hiểu rõ về thẻ input và sử dụng thẻ này một cách hiệu quả hơn.

   Chia sẻ bài viết

   Đánh giá

   5/5 – (1 bình chọn)

   Nguyễn Hưng

   Kết nối với mình qua

   Mình là Bo – admin của Quản Trị Linux. Mình đã có 10 năm làm việc trong mảng System, Network, Security và đã trải nghiệm qua các chứng chỉ như CCNP, CISSP, CISA, đặc biệt là chống tấn công DDoS. Gần đây mình trải nghiệm thêm Digital Marketing và đã hòan thành chứng chỉ CDMP của PearsonVUE. Mình rất thích được chia sẻ và hỗ trợ cho mọi người, nhất là các bạn sinh viên. Hãy kết nối với mình nhé!

Bạn đang tìm hiểu bài viết:  Thẻ html nào sau đây để tạo ô nhập dữ liệu (text field) 2024

HỆ THỐNG CỬA HÀNG TRÙM SỈ QUẢNG CHÂU

Điện thoại: 092.484.9483

Zalo: 092.484.9483

Facebook: https://facebook.com/giatlathuhuongcom/

Website: Trumsiquangchau.com

Địa chỉ: Ngõ 346 Nam Dư, Trần Phú, Hoàng Mai, Hà Nội.