/ / 11 Thuộc tính HTML hữu ích mà bạn phải biết

11 Thuộc tính HTML hữu ích mà bạn phải biết

HTML là khối xây dựng của web. Biết một số phần ít được biết đến, nhưng hữu ích của ngôn ngữ đánh dấu này có thể giúp cuộc sống của bạn dễ dàng hơn rất nhiều. 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 tối đa HTML. Nó xác định các đặc điểm hoặc thuộc tính bổ sung của một phần tử 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. nhiều

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 nhiều thuộc tính với thẻ và 

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

Sử dụng nhiều thuộc tính để nhập tệp

Bằng cách sử dụng nhiều thuộc tính để nhập tệp, bạn có thể chọn nhiều tệp (bằng cách giữ Sự thay đổi hoặc là Điều khiển phím).

<input type="file" multiple>

Sử dụng nhiều thuộc tính để 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. có thể hài lòng

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 toàn cục, 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. kiểm tra chính tả

Thuộc tính kiểm tra chính tả 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 chính tả văn bản trong phần tử, văn bản trong phần tử có thể chỉnh sửa hoặc văn bản trong 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>

Liên quan: Bảng Cheat HTML Essentials: Thẻ, Thuộc tính, và hơn thế nữa

4. tải xuống

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

Ghi chú: Thuộc tính tải xuống chỉ hoạt động với các URL 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.

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

5. chấp nhận

Thuộc tính chấp nhận của chỉ định loại tệp 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 tệp làm giá trị của nó.

Chấp nhận tệp âm thanh

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

Chấp nhận tệp video

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

Chấp nhận tệp hình ảnh

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

Chấp nhận tệp Microsoft Word

<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

Chấp nhận tệp PNG hoặc JPEG

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

Chấp nhận tệp PDF

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

Liên quan: Các hiệu ứng HTML tuyệt vời mà bất kỳ ai cũng có thể thêm vào trang web của họ

6. dịch

Thuộc tính dịch 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>

Liên quan: Ví dụ về mã HTML đơn giản mà bạn có thể học trong 10 phút

7. áp phích

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

Ghi chú: 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 áp phích.

<video controls
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>

8. chế độ đầu vào

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:

Không có

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

Số

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

ĐT

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

Số thập phân

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

E-mail

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

URL

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

9. hoa văn

Thuộc tính mẫu của phần tử cho phép bạn chỉ định một biểu thức chính quy 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 mẫu 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>

Liên quan: Các trang web tốt nhất cho các ví dụ về mã hóa HTML chất lượng

10. tự động hoàn thành

Thuộc tính tự động hoàn thành 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 yếu tố hoặc các yếu tố.

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

11. tự động lấy nét

Thuộc tính tự động lấy nét là một thuộc tính boolean chỉ ra rằng một phần tử nên được tập trung vào tải trang. Bạn có thể sử dụng thuộc tính này với