Tóm tắt: HTML5 phản ánh những thay đổi to lớn theo cách mà bây giờ bạn đang kinh
doanh trên web và trong đám mây. Bài viết này là bài thứ hai trong một loạt
bài bốn phần được thiết kế để làm sáng tỏ những thay đổi trong HTML5, bắt đầu
bằng các thẻ mới và tổ chức trang và cung cấp thông tin cấp cao về thiết kế
trang web, việc tạo các biểu mẫu, việc sử dụng và giá trị của các API; và cuối
cùng, các khả năng sáng tạo mà Canvas (Khung nền ảnh) cung cấp. Phần thứ hai
này giới thiệu các khái niệm về các nút điều khiển của biểu mẫu HTML5 và đề
cập đến vai trò của JavaScript và CSS3.
Tất cả việc quản trị, phân tích dữ liệu, chiến lược tiếp thị, và các chức
năng khác của các tổ chức mức doanh nghiệp đều quan trọng. Tuy nhiên,
chẳng có một ô cửa kỹ thuật số thành công nào mà khách hàng tiềm năng của
bạn có thể sử dụng — hoặc được thúc đẩy sử dụng
— các quá trình ban đầu cần thiết cho sự phát triển của
trang web mà thiếu đi sự trao đổi của khách truy cập. Một trải nghiệm tích
cực, thân thiện với người sử dụng thúc đẩy sự tương tác cần thiết cho nỗ
lực của bạn là một mục tiêu hàng đầu của tổ chức.
Điểm chính của sự tương tác là các biểu mẫu của trang web. Chúng tạo điều
kiện trao đổi tương tác với người dùng sao cho các mục tiêu đã thúc đẩy
việc xây dựng trang web có thể được nâng lên nhờ thay đổi của khách truy
cập trang web. Các biểu mẫu là nhân tố chính để tiếp thêm năng lượng cho
sự tương tác giữa các chủ sở hữu hoặc các đại lý trang web và những người
dùng trang web, và như vậy, chúng cực kỳ quan trọng cho việc thiết kế và
phát triển một trang web.
Trung tâm của điểm chính đó được phát hiện ra trong các nút điều khiển
— các nút tròn, các hộp kiểm tra, các hộp văn bản, các
nút quay tròn số, và các thứ tương tự. Các phần tử này cần thiết cho việc
đàm thoại của người dùng trang web với trang web. Nói cách khác, không có
các nút điều khiển chức năng đầy đủ (cả hai về hoạt động "cơ học" của nút
điều khiển và sự thích hợp của nút điều khiển cho nhiệm vụ cụ thể), thì
không thể có đàm thoại, và do đó, không có sự trao đổi tiềm năng nào.
Điều bắt buộc là các mối quan hệ của quá trình trao đổi này được xem xét
cẩn thận, bao gồm tất cả các khía cạnh của sự tương tác giữa khách truy
cập trang web và hệ thống hiện tại. Tốc độ xác nhận hợp lệ, đầu vào, nhận
thức, sự chuyển hướng, việc nạp các trang, và cách các trang được thiết
lập tất cả đều có tác động đến quá trình trao đổi. Các cải tiến và nâng
cao tính xác nhận hợp lệ, cùng với sự đa dạng mở rộng của các tùy chọn nút
điều khiển của biểu mẫu được cung cấp và tính chất đa phương tiện chung
của các đặc tả HTML5, là tất cả các yêu tố đóng góp cho khả năng của HTML5
trong việc biến một khách truy cập trang web thành một người dùng trang
web thực sự.
HTML5 là một công cụ đặc biệt mạnh mẽ để xác nhận hợp lệ và lòng tin chung
về điện toán dựa trên web hợp lý — một tài sản an toàn quan
trọng. Nó đặc biệt quan trọng trong việc thiết kế và phát triển các trang
web nhằm mục đích để thu hút các khách hàng. Vì vậy, cách sử dụng của nó
là cần thiết để duy trì một tốc độ trao đổi thuận lợi. Nếu bạn không thể
vạch ra các triển vọng, thì bạn đang gặp rắc rối; nếu bạn không thể thay
đổi các triển vọng mà bạn vạch ra, thì bạn phải hạ cánh khẩn cấp.
Nhưng ở đây có trợ giúp. Các kiểu HTML5, chẳng hạn như
email và telephone,
làm cho các tùy chọn truyền thông rộng lớn dễ dàng. Nhờ kết hợp với sự
thông suốt về cấu trúc được nền tảng ngữ nghĩa của HTML5 phổ biến, nên
không có rào cản nào đối với một cuộc đàm thoại trong suốt giữa bạn và
phần còn lại của thế giới.
Dựa vào thế giới trung tâm mạng của chúng ta, tốc độ phát triển sôi động
của nền kinh tế toàn cầu có tính ngẫu nhiên ngày càng tăng, sự phát triển
nhanh chóng của điện toán đám mây, sự tăng trưởng theo cấp số nhân trong
việc sử dụng các giải pháp công nghệ di động và viễn thông giữa các nền
tảng — cả về thương mại lẫn xã hội — rõ ràng
là chúng ta đứng trên ngưỡng cửa của một thế giới mới lý tưởng trong tương
lai của điện toán và truyền thông dựa trên web. Đó là một thế giới có cả
hai một chức năng và một bắt nguồn từ cuộc hôn nhân đang phát triển giữa
các yếu tố về truyền thông và CNTT cũng như các nhu cầu của một xã hội
toàn cầu có tính cạnh tranh cao.
Thiết kế biểu mẫu
Trong HTML5, các biểu mẫu đã được coi là việc tân trang lớn. Một số nhiệm
vụ mà trước đây đòi hỏi mã hóa JavaScript thì bây giờ có thể dễ dàng được
thực hiện mà không cần nó. Ví dụ biểu mẫu của bài viết này phân tích việc
sử dụng bộ ứng dụng HTML5 về các đổi mới biểu mẫu. Bước đầu tiên trong quá
trình này, tất nhiên, là hoạch định biểu mẫu.
Bố cục của ví dụ biểu mẫu mà bạn sẽ phát triển được hiển thị trong Hình 1.
Bạn sẽ phát triển ba vùng cho trang biểu mẫu này: vùng Header, vùng Form
(Biểu mẫu), và vùng Footer. Vùng Header chứa các tiêu đề và phụ đề trang
được bọc trong các thẻ
<header></header>. Ở dưới cùng của
trang, vùng Footer có chứa thông tin bản quyền bên trong các thẻ
<footer></footer>. Tôi đã nói về
việc xây dựng một vùng Header và một vùng Footer trong ví dụ được cung cấp
trong phần 1 của loạt bài này: Nếu bạn chưa quen với các thẻ
<header> và
<footer>, hãy tham khảo bài viết đó 
Cuộc thảo luận các biểu mẫu này tập trung vào bốn thẻ:
-
<form> -
<fieldset> -
<label> -
<input>
Trong HTML5, có hai thuộc tính mới đã được thêm vào thẻ
<form> (biểu mẫu):
autocomplete và
novalidate. Thuộc tính
autocomplete cho phép các danh sách đề xuất thả
xuống xuất hiện trên các trang web giống như Google. Thuộc tính
novalidate tắt xác nhận hợp lệ cho một biểu
mẫu, rất có ích trong quá trình thử nghiệm.
Thẻ
<fieldset> (thiết lập trường) có ba
thuộc tính mới là: disable (vô hiệu hóa),
name (tên), và form.
Thuộc tính disable làm cho thẻ
<fieldset> không hoạt động. Thuộc tính
name đặt tên cho thẻ
<fieldset>. Giá trị thuộc tính
form là mã định danh (ID) của biểu mẫu này hay
các biểu mẫu thuộc về thẻ <fieldset>.
Trong HTML5, một thẻ <fieldset> có thể
nằm ngoài biểu mẫu này hay các biểu mẫu mà nó thuộc về. Khi một thẻ
<fieldset> được đặt bên ngoài của biểu
mẫu, bạn phải thiết lập thuộc tính form của thẻ
<fieldset> để cho thẻ
<fieldset> có thể được liên kết với biểu
mẫu hoặc các biểu mẫu đúng.
Thẻ
<label> (nhãn), định nghĩa một sự phân
loại cho một phần tử đầu vào, có một thuộc tính mới là:
form. Giá trị thuộc tính
form là ID của biểu mẫu này hay các biểu mẫu mà
thẻ <label> thuộc về. Thẻ
<label> cũng có thể được đặt ở bên ngoài
của biểu mẫu, vì vậy ở đây thuộc tính form cũng
được sử dụng để liên kết <label> với biểu
mẫu thích hợp.
Thẻ
<input> (đầu vào) có một số kiểu mới
cũng như các thuộc tính nâng cao khả năng sử dụng của biểu mẫu. HTML5 đã
giới thiệu một số các kiểu đầu vào mới được thiết kế để tổ chức và phân
loại dữ liệu, sao chép toàn bộ cách tiếp cận ngữ nghĩa của HTML5. Câu châm
ngôn cũ là biểu mẫu nên thực hiện theo chức năng là một cách tiếp cận
thích hợp để mô tả các chức năng của các biểu mẫu HTML5.
Trong HTML5, trường
<input> của biểu mẫu
có thể nằm ngoài các thẻ <form>. Thuộc
tính form xác định biểu mẫu này hay các biểu
mẫu mà trường đầu vào thuộc về. Nó cũng xác định biểu mẫu mà nó thuộc về
bằng cách đưa ra ID của biểu mẫu. Bảng 1 cho thấy các kiểu
<input> mới. Bảng 1. Các kiểu <input> mới
color (màu) | date (ngày) | datetime (ngày giờ) | datetime-local (ngày giờ-địa
phương) | month (tháng) |
week (tuần) | time (thời gian) | email
| number (số) | range (phạm vi) |
search (tìm kiếm) | tel (điện thoại) | url
|
Bảng 2 cho thấy các thuộc tính
<input>
mới. Bảng 2. Các thuộc tính <input> mới
autocomplete (hoàn thành tự động) | autofocus (trọng tâm tự động) | form (biểu mẫu) | formaction (hành động biểu mẫu) | formenctype (mã hóa biểu mẫu) |
formmethod (phương thức biểu mẫu) | formnovalidate (biểu thức không xác
nhận hợp lệ) | formtarget (đích biểu mẫu) | height (độ cao) | max (tối đa) |
min (tối thiểu) | multiple (nhiều) | pattern (mẫu) | placeholder (giữ chỗ) | required (cần thiết) |
step
|
Trong quá trình tạo trang web, bạn sử dụng hầu hết các kiểu và các thuộc
tính này.
Tạo biểu mẫu
Trang web được hiển thị trong Hình 2 dùng cho Điểm âm nhạc cổ điển
(Classical Music Place), một trang web có các tác phẩm của một số nhà soạn
nhạc để tải về. Trang này cũng cho phép những người say mê các tác phẩm cổ
điển đưa lên các bản ghi âm những bản nhạc cổ điển. Đây là trang bạn sẽ
tạo ra.
Hình 2. Biểu mẫu Điểm âm nhạc cổ điển
Cấu tạo của biểu mẫu này bắt đầu bằng thẻ
<form>. Trong ví dụ này, bạn sử dụng
thuộc tính autocomplete mới, được đưa ra dưới
đây: <form id="orderForm" autocomplete="on" action="javascript:alertValues();" method="get"> |
Một hành động JavaScript cũng được chứa trong thẻ
<form>, mà tôi sẽ thảo luận trong phần sau.
Thẻ
<form> có bốn thẻ <fieldset>, được phác ra trực quan bởi các vùng màu xám
trong Hình 2: Tên, điện thoại, địa chỉ Email, và ngày.
Thẻ <fieldset> tạo nhóm thẻ như nội dung
trong biểu mẫu. Chúng ta hãy xem xét từng thẻ <fieldset> riêng biệt.
Thẻ <fieldset> đầu
tiên
Thẻ
<fieldset> đầu tiên chứa thông tin
khách hàng (xem Hình 3). Nó có một trường Name, một
trường Telephone, một trường Email
address, và một trường Date. Trường
Name có thuộc tính
autofocus, cho phép bạn bắt đầu nhập văn bản
vào mà không cần phải nhấn vào trường này. Hình 3. Các trường thông tin khách hàng
Thẻ
<fieldset> đầu tiên chứa một thẻ
<legend> (ghi chú), một thẻ
<label>, và một thẻ
<input>, như trong Liệt kê 1. Trường
Name, là kiểu text, có ba thuộc tính
<input> mới là:
placeholder,
autofocus, và
required. Liệt kê 1. Trường Name
<fieldset>
<legend> Customer Info </legend>
<p>
<label>Name:
<input id="name" name="name" type="text" placeholder="Enter your name"
autofocus required size="50">
</label>
</p>
|
Thuộc tính
autofocus bảo đảm rằng trọng tâm đầu
vào sẽ ở trên trường này khi trang được mở ra. Đây là một chức năng làm
cho trang này tập trung vào ngay khi nó tải, cho phép người dùng truy cập
ngay lập tức vào biểu mẫu đó.
Thuộc tính
placeholder đặt văn bản vào giữa các
dấu ngoặc kép bên trong trường này dưới dạng văn bản màu xám nhạt. Thuộc
tính placeholder sẽ nói cho người dùng biết
trường này phải chứa những gì và được hiển thị thế nào khi trường này
rỗng. Tuy nhiên, vì các trường Name cũng có thuộc tính
autofocus được thiết lập, nên khi bạn nhập vào
trang này, bạn không thể thấy văn bản thực sự. Lưu ý rằng trong Hình 3,
trường Name không hiển thị giữ chỗ, và nó được đóng khung trong phần đánh
dấu màu vàng. Nếu bạn di chuyển đến một trường khác mà không nhập dữ liệu,
thì văn bản giữ chỗ sẽ được hiển thị. Khi bạn sử dụng thuộc tính
autofocus với thuộc tính
placeholder, văn bản giữ chỗ sẽ biến mất do
trong tâm được được đặt vào trường này.
Thuộc tính
required tạo điều kiện thuận lợi cho
việc đặt một trường bắt buộc như là một điều kiện tiên quyết để trình lên
biểu mẫu. Điều này là hợp lệ với các trường văn bản, tìm kiếm, URL, điện
thoại, email, mật khẩu, các nút chọn ngày, số, hộp kiểm tra, nút tròn, và
các trường tệp.
Trường Telephone, là kiểu
tel, có các thuộc tính
required,
placeholder, size,
và pattern, như trong Liệt kê 2. Kiểu
tel là một trường văn bản được thiết kế để chứa
các số điện thoại. Trong ví dụ này, trường Telephone có sự hạn chế theo
mẫu cần phải được tuân thủ nghiêm ngặt, vì hệ thống sẽ không cho phép bạn
trình lên cho đến khi bạn sử dụng các mẫu ký tự đúng. Trường placeholder
dùng cho điện thoại thiết lập mẫu dựa vào bạn dùng đầu vào nào
Trường pattern mô phỏng các chức năng của một biểu thức chính quy (regex)
JavaScript truyền thống. Đầu vào phải khớp với cấu trúc mẫu của biểu thức
chính quy được định nghĩa trước khi nó có thể được xác nhận hợp lệ. Trường
này làm việc với các kiểu
text,
search, url,
telephone, email, và
password. Liệt kê 2. Trường Telephone
<p>
<label>Telephone:
<input id="tel" name="telephone" type="tel" placeholder="Pattern: 1-234-567-8910"
required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
</label>
</p>
|
Trường địa chỉ Email là kiểu
email, như trong
Liệt kê 3. Địa chỉ email được xác nhận hợp lệ tự động mà không cần phải sử
dụng một mẫu: Xác nhận hợp lệ là một phần của HTML5. Nếu không trình bày
địa chỉ email này theo định dạng đúng, thì biểu mẫu không thể được trình
lên. Liệt kê 3. Trường địa chỉ Email
<p>
<label>Email address:
<input id="email" name="email" type="email" placeholder="Enter your email address"
required size="50">
</label>
</p>
|
Mục nhập cuối cùng trong thẻ
<fieldset>
này là trường Date. Kiểu date cung cấp một nút
chọn lịch để chọn ngày trong trình duyệt Opera nhưng tạo ra một nút quay
tròn trong Google Chrome, như đã thấy trong Hình 3.
Hình 4 cho thấy biểu diễn Opera của trang web này có nút chọn trường
Date được hiển thị. Lưu ý rằng trong Opera, các góc
thiết lập trường này không được làm tròn, mặc dù đã sử dụng cùng một bảng
định kiểu để làm tròn các góc như trong Chrome. Hình 4. Trường Date
Liệt kê 4 cho thấy đoạn mã được sử dụng để tạo nút chọn ngày.
Liệt kê 4. Trường Date
<p>
<label>Date: <input type="date">
</label>
</p>
</fieldset>
|
Bạn có thể tạo ra một bản ghi cho bất kỳ ngày nào. Bạn thậm chí có thể chia
nó theo giờ. Dưới đây là các kiểu ngày giờ mà bạn có thể tạo:
date. Chọn ngày, tháng, và nămmonth. Chọn tháng và nămweek. Chọn tuần và nămtime. Chọn thời gian (giờ và phút)datetime. Chọn thời gian, ngày, tháng, và năm (thời gian UTC)datetime-local. Chọn thời gian, ngày, tháng, và năm (thời gian địa phương)
Thẻ <fieldset> thứ
hai
Thẻ
<fieldset> thứ hai chứa một thẻ
<input> có một thuộc tính
list và một thẻ
<datalist>. Thuộc tính
list quy định một
<datalist> của trường đầu vào. Thẻ
<datalist> cung cấp một danh sách các tùy
chọn trường đầu vào. Thuộc tính list làm việc
với các kiểu <input> sau:
text, search,
url, telephone,
email,
date
pickers,
number, range, và
color.
Thẻ
<datalist> được hiển thị trong một
danh sách thả xuống, như trong Hình 5. Ảnh này được lấy trong Opera. Trong
Chrome, danh sách này được hiển thị như một hộp văn bản đơn giản. Người
dùng sẽ không được trình bày bằng danh sách này. Hình 5. Trường Favorites
Liệt kê 5 cung cấp thiết lập trường để tạo ra phần Favorite Composer (Nhà
soạn nhạc yêu thích).
Liệt kê 5. Trường Favorite Composer
<fieldset>
<legend> Favorite Composer </legend>
<p>
<label>
<input type="text" name="favorites" list="composers">
<datalist id="composers">
<option value="Bach">
<option value="Beethoven">
<option value="Brahms">
<option value="Chopin">
<option value="Mendelssohn">
</datalist>
</label>
</p>
</fieldset>
|
Thẻ <fieldset> thứ
ba
Thẻ
<fieldset> thứ ba hiển thị một danh
sách các nhà soạn nhạc, theo sau là một trường số chỉ rõ có bao nhiêu tác
phẩm có sẵn với mỗi nhà soạn nhạc được liệt kê. Hình 6 cho thấy phần này. Hình 6. Các trường Composers (Các nhà soạn nhạc)
Ví dụ, Bạch có năm tác phẩm, và Beethoven có 10 tác phẩm. Liệt kê 6 cho
thấy các giá trị tối đa cho mỗi nhà soạn nhạc. Trường số sẽ không chấp
nhận nhiều hơn giá trị tối đa khi bạn trình lên biểu mẫu này. Khi được
trình lên, trường này đáp ứng với các giá trị ngoài dải, không đúng bằng
cách nhắc bạn sửa lại đầu vào cho nó phù hợp với các giới hạn số chấp nhận
được của trường này.
Kiểu
number tạo ra một trường nút quay tròn cho
đầu vào. Sử dụng thuộc tính min, max, và step được sử
dụng với kiểu số number. Giá trị bước mặc định
là 1. Các thuộc tính min, max, và step được sử dụng với các ràng buộc số, phạm vi, hoặc đầu vào
nút chọn ngày. Thuộc tính max xác định giá trị
tối đa cho phép đối với trường đầu vào. Thuộc tính min xác định giá trị tối thiểu cho phép đối với trường đầu
vào. Thuộc tính step xác định bước tăng hợp lệ. Liệt kê 6. Các trường Composers
<fieldset>
<legend>Composers</legend>
<p>
<label>
Bach: <input name="form_number" id="form_number" type="number" min="1" max="5" >
</label>
</p>
<p>
<label>
Beethoven: <input name="form_number" id="form_number" type="number"
min="1" max="10" >
</label>
</p>
<p>
<label>
Brahms: <input name="form_number" id="form_number" type="number" min="1" max="7" >
</label>
</p>
<p>
<label>
Chopin: <input name="form_number" id="form_number" type="number" min="1" max="10" >
</label>
</p>
<p>
<label>
Mendelssohn: <input name="form_number" id="form_number" type="number"
min="1" max="4">
</label>
</p>
</fieldset>
|
Thẻ <fieldset> thứ
tư
Thẻ
<fieldset> thứ tư chứa kiểu <input>
file và thuộc tính
multiple, như trong Hình 7. Thuộc tính
multiple quy định rằng một trường đầu vào có
thể chọn nhiều giá trị từ một danh sách dữ liệu hoặc danh sách tệp. Trong
ví dụ này, một người dùng có thể chọn nhiều tệp để tải lên. Hình 7. Trường Upload
Mã cho kiểu tệp và thuộc tính
multiple được hiển
thị trong Liệt kê 7. Liệt kê 7. Trường Upload (Tải lên)
<fieldset>
<legend> Upload file(s) </legend>
<p>Upload one of your orchestra's file(s) for inclusion in our library</p>
<p><label>
<input type="file" multiple="multiple" />
</label>
</p>
</fieldset>
|
Nút Submit (Trình lên) sử dụng các thuộc tính
height (chiều cao) và
width (chiều rộng), như trong Liệt kê 8. Bạn sử
dụng các thuộc tính này để thiết lập chiều cao và chiều rộng của kiểu đầu
vào image. Khi bạn thiết lập các thuộc tính
này, vùng không gian của trang web dành cho hình ảnh không bị thay đổi do
bị các ràng buộc về các kích thước chiều rộng và chiều cao đặt sẵn, để làm
cho việc nạp trang dễ dàng nhằm nâng cao hiệu quả hiển thị trang. Liệt kê 8. Nút Submit
<input type="image" src="submitbutton.png" alt="Submit" width="100" height="45" /> </form> |
JavaScript và CSS3
Không thể thực hiện biểu diễn HTML5 mà không có CSS3. Và, mặc dù HTML5 đã
phủ nhận sự cần thiết đối với một số mã JavaScript, thì JavaScript vẫn là
một công cụ có giá trị. Sau đây là các tệp mã JavaScript và CSS3 được sử
dụng để tạo các biểu mẫu ví dụ.
Mã JavaScript là một hộp cảnh báo đơn giản trả về ba trường cần thiết, như
trong Liệt kê 9. Mặc dù đoạn mã JavaScript được sử dụng ở đây chỉ có một
dòng, những nó đã được đặt trong một tệp JavaScript riêng biệt, sau đây là
các thực hành tốt nhất để sử dụng nó.
Liệt kê 9. Mã JavaScript của biểu mẫu ví dụ
function alertValues()
{
alert("Customer information: " + "\n " + fullname.value + "\n "
+ tel.value + "\n " + email.value);
}
|
Liệt kê 10 cho thấy mã CSS3 định dạng biểu mẫu ví dụ. Thông tin
<header> và
<footer> không có ở đây. Liệt kê 10. Biểu mẫu ví dụ CSS3
form {
width: 550px;
margin: 0 0 0 0 ;
padding: 50px 60px;
background-color: #2d2d2d;
border-radius: 20px;
}
fieldset {
padding: 0 20px 20px;
margin: 0 0 30px ;
border: 2px solid #ffffff;
background: #B8B8B8 ;
border-radius: 10px;
}
legend {
color: #ffffff;
background: #990033;
font-size: 0.9em;
font-weight: bold;
text-align: left;
padding: 5px;
margin: 0;
width: 10em;
border: 2px solid #660033;
border-radius: 5px;
}
label {
display: block;
float: left;
clear: left;
text-align: left;
width: 100%;
padding: .4em 0 0 0;
margin: .15em 0 0 0;
}
Kết luận
Chìa khóa cho thành công rõ ràng cho cá nhân và tổ chức là truyền thông.
Các nút điều khiển của biểu mẫu và các hướng dẫn dựng trang nói chung là
quan trọng cho quá trình này, và HTML5 đã cung cấp nhiều công cụ mạnh mẽ
khác thường thích hợp cho nhiệm vụ này. Những người được chuẩn bị cho
tương lai — ngay lúc này — sẽ được hưởng
lợi; còn những người không được chuẩn bị sẽ phải chịu rủi ro nghiêm trọng
bởi tốc độ phát triển và các yêu cầu của xã hội toàn cầu, trung tâm mạng,
một thế giới-web.
Tải về tại đây: http://www.mediafire.com/?3zqaj1b3x6bf7fx
Tải về tại đây: http://www.mediafire.com/?3zqaj1b3x6bf7fx
0 comments:
Post a Comment