Ở bài trước chúng ta đã biết được các thẻ quan trọng và thường dùng trong HTML. Trong bài này các bạn sẽ nắm được những thuộc tính (attributes) chung và riêng có thể có của mỗi thẻ

1.Thuộc tính chung

1.1 ID:

Id (identifier) được sử dụng để đặt một định danh duy nhất cho 1 phần tử trên trang web, nghĩa là không thể có nhiều hơn 1 id trên 1 trang.

<p id="company">Công ty Bqsoft chuyên cung cấp giải pháp chuyển đổi số</p>
<p id="design-website">Thiết kế website tại công ty Bqsoft</p>

Trong ví dụ trên ta có 2 thẻ p có 2 id khác nhau, phải đảm bảo trên cùng 1 trang sẽ không có lặp lại 2 id như trên. Id này giúp chỉ định thẻ mà ta muốn CSS cho nó hoặc tương tác với thẻ đó bằng Javascript thông qua id.

Cần lưu ý sử dụng id khi cần thiết vì mã nguồn sẽ khó quản lý hơn và giảm tính linh hoạt. Thay vào đó ta có thể sử dụng class để làm định danh.

1.2 Class:

Cũng tương tự như id, class dùng để định danh 1 phần tử. Khác nhau là id thì duy nhất trên trang còn class thì có thể có nhiều, mỗi class sẽ cách nhau 1 khoảng trắng

<h2 class="programing programing-website">Lập trình website</h2>
<h2 class="programing programing-mobile">Lập trình mobile app</h2>

Mỗi thẻ h2 ở trên đều có 2 class, cả 2 thẻ đều có 1 class giống nhau là programing, sử dụng class giống nhau như vậy nhằm mục đích khi ta muốn CSS cho 2 thẻ cùng 1 style. Ví dụ:

.programing {
 font-size: 14px;
}

Lúc này cả 2 thẻ đều có font-size là 14px. Để nắm được CSS thì chúng ta sẽ học ở những bài sau.

Tiếp theo, ở mỗi thẻ cũng sẽ có class khác nhau là programing-website và programing-mobile nếu chúng ta muốn style riêng cho từng thẻ

.programing-website {
 color: red;
}

.programing-mobile {
 color: blue;
}

Như vậy mỗi thẻ sẽ có màu chữ khác nhau tương ứng với từng class chúng ta style ở trên.

1.3 Title

Thuộc tính title được thêm vào thẻ nhằm mục đích giúp người dùng hiểu rõ hơn về nội dung của phần tử đó

<h1 title="Nội dung của title nhằm chú thích cho người dùng hiểu hơn">Title sẽ hiển thị khi rê chuột vào thẻ này</h1>

Kết quả:

1.4 Các sự kiện (event) trên thẻ

Đây là các thuộc tính sự kiện được thêm vào thẻ khi chúng ta muốn người dùng tương tác với phần tử nào đó.

<p onclick="func1()">Sự kiện người dùng click vào thẻ</p>
<input type="text" onchange="func2()" />
<span onmousemove="func3()">Sự kiện khi người dùng rê chuột lên phần tử</span>

Xem đoạn code trên chúng ta thấy có 3 sự kiện được gán lên 3 thẻ khác nhau, với mỗi sự kiện sẽ thực hiện một chức năng khác nhau (chức năng này sẽ được nắm rõ ở những bài javascript sau) khi người dùng tương tác lên thẻ đó. Việc cho người dùng tương tác trực tiếp trên website giúp cho website sinh động hơn, giúp chúng ta có thể lấy được thông tin người dùng, ...

2.Thuộc tính riêng của từng thẻ

2.1 Thuộc tính src và alt của thẻ img

<img src="đường_dẫn_đến_file_ảnh" alt="Text hiển thị khi đường dẫn không đúng" />

• src: Đường dẫn đến file ảnh, có thể là file ảnh nằm trong source code hoặc từ nguồn bên ngoài
• alt: Text sẽ hiển thị khi đường dẫn không chính xác. Giúp người dùng không xem được ảnh vẫn hiểu nội dung của bức ảnh đó

2.2 Thuộc tính controls và audoplay của thẻ video

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

• width, height: Chỉ định độ dài rộng cho video
• controls: Dùng để cho toàn quyền điều khiển video
• Thẻ source phải nằm trong thẻ video để có thể chơi được video, có 2 thuộc tính quan trọng là src (đường dẫn đến video) và type (loại video)

2.3 Thẻ audio

