Home » HTML » Form trong HTML » Các thẻ trong form HTML
Ví dụ và cách sử dụng toàn bộ thẻ trong form của HTML.

Các thẻ trong form HTML

Bài này sẽ bao gồm toàn bộ các thẻ trong form HTML.

Thẻ <input>

<input> là thẻ quan trọng nhất trong form.

Cùng một thẻ <input> nhưng tùy thuộc vào thuộc tính type mà cho ra rất nhiều cách hiển thị cũng như sự tương tác khác nhau với người dùng.

Tất cả các kiểu input sẽ được miêu tả trong bài tiếp theo

Thẻ <select>

Thẻ <select> được sử dụng để tạo danh sách thả xuống:

Demo

Thẻ <option> được sử dụng để tạo các lựa chọn trong danh sách.

Mặc định, lựa chọn đầu tiên sẽ được hiển thị khi truy cập trang.

Bạn có thể sử dụng thuộc tính selected để thay đổi lựa chọn mặc định.

Demo

Thẻ <textarea>

Thẻ <textarea> được sử dụng để tạo khung nhập liệu gồm nhiều dòng:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:


Thẻ <button>

Thẻ <button> được sử dụng để tạo nút nhấn:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Các thẻ trong HTML5

HTML5 đã thêm một số thẻ mới vào trong form:

  • <datalist>
  • <keygen>
  • <output>
Mặc định, trình duyệt sẽ không hiển thị những thẻ không được hỗ trợ. Do vậy những thẻ mới này nếu chưa được hỗ trợ trên trình duyệt cũ cũng sẽ không phá hỏng bố cục trang web của bạn.

Thẻ <datalist> trong HTML5

Thẻ <datalist> được sử dụng để tạo các lựa chọn gợi ý cho thẻ <input>.

Người dùng sẽ nhìn thấy một danh sách thả xuống trước khi bắt đầu nhập dữ liệu.

Thuộc tính list trong thẻ <input> phải trùng với thuộc tính id trong thẻ <datalist>.

Demo

Thẻ <keygen> trong HTML5

Mục đích của thẻ <keygen> là xác thực người dùng một cách an toàn.

Thẻ <keygen> sẽ tạo ra một cặp-khóa (key-pair) trong form.

Khi dữ liệu trong form được gửi đi, 2 khóa được tạo ra, một private và một public.

Khóa private được lưu trữ ở trên máy còn khóa public được gửi đến máy chủ.

Khóa public có thể được sử dụng để tạo ra chứng chỉ để xác thực người dùng về sau.

Demo

Thẻ <output> trong HTML5

Thẻ <output> được sử dụng để hiển thị kết quả của một phép tính.

Demo

Các thẻ trong form

Icon html5 = Thẻ mới trong HTML5

ThẻMiêu tả
formTạo một form để người dùng nhập liệu
inputTạo khung dữ liệu để người dùng thao tác
textareaTạo khung nhập liệu nhiều dòng
labelTạo nhãn cho thẻ input
fieldsetNhóm những dữ liệu có liên quan tới nhau vào một form
legendĐặt tên các nhóm dữ liệu trong thẻ fieldset
selectTạo danh sách thả xuống
optgroupTạo nhóm trong danh sách thả xuống
optionTạo lựa chọn trong danh sách thả xuống
buttonTạo một nút nhấn
datalist HTML5Tạo các lựa chọn gợi ý cho thẻ input
keygen HTML5Tạo cặp khóa (key-pair) trong form
output HTML5Hiển thị kết quả của một phép tính

Leave a Reply

Your email address will not be published. Required fields are marked *

*