Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Các Thẻ HTML Hay Mà Bạn Nên Biết

Các Thẻ HTML Hay Mà Bạn Nên Biết


Ngày 13 Tháng 7 Năm 2021

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu các tiện ích HTML hay nhưng ít được các lập trình viên sử dụng trong quá trình phát triển website nhé!

Thẻ detail

Thẻ detail giúp hiển thị hay ẩn thông tin khi người dùng nhấp vào component này. Để hiểu rõ hơn chúng ta hãy đi vào đoạn code sau nhé!

<details>
   <summary>Bạn Hãy Nhấp Vào Đây</summary>
  <div> Niềm Vui Lập Trình Xin Chào Bạn</div>
</details>

Và dưới đây là video kết quả nhé!

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Thẻ detail HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thuộc tính type="range"

Thuộc tính type="range" giúp xác định khoảng giá trị mà chúng ta muốn người dùng nhập vào.

<h1> Range Slider</h1>
<p>Bạn hãy dùng chuột đẻ kéo thanh trượt bên dưới.</p>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

Và dưới đây là video kết quả nhé!

Còn dưới đây là kết quả trên Codepen nha.

See the Pen by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muón tham khảo thêm về thuộc tính range HTML thì có thể tham khảo ở đây nhé!

Nguồn

Thẻ output

Thẻ output giúp bạn có thể hiển thị kết quả của các phép tính toán. Để hiểu rõ hơn bạn xem kết quả dưới đây nhé!

<form oninput="c.value=parseInt(a.value) * parseInt(b.value)">
   <input type="number" id="a" value="0"> * <input type="number" id="b" value="0">
   = <output name="c" for="a b"></output>
</form>

Và dưới đây là video kết quả nhé!

Còn dưới đây là kết quả trên Codepen nha.

See the Pen by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thẻ Datalist

Thẻ Datalist tập hợp các phần tử tuỳ chọn được xác định trước. Nó cũng cung cấp thêm chức năng autocomplete cho thẻ input .

<form action="" method="get">
    <label for="fruit"> Hãy Chọn Môn Học Mà Bạn Yêu Thích:</label>
    <input list="mon-hoc" name="fruit" id="fruit">
        <datalist id="mon-hoc">
           <option value="Toán">
           <option value="Lý">
           <option value="Hoá">
           <option value="Văn">
           <option value="Anh">
        </datalist>
     <input type="submit">
 </form>

Còn dưới đây là kết quả trên Codepen nha.

See the Pen the data-list HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thẻ mark

Thẻ mark giúp bạn có thẻ làm nổi bật nội dung mà chúng ta muốn hướng tới người dùng.

<p>Lorem ipsum dolor sit amet, <mark>consectetur adipiscing elit</mark>.

Còn dưới đây là kết quả trên Codepen nha.

See the Pen the mark HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thuộc Tính Content Editable

Thuộc Tính Content Editable giúp bạn có thể điều chỉnh nội dung cho các thành phần trong website như là div, p, ul...

<h2>  Sách Môn Học(Content Editable) </h2>
 <ul class="content-editable" contenteditable="true">
     <li> 1. Toán </li>
     <li> 2. Lý </li>
     <li> 3. Hoá </li>
</ul>

Và dưới đây là video kết quả nhé!

Còn dưới đây là kết quả trên Codepen nha.

See the Pen by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thuộc Tính required

Thuộc Tính required giúp bạn bắt buộc người dùng phải nhập thông tin trước khi gửi biểu mẫu.

<form method="post">
   <input type="text" id="ho_ten" name="ho_ten" placeholder="Họ Và Tên" required>
    <input type="submit">
</form>

Và dưới đây là video kết quả nhé!

Còn dưới đây là kết quả trên Codepen nha.

See the Pen thuoc tinh required HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thuộc Tính pattern

Thuộc Tính pattern giúp bạn có thể thiết lập regex để validate cho các ô input ở trong website.

<form method="post">
    <input type="password"
              name="password"
              id="password"
              placeholder="Phải Từ 6-20 ký tự và ít nhất 1 con số, 1 chữ in hoa và 1 chữ in thường."
            pattern="^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
     <input type="submit">
 </form>

Còn dưới đây là kết quả trên Codepen nha.

See the Pen thuoc tinh pattern HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn các thẻ HTML hữu ích cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!