Các thuộc tính (attribute) HTML cho phép bạn trực tiếp thực hiện nhiều tác vụ phức tạp trên các file HTML của mình. Dưới đây là 11 trong số những thuộc tính hữu ích nhất cần biết!

HTML là những “viên gạch” để xây dựng nên một website. Các thuộc tính HTML cung cấp một số tính năng có thể giúp bạn khai thác HTML một cách tối đa. Nó xác định các đặc điểm hoặc thuộc tính bổ sung của một phần tử (element) HTML.

Trong bài viết này, bạn sẽ tìm hiểu về 11 thuộc tính HTML mà có thể bạn chưa nghe đến.

1. multiple

Thuộc tính này cho phép người dùng nhập nhiều giá trị. Bạn có thể sử dụng thuộc tính multiple với tag <input> và tag <select>. Thuộc tính này chỉ hợp lệ cho các loại đầu vào email hoặc file.

1.1 Sử dụng thuộc tính multiple với tag <select>

<label for="language">Select languages:</label>

<select name="language" id="language" multiple>

<option value="C++">C++</option>

<option value="Python">Python</option>

<option value="JavaScript">JavaScript</option>

<option value="Java">Java</option>

</select>

1.2 Sử dụng thuộc tính multiple để nhập file

Bằng cách sử dụng thuộc tính nhiều để nhập file, bạn có thể chọn nhiều file (bằng cách giữ phím Shift hoặc Ctrl).

<input type="file" multiple>

1.3 Sử dụng thuộc tính multiple để nhập email

Bằng cách sử dụng thuộc tính multiple để nhập email, bạn có thể nhập danh sách các địa chỉ email được phân tách bằng dấu phẩy. Tất cả các khoảng trắng sẽ bị xóa khỏi mỗi địa chỉ trong danh sách.

<input type="email" multiple>

2. contenteditable

Bạn có thể làm cho nội dung HTML có thể chỉnh sửa được trên một trang web bằng cách sử dụng thuộc tính contenteditable. Đây là một thuộc tính global (global attribute), tức là, nó chung cho tất cả các phần tử HTML.

<p contenteditable="true">

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>

3. spellcheck

Thuộc tính spellcheck chỉ định liệu phần tử có thể được kiểm tra lỗi chính tả hay không. Bạn có thể kiểm tra lỗi chính tả văn bản trong các phần tử <textarea>, văn bản trong các phần tử có thể chỉnh sửa hoặc văn bản trong các phần tử đầu vào (ngoại trừ mật khẩu).

<p contenteditable="true" spellcheck="true">

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>

4. download

Bạn có thể tải xuống tài nguyên bằng cách sử dụng thuộc tính download. Thuộc tính download yêu cầu trình duyệt download URL được chỉ định thay vì điều hướng đến nó. Bạn có thể sử dụng thuộc tính download với tag <a> và tag <area>.

Lưu ý : Thuộc tính download chỉ hoạt động với các URL có cùng nguồn gốc. Nó tuân theo các quy tắc của chính sách cùng nguồn gốc (same-origin policy).

<a href="xyz.png" download="myImage">Download</a>

5. accept

Thuộc tính accept của tag <input> chỉ định loại file người dùng có thể tải lên. Bạn có thể chỉ định danh sách được phân tách bằng dấu phẩy gồm một hoặc nhiều loại file làm giá trị của nó.

5.1 Chấp nhận file âm thanh

<input type="file" id="audioFile" accept="audio/*">

5.2 Chấp nhận file video

<input type="file" id="videoFile" accept="video/*">

5.3 Chấp nhận file hình ảnh

<input type="file" id="imageFile" accept="image/*">

5.4 Chấp nhận file Microsoft Word

<input type="file" id="docpicker"

accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

5.5 Chấp nhận file PNG hoặc JPEG

<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">

5.6 Chấp nhận file PDF

<input type="file" id="pdfFile" accept=".pdf">

6. translate

