Hướng dẫn text box html - hộp văn bản html



Nội dung chính

  • Định nghĩa và sử dụng
  • Ví dụ về thẻ input trong HTML
  • Những điểm cần nhớ
  • Sự khác nhau giữa HTML4.01 và HTML5
  • Sự khác nhau giữa HTML và XHTML
  • Các thuộc tính của thẻ input trong HTML và HTML 5
  • Trình duyệt hỗ trợ

Định nghĩa và sử dụng

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 dữ liệu.

Các phần tử được sử dụng bên trong 1 phần tử để khai báo các điểu khiển đầu vào mà cho phép người dùng nhập dữ liệu.

Trường input có thể thay đổi theo nhiều cách, tùy thuộc vào giá trị của thuộc tính type.


First name:
Last name:

Kết quả:


Những điểm cần nhớ

1) 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.

2) Phần tử input là trống. Nó chỉ chứa các thuộc tính. Không cần thẻ kết thúc trong HTML.

3) 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.


Sự khác nhau giữa HTML4.01 và HTML5

HTML 5 không hỗ trợ thuộc tính "align". Có một và thuộc tính mới cho thẻ trong HMTL 5, và thuộc tính type có nhiều giá trị khác nhau.


Sự khác nhau giữa HTML và XHTML

Trong HTML, thẻ được sử dụng không cần phải có thẻ đóng. Trong XHTML, thẻ phải có thẻ đóng.



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

= thuộc tính mới trong HTML 5.

Thuộc tínhGiá trịMô tả
accept file_extension audio/* video/* image/* media_type
audio/*
video/*
image/*
media_type
Chỉ định kiểu của file mà server chấp nhận (chỉ khi type="file")
align left right top middle bottom
right
top
middle
bottom
Không hỗ trợ trong HTML5. Chỉ định sự sắp hàng của image input (chỉ khi type="image")
Chỉ định sự sắp hàng của image input (chỉ khi type="image")
alt text Chỉ định một văn bản thay thế cho hình ảnh (chỉ khi type="image")
autocomplete on off
off
Chỉ định một phần tử có cần phải bật tính năng tự động hoàn tất
autofocus autofocus Chỉ định rằng một phần tử được focus tự động khi trang tải trang web
checked checked 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")
dirname inputname.dir Chỉ định rằng hướng văn bản sẽ được gửi
disabled disabled Chỉ định rằng một phần tử bị vô hiệu hóa
form form_id Chỉ định một hoặc nhiều form mà có phần tử thuộc về nó
formaction URL 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")
formenctype application/x-www-form-urlencoded multipart/form-data text/plain
multipart/form-data
text/plain
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")
formmethod getpost
post
Đị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")
formnovalidate formnovalidate Đị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ửi
formtarget _blank _self _parent _top framename
_self
_parent
_top
framename
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")
height pixels Chỉ định chiều cao của một phần tử (chỉ đối với type="image")
list datalist_id Tham chiếu đến một phần tử chứa các tùy chọn được định nghĩa trước
max number date
date
Chỉ định giá trị maximum cho một phần tử
maxlength number Chỉ định số ký tự lớn nhất được nhập vào phần tử
min number date
date
Chỉ định giá trị maximum cho một phần tử
maxlength maxlength number
Chỉ định số ký tự lớn nhất được nhập vào phần tử text Chỉ định một văn bản thay thế cho hình ảnh (chỉ khi type="image")
autocomplete on off Chỉ định một phần tử có cần phải bật tính năng tự động hoàn tất
autofocus text Chỉ định một văn bản thay thế cho hình ảnh (chỉ khi type="image")
autocomplete autocomplete on off
Chỉ định một phần tử có cần phải bật tính năng tự động hoàn tất Chỉ định một phần tử có cần phải bật tính năng tự động hoàn tất autofocus
Chỉ định rằng một phần tử được focus tự động khi trang tải trang web number Chỉ định số ký tự lớn nhất được nhập vào phần tử
min URL 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")
formenctype application/x-www-form-urlencoded multipart/form-data text/plain 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")
formmethod getpost
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Đị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")
formnovalidate text Chỉ định một văn bản thay thế cho hình ảnh (chỉ khi type="image")
 
autocomplete pixels Chỉ định chiều cao của một phần tử (chỉ đối với type="image")

list

datalist_id

Tham chiếu đến một phần tử chứa các tùy chọn được định nghĩa trước

max

number date

Chỉ định giá trị maximum cho một phần tử

maxlength
number Chỉ định số ký tự lớn nhất được nhập vào phần tử Chỉ định số ký tự lớn nhất được nhập vào phần tử Chỉ định số ký tự lớn nhất được nhập vào phần tử Chỉ định số ký tự lớn nhất được nhập vào phần tử Chỉ định số ký tự lớn nhất được nhập vào phần tử