Các thuộc tính cũng tương tự thẻ video, chỉ có khác là thay vì dùng thẻ video thì thay bằng thẻ audio

2.4 Thuộc tính href và target của thẻ a

<a href="https://bqsoft.vn" target="_self">Công ty bqsoft</a>

• href: link trỏ đến website
• target: giá trị là _self thì sẽ chuyến đến link đó ngay trên tab đang mở, nếu là _blank thì sẽ đến link đó trên tab mới khác

2.5 Thuộc tính action và method của thẻ form

<form method="POST" action="/view-detail.php>
 <input type="text" placeholder="Nhập tên" />
 <button>Gửi</button>
</form>

• method: Chỉ định phương thức HTTP khi biểu mẫu được gửi. Có 4 phương thức chủ yếu theo chuẩn REST API là : GET, POST, PUT, DELETE
• action: Chỉ định nơi gửi dữ liệu đến khi biểu mẫu được gửi

2.6 Thuộc tính type, name và value của input

<form>
 <input type="text" placeholder="Nhập tên" />
 <input type="password" placeholder="Nhập mật khẩu" />
 <input type="radio" name="gender" value="Nam" />
 <input type="radio" name="gender" value="Nữ" />
 <input type="checkbox" name="favorite" value="Ca hát" />
 <input type="checkbox" name="favorite" value="Đọc sách" />
 <input type="checkbox" name="favorite" value="Vui chơi" />
</form>

Trong ví dụ trên ta thấy có 4 loại input chính là input type = text, input type = password, radio button và checkbox. Với input type text được sử dụng khi muốn người dùng nhập những giá trị bình thường như tên, thông tin cá nhân, địa chỉ, .... Type bằng password thì dùng để nhập mật khẩu, lúc này chữ nhập vào sẽ bị ẩn đi và thay vào bằng dấu * để bảo mật. Type bằng radio khi chúng ta muốn đưa ra một danh sách các tuỳ chọn và chỉ cho phép người dùng chọn 1. Trong khi đó type bằng checkbox thì cũng tương tự type radio nhưng người dùng có thể chọn nhiều.

Thuộc tính name sẽ giúp phân biệt các input khác nhau khi sử dụng javascript để tương tác. Value chính là value hiện tại của input đó. Mặc định khi không truyền type vào input thì type sẽ là "text"

Còn nhiều input type khác như: date, color, button, email, time, file... Các bạn có thể tìm hiểu thêm ở những nguồn khác

2.7 Thuộc tính rows và cols của textarea

<textarea rows="4"></textarea>

• rows: Chỉ định số dòng hiển thị của textarea
• cols: Chỉ định độ rộng của textarea

2.8 Thuộc tính selected của thẻ con option trong thẻ select

<select name="select-number">
 <option value="1" selected>1</option>
 <option value="2" >2</option>
</select>

• Thuộc tính selected chỉ định field option nào sẽ được hiển thị

2.9 Thuộc tính type và disabled của button

<form method="POST">
 <input placeholder="Nhập tên" />
 <button type="submit">Click để gửi form</button>
</form>

• type: Thuộc tính type có 3 loại: submit, reset, button. Với type = submit, thì khi click button, form bao ngoài button sẽ được action (bắt buộc phải có thẻ form bao ngoài nếu dùng type = submit hoặc type = reset). Khi type = reset thì cũng tương tự type = submit nhưng thêm nữa là khi form đã thực hiện gửi data xong thì tất cả các field con nằm trong form sẽ có giá trị bằng với giá trị mặc định ban đầu, tức là value sẽ được reset. Với type = button thì không cần button đó phải nằm trong form, mà lúc này chúng ta có thể gán 1 sự kiện nào đó cho button, khi click button thì sự kiện đó sẽ được thực hiện.
• disalbed: Thuộc tính này vô hiệu hoá người dùng tương tác lên button (click, hover, ...)

2.10 Thuộc tính for của thẻ label

<input id="html" type="checkbox" />
<label for="html">HTML</label>

• for: Chỉ định input mà label này liên kết dựa trên id của input. Nghĩa là khi ta tương tác với label cũng là tương tác với input được liên kết đến

Như vậy chúng ta đã đề cập đến những thuộc tính của những thẻ thường dùng, hi vọng sẽ giúp ích cho những bạn mới bắt đầu học về Frontend nắm được và áp dụng vào dự án thực tế. Ở bài tiếp theo chúng ta sẽ bắt đầu học về CSS để có thể làm đẹp website hơn.