Thuộc tính translate cho trình duyệt biết rằng phần tử có nên được dịch hay không khi trang được bản địa hóa. Nó có thể có 2 giá trị: “yes” hoặc “no”.

<p translate="no">

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>

7. poster

Thuộc tính poster được sử dụng để hiển thị hình ảnh trong khi video đang download hoặc cho đến khi người dùng phát video.

Lưu ý : Nếu bạn không chỉ định bất cứ điều gì, không có gì được hiển thị cho đến khi có khung đầu tiên. Khi khung đầu tiên có sẵn, nó được hiển thị dưới dạng khung poster.

<video controls

src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"

poster="posterImage.png">

</video>

8. inputmode

Thuộc tính inputmode cho biết trình duyệt sẽ hiển thị bàn phím nào khi người dùng đã chọn bất kỳ phần tử nhập liệu hoặc vùng văn bản nào. Thuộc tính này chấp nhận các giá trị khác nhau:

8.1 Không có gì

<input type="text" inputmode="none" />

8.2 Số

<input type="text" inputmode="numeric" />

8.3 Số điện thoại

<input type="text" inputmode="tel" />

8.4 Số thập phân

<input type="text" inputmode="decimal" />

8.5 E-mail

<input type="text" inputmode="email" />

8.6 URL

<input type="text" inputmode="url" />

8.7 Tìm kiếm

<input type="text" inputmode="search" />

9. pattern

Thuộc tính pattern của phần tử <input> cho phép bạn chỉ định một biểu thức (expression) mà giá trị của phần tử sẽ được xác thực dựa vào đó. Bạn có thể sử dụng thuộc tính pattern với một số kiểu đầu vào như văn bản, ngày tháng, tìm kiếm, URL, số điện thoại, email và mật khẩu.

<form>

<input name="username" id="username" pattern="[A-Za-z0-9]+">

</form>

10. autocomplete

Thuộc tính này chỉ định liệu trình duyệt có nên tự động hoàn thành đầu vào dựa trên đầu vào của người dùng hay không. Bạn có thể sử dụng thuộc tính tự động hoàn thành với một số loại đầu vào như văn bản, tìm kiếm, URL, điện thoại, email, mật khẩu, bộ chọn ngày, phạm vi và màu sắc. Bạn có thể sử dụng thuộc tính này với các phần tử <input> hoặc các phần tử <form> .

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

11. autofocus

Thuộc tính autofocus chỉ ra rằng một phần tử sẽ tự động lấy tiêu điểm tải trang. Bạn có thể sử dụng thuộc tính này với các phần tử <button>, <input>, <keygen>, <select> hoặc <textarea>.

11.1 Sử dụng thuộc tính autofocus với phần tử input

<input type="text" autofocus>

11.2 Sử dụng thuộc tính autofocus Với phần tử select

<select name="languages" id="languages">

<option value="C++">

C++

</option>

<option value="Python">

Python

</option>

<option value="JavaScript">

JavaScript

</option>

<option value="Java">

Java

</option>

</select>

11.3 Sử dụng thuộc tính autofocus Với phần tử textarea

<textarea autofocus>

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat.

</textarea>

Nếu bạn muốn xem toàn bộ mã nguồn được sử dụng trong bài viết này, hãy xem kho lưu trữ GitHub.

Dịch từ: https://www.makeuseof.com/useful-html-attributes-to-know/

>>> Nếu bạn đang có nhu cầu học lập trình trực tuyến, tìm hiểu ngay tại đây:

>>> Xem thêm bài viết:

Đại học trực tuyến? Tại sao nên chọn học đại học trực tuyến thay vì đại học offline?

5 điều có thể bạn chưa biết về học lập trình trực tuyến FUNiX

Review khóa học trực tuyến FUNiX FPT đang được nhiều bạn trẻ lựa chọn

FUNiX đào tạo lập trình trực tuyến cung cấp nhân sự tập đoàn FPT

5 Điểm đáng chú ý tại khóa học lập trình trực tuyến FPT – FUNiX

Vân Nguyễn