Thứ Ba, 13 tháng 5, 2025

html

 

HTML là gì?

HTML là viết tắt của từ Hyper Text Markup Language, có nghĩa là ngôn ngữ đánh dấu siêu văn bản. HTML được sử dụng để định dạng và hiển thị văn bản trên trình duyệt tới người sử dụng. Nó là xương sống của một trang web.

Một tài liệu HTML chưa nhiều thẻ HTML và mỗi thẻ HTML chứa các nội dung khác nhau.

Ví dụ, một trang web chuẩn thì có chứa các thẻ HTML như sau:

?
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE> 
<html>
    <head>
     <!--
  Thông tin cơ bản của trang web
  và các liên kết đến css, javascript
  -->
    </head>
    <body>
        <!-- Nội dung trang web -->
    </body> 
</html>

Trong đó, thẻ <head> chứa thông tin được ẩn (không hiển thị lên trình duyệt) bao gồm thông tin cơ bản và các liên kết đến file css, javascript, ... Còn thẻ <body> chưa thông tin bạn muốn hiển thị lên trình duyệt.

Các thẻ trong HTML

Thẻ HTML chứa ba phần chính: thẻ mở, nội dung và thẻ đóng. Nhưng một số thẻ HTML là các thẻ mở (không cần đóng thẻ).

Khi một trình duyệt đọc một tài liệu HTML, trình duyệt đọc nó từ trên xuống dưới và từ trái sang phải. Các thẻ HTML được sử dụng để tạo các tài liệu HTML và hiển thị thuộc tính của chúng. Mỗi thẻ HTML có các thuộc tính khác nhau.

Cú pháp

?
1
<thẻ> Nội dung </thẻ>

Dưới đây là các nhóm thẻ trong HTML.

Các thẻ HTML mở

Có một vài thẻ trong HTML không cần phải đóng, ví dụ thẻ xuống dòng br và dòng kẻ ngang hr.

Thẻ <br>: là thẻ xuống dòng

Thẻ <hr>: là thẻ dòng kẻ ngang

Các thẻ HTML Meta

DOCTYPE, title, link, meta và style

Thẻ HTML văn bản

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

Các thẻ HTML liên kết

<a> và <base>

Các thẻ HTML ảnh và đối tượng

<img>, <area>, <map>, <param> và <object>

Các thẻ HTML table

table, tr, td, th, tbody, thead, tfoot, col, colgroup và caption.

Các thẻ HTML form

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

Các thẻ HTML Scripting

script và noscript

Định dạng trong HTML

Định dạng HTML là một quá trình định dạng văn bản để có giao diện trông đẹp mắt hơn. Có nhiều thẻ định dạng trong HTML. Các thẻ này được sử dụng để làm cho văn bản đậm, nghiêng hoặc gạch chân. Có 12 lựa chọn định dạng văn bản có sẵn trong HTML.

1. Chữ đậm trong HTML

Sử dụng thẻ <b>............</b> để hiển thị chữ đậm. Ví dụ:

?
1
<p><b> Đây là đoạn văn có chữ đậm.</b></p>

Output:

 Đây là đoạn văn có chữ đậm.

2. Chữ nghiêng trong HTML

Sử dụng thẻ <i>............</i> để hiển thị chữ nghiêng. Ví dụ:

?
1
<p><b> Đây là đoạn văn có chữ nghiêng.</b></p>  

Output:

 Đây là đoạn văn có chữ nghiêng.

3. Chữ bị ngạch chân trong HTML

Sử dụng thẻ <u>............</u> để hiển thị chữ bị ngạch chân. Ví dụ:

?
1
<p> <u> Đây là đoạn văn có chữ bị ngạch chân.</u></p>

Output:

 Đây là đoạn văn có chữ bị ngạch chân.

4. Đánh dấu văn bản trong HTML

Sử dụng thẻ <mark>............</mark> để đánh dấu văn bản. Ví dụ:

?
1
<p>Đánh dấu chữ <mark> Test </mark> </p>

Output:

Đánh dấu chữ  Test

5. Chữ bị kẻ ngang trong HTML

Sử dụng thẻ <strike>............</strike> để hiển thị chữ bị kẻ ngang. Ví dụ:

?
1
<p><strike> Đây là đoạn văn có chữ bị kẻ ngang.</strike></p>

Output:

 Đây là đoạn văn có chữ bị kẻ ngang.

6. Chữ đơn cách.

Sử dụng thẻ <tt>............</tt> để hiển thị từng ký tự trong văn bản với độ rộng bằng nhau.

?
1
<p>Hello <tt> Các ký tự có độ rộng bằng nhau. </tt></p>

Output:

Hello  Các ký tự có độ rộng bằng nhau.

7. Hiển thị văn bản bên trên văn bản khác.

Sử dụng thẻ <sup>............</sup> để hiển thị văn bản bên trên một văn bản khác. Ví dụ:

?
1
<p>2<sup>3 </sup> = 8</p>

Output:

23  = 8

8. Hiển thị văn bản bên dưới văn bản khác.

Sử dụng thẻ <sub>............</sub> để hiển thị văn bản bên dưới một văn bản khác. Ví dụ:

?
1
<p>Hello <sub> chữ bên dưới </sub></p>

Output:

Hello  chữ bên dưới

9. Chữ bị xóa trong HTML

Sử dụng thẻ <del>............</del> để hiển thị chữ bị xóa. Ví dụ:

?
1
<p>Hello <del> Đây là chữ đã bị xóa.</del></p>  

Output:

Hello  Đây là chữ đã bị xóa.

10. Chèn chữ trong HTML

Sử dụng thẻ <ins>............</ins> để hiển thị chữ được chèn vào. Ví dụ:

?
1
<p><del> Chữ bị xóa </del> <ins> Đây là chữ được chèn vào.</ins></p>  

Output:

 Chữ bị xóa   Đây là chữ được chèn vào.

11. Chữ to trong HTML

Sử dụng thẻ <big>............</big> để hiển thị chữ to hơn. Ví dụ:

?
1
<p>Hello <big> Chữ to hơn. </big></p>  

Output:

Hello  Chữ to hơn.

12. Chữ nhỏ trong HTML

Sử dụng thẻ <small>............</small> để hiển thị chữ nhỏ hơn. Ví dụ:

?
1
<p>Hello <small> Chữ nhỏ hơn. </small></p>  

Output:

Hello  Chữ nhỏ hơn.

Tiêu đề trong HTML

Tiêu đề trong HTML hoặc thẻ h trong HTML có thể được định nghĩa là tiêu đề hoặc phụ đề mà bạn muốn hiển thị trên trang web. Khi bạn đặt văn bản trong thẻ tiêu đề <h1>.........</h1>, nó được hiển thị trên trình duyệt có dạng đậm và kích thước của văn bản phụ thuộc vào số của thẻ tiêu đề như h1, h2, h3, h4, h5, h6.

Có 6 thẻ tiêu đề HTML khác nhau được định nghĩa bằng các thẻ

đến

H1 là nhãn tiêu đề lớn nhất và h6 là loại nhỏ nhất. Vì vậy, h1 được sử dụng cho tiêu đề chính của trang web và h6 được sử dụng ít quan trọng nhất.

Ví dụ:

?
1
2
3
4
5
6
<h1>Tiêu đề số 1</h1> 
<h2>Tiêu đề số 2</h2> 
<h3>Tiêu đề số 3</h3> 
<h4>Tiêu đề số 4</h4> 
<h5>Tiêu đề số 5</h5> 
<h6>Tiêu đề số 6</h6> 

Output:

Tiêu đề số 1
  

Tiêu đề số 2
  

Tiêu đề số 3
  

Tiêu đề số 4
  

Tiêu đề số 5
  

Tiêu đề số 6

Đoạn văn trong HTML

Đoạn văn trong HTML hoặc thẻ p trong HTML được sử dụng để xác định một đoạn trong một trang web. Khi sử dụng thẻ p trình duyệt tự thêm một dòng rỗng trước và sau một đoạn văn.

Ví dụ:

?
1
2
3
<p> Đây là đoạn đầu tiên. </p>
<p> Đây là đoạn thứ hai. </p>
<p> Đây là đoạn thứ ba. </p>

Liên kết trong HTML

Thẻ liên kết trong HTML hay thẻ anchor <a> trong HTML định nghĩa một liên kết được sử dụng để liên kết một trang với một trang khác. Thuộc tính "href" là thuộc tính quan trọng nhất của thẻ HTML.

Thuộc tính href của thẻ <a> trong HTML

Thuộc tính href được sử dụng để xác định địa chỉ của tệp được liên kết. Nói cách khác, nó chỉ ra trang đích. Cú pháp:

?
1
<a href = "..........."> Văn bản liên Kết </a>

Ảnh trong HTML

Thẻ img trong HTML được sử dụng để hiển thị hình ảnh trên trang web. Thẻ img là một thẻ trống chỉ chứa các thuộc tính và không có thẻ đóng.

Ví dụ 1:

?
1
2
<h2>Hiển thị ảnh trong HTML</h2> 
<img src="/images/html/good-morning.jpg" alt="Good Morning!"/>

ảnh không tồn tại, khi đường dẫn ảnh không tồn tại trình duyệt sẽ hiển thị văn bản được định nghĩa trong thuộc tính alt

1. Thuộc tính src

Đây là một thuộc tính cần thiết mô tả nguồn hoặc đường dẫn của hình ảnh. Nó chỉ thị trình duyệt nơi để tìm kiếm hình ảnh trên máy chủ.

Vị trí của hình ảnh có thể nằm trên cùng một thư mục hoặc máy chủ khác.

2. Thuộc tính alt

Thuộc tính alt xác định một văn bản thay thế cho hình ảnh, nếu nó không thể được hiển thị. Giá trị của thuộc tính alt mô tả hình ảnh bằng văn bản. Thuộc tính alt sử dụng có lợi cho SEO.

Table trong HTML

Thẻ table trong HTML được sử dụng để hiển thị dữ liệu ở dạng bảng (hàng * cột). Có thể có nhiều cột trong một hàng.

Các thẻ table trong HTML được sử dụng để quản lý việc bố cục trang web. Ví dụ: Phần tiêu đề, thanh điều hướng, nội dung trang, phần chân trang... Nhưng bạn nên sử dụng thẻ div thay vì table để quản lý bố cục của trang.

Các thẻ định nghĩa bảng trong HTML

ThẻMô tả
<table>Định nghĩa bảng.
<tr>Định nghĩa một hàng trong một bảng.
<th>Định nghĩa phần header (dòng đầu tiên) của bảng.
<td>Định nghĩa 1 ô của bảng.
<caption>Định nghĩa phụ đề bảng.
<colgroup>Chỉ định một nhóm của một hoặc nhiều cột trong một bảng để định dạng.
<col>Được sử dụng với thẻ <colgroup> để chỉ định thuộc tính cột cho mỗi cột.
<tbody>Được sử dụng để nhóm nội dung body trong một bảng.
<thead>Được sử dụng để nhóm nội dung header trong một bảng.
<tfooter>Được sử dụng để nhóm nội dung footer trong một bảng.

Thuộc tính border của bảng trong HTML

Có hai cách để xác định border cho các bảng trong HTML.

  1. Sử dụng thuộc tính border của bảng trong HTML.
  2. Sử dụng thuộc tính border trong CSS.

1. Sử dụng thuộc tính border của bảng trong HTML

Bạn có thể sử dụng thuộc tính border của thẻ table trong HTML để chỉ định đường viền. Nhưng bạn không nên sử dụng cách này.

Ví dụ:

?
1
2
3
4
5
6
7
<table border="1"> 
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> 
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> 
<tr><td>James</td><td>William</td><td>80</td></tr> 
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr> 
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr> 
</table> 

Output:

First_NameLast_NameMarks
SonooJaiswal60
JamesWilliam80
SwatiSironi82
ChetnaSingh72

2. Sử dụng thuộc tính border trong CSS

Bạn nên sử dụng thuộc tính border của CSS để chỉ định đường viền của bảng.

Ví dụ:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<!-- Sử dụng thuộc tính border bằng CSS -->
<style type="text/css">
table, th, td { 
    border: 1px solid red;
    border-collapse: collapse;
}
</style>
</head>
<body>
 <table> 
 <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> 
 <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> 
 <tr><td>James</td><td>William</td><td>80</td></tr> 
 <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> 
 <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> 
 </table> 
</body>
</html>

Output:

table trong html 2

Table trong HTML với cell padding

Bạn có thể chỉ định padding cho tiêu đề của bảng và data của bảng bằng hai cách:

  1. Bằng thuộc tính cellpadding của thẻ table trong HTML
  2. Bằng tính chất padding trong CSS

Bạn nên sử dụng tính chất của CSS thay vì thuộc tính của thẻ trong HTML, dưới đây là ví dụ chỉ định padding cho tiêu đề và nội dung của bẳng bằng CSS.

?
1
2
3
4
5
6
7
8
9
<style> 
table, th, td { 
    border: 1px solid pink; 
    border-collapse: collapse; 
} 
th, td { 
    padding: 10px; 
} 
</style>

Output:

table trong html 3

Thuộc tính colspan

Nếu bạn muốn tạo một ô có độ dài lơn hơn 1 cột, thì bạn có thể dùng thuộc tính colspan. Ví dụ:

Code css:

?
1
2
3
4
5
6
7
8
9
<style> 
table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 
th, td { 
    padding: 5px; 
} 
</style>

Code html:

?
1
2
3
4
5
6
7
8
9
10
11
<table style="width:100%"> 
  <tr> 
    <th>Name</th> 
    <th colspan="2">Mobile No.</th> 
  </tr> 
  <tr> 
    <td>Ajeet Maurya</td> 
    <td>7503520801</td> 
    <td>9555879135</td> 
  </tr> 
</table> 

Output:

table-trong-html-thuoc-tinh-colspan

Thuộc tính rowspan

Nếu bạn muốn tạo một ô có độ dài lơn hơn hàng, thì bạn có thể dùng thuộc tính rowspan. Ví dụ:

Code css:

?
1
2
3
4
5
6
7
8
9
<style> 
table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 
th, td { 
    padding: 10px; 
} 
</style> 

Code html:

?
1
2
3
4
5
6
7
8
9
10
11
<table style="width:100%"> 
  <tr> 
    <th>Name</th> 
    <th colspan="2">Mobile No.</th> 
  </tr> 
  <tr> 
    <td>Ajeet Maurya</td> 
    <td>7503520801</td> 
    <td>9555879135</td> 
  </tr> 
</table> 

Output:

table-trong-html-thuoc-tinh-rowspan

Thẻ caption

Thẻ caption được sử dụng để định nghĩa bảng, thẻ này chỉ được sử dụng ngay sau thẻ table. Ví dụ:

?
1
2
3
4
5
6
7
8
<table> 
<caption>Student Records</caption> 
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> 
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> 
<tr><td>Mike</td><td>Warn</td><td>60</td></tr> 
<tr><td>Shane</td><td>Warn</td><td>42</td></tr> 
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> 
</table>   

Output:

table-trong-html-the-caption

Tạo style cho ô chẵn, lẻ

Code css:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style> 
table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 
th, td { 
    padding: 10px; 
} 
table#alter tr:nth-child(even) { 
    background-color: #eee; 
} 
table#alter tr:nth-child(odd) { 
    background-color: #fff; 
} 
table#alter th { 
    color: white; 
    background-color: gray; 
} 
</style> 

Output:

table-trong-html-style-chan-le

Danh sách trong HTML

Danh sách trong HTML được sử dụng để hiển thị danh sách thông tin. Có ba loại khác nhau của danh sách HTML:

  1. Danh sách có thứ tự hay danh sách có đánh số (ol)
  2. Danh sách không có thứ tự (ul)
  3. Danh sách mô tả (dl)

Danh sách có thứ tự hay danh sách có đánh số (ol)

Trong các danh sách HTML có thứ tự, tất cả các mục danh sách được đánh dấu bằng các con số tăng dần. Danh sách có thứ tự bắt đầu với thẻ <ol> và các mục danh sách bắt đầu bằng thẻ <li>.

Ví dụ:

?
1
2
3
4
5
6
<ol> 
 <li>Aries</li> 
 <li>Bingo</li> 
 <li>Leo</li> 
 <li>Oracle</li> 
</ol> 

Kết quả:

  1. Aries
  2. Bingo
  3. Leo
  4. Oracle

Danh sách không có thứ tự (ul)

Trong các danh sách HTML không có thứ tự, tất cả các mục danh sách được đánh dấu bằng các dấu chấm tròn. Danh sách không có thứ tự bắt đầu với thẻ <ul> và các mục danh sách bắt đầu bằng thẻ <li>.

Ví dụ:

?
1
2
3
4
5
6
<ul> 
 <li>Aries</li> 
 <li>Bingo</li> 
 <li>Leo</li> 
 <li>Oracle</li> 
</ul> 

Kết quả:

  • Aries
  • Bingo
  • Leo
  • Oracle

Danh sách mô tả (dl)

Danh sách mô tả HTML cũng là một kiểu danh sách được hỗ trợ bởi HTML và XHTML. Nó còn được gọi là danh sách định nghĩa, nơi các mục được liệt kê như một từ điển.

Danh sách định nghĩa là rất thích hợp khi bạn muốn trình bày bảng thuật ngữ, danh sách các điều khoản hoặc danh sách giá trị tên khác.

Danh sách định nghĩa HTML bao gồm ba thẻ sau:

  1. Thẻ <dl> là thẻ bắt đầu của danh sách mô tả.
  2. Thẻ <dt> định nghĩa một thuật ngữ.
  3. Thẻ <dd> định nghĩa mô tả.
?
1
2
3
4
5
6
7
8
9
10
<dl> 
  <dt> Bạch Dương </dt> 
  <dd> - Một trong 12 cung tử vi. </dd> 
  <dt> Bingo </dt> 
  <dd> - Là một món ăn </dd> 
  <dt> Leo </dt> 
  <dd> - Là một trong 12 cung tử vi. </dd> 
  <dt> Oracle </dt> 
  <dd> - Là một tập đoàn công nghệ đa quốc gia. </dd>  
</dl> 

Kết quả:

Bạch Dương
- Một trong 12 cung tử vi.
Bingo
Là một món ăn
Leo
- Là một trong 12 cung tử vi.
Oracle
- Là một tập đoàn công nghệ đa quốc gia.

HTML Form là gì?

Một HTML Form là một phần của trang web có chứa các điều khiển như các trường văn bản, các trường mật khẩu, các checkbox, các radio button, submit button, các menu...

HTML Form là phương tiện cho người dùng nhập dữ liệu được gửi đến máy chủ để xử lý.

Tại sao sử dụng HTML Form

HTML Form được sử dụng khi bạn muốn thu thập một số dữ liệu của người truy cập trang web.

Ví dụ: Nếu người dùng muốn mua một số mặt hàng trên online, họ phải điền vào form các thông tin như địa chỉ giao hàng và chi tiết thẻ tín dụng / thẻ ghi nợ để có thể gửi hàng đến địa chỉ đó.

Khai báo HTML Form

?
1
2
3
4
<form action="server url" method="get|post"> 
  //input controls ví dụ: textfield, textarea, radiobutton, button
</form>

Các thẻ HTML sử dụng trong Form

Bảng sau thể hiện danh sách các thẻ HTML hay được sử dụng trong form.

ThẻMô tả
<form>Định nghĩa một HTML Form để nhập liệu từ phía người dùng.
<input>Định nghĩa một điền khiển nhập liệu dự vào thuộc tính type của nó.
<textarea>Định nghĩa ô nhập văn bản có thể nhập nhiều dòng.
<label>Định nghĩa nhãn cho các input.
<fieldset>Nhóm các phần tử liên quan.
<legend>Định nghĩa mô tả cho thẻ <fieldset>.
<select>Định nghĩa một danh sách drop-down.
<optgroup>Định nghĩa một nhóm các tùy chọn liên quan thành một danh sách drop-down.
<option>Định nghĩa một option trong một danh sách drop-down.
<button>Định nghĩa một nút có thể click.

Trường HTML TextField trong form

Thuộc tính type="text" của thẻ input tạo ra một textfield là trường nhập văn bản trong một dòng. Thuộc tính name là tùy chọn, nhưng nó là bắt buộc khi phía server là JSP, ASP, PHP...

?
1
2
3
4
5
<form> 
  First Name: <input type="text" name="firstname"/> <br/> 
  Last Name:  <input type="text" name="lastname"/> <br/> 
</form>

✨ Giải thích từng phần:

html
<form>
  First Name: <input type="text" name="firstname" /> <br />
  Last Name:  <input type="text" name="lastname" /> <br />
</form>

1. <form> ... </form> — Thẻ tạo biểu mẫu (form)

  • Đây là nơi bạn đặt các ô nhập liệu, nút gửi,... để người dùng nhập thông tin.

  • Thường dùng trong các trang web có đăng ký, đăng nhập, liên hệ,...

2. <input> — Thẻ tạo ô nhập liệu

  • Đây là thẻ dùng để hiển thị các trường cho người dùng gõ dữ liệu vào.

3. type="text" — Loại ô nhập liệu là văn bản

  • type="text" nghĩa là ô nhập này cho phép người dùng gõ chữ, số,... tùy ý.

  • Ví dụ: gõ tên, địa chỉ,...

Có nhiều loại type khác nhau:

LoạiÝ nghĩa
textNhập văn bản
passwordNhập mật khẩu (ẩn ký tự)
emailNhập email (có kiểm tra định dạng)
numberNhập số
checkboxHộp chọn
radioNút chọn một trong nhiều

4. name="firstname" — Tên trường

  • name là tên định danh cho ô nhập liệu.

  • Khi form được gửi, dữ liệu trong ô sẽ được gán với tên này.

  • Ví dụ: nếu người dùng gõ "An" vào ô firstname, khi gửi form sẽ gửi dữ liệu như:

    txt
    firstname=An

Tương tự, nếu gõ "Nguyen" vào lastname, sẽ gửi:

txt
lastname=Nguyen

5. <br /> — Xuống dòng

  • Đây là thẻ để xuống dòng trong HTML (giống như bạn nhấn Enter).

  • Không phải là phần của form, chỉ giúp hiển thị dễ nhìn hơn.

📌 Tóm lại

PhầnÝ nghĩa
<form>Mở form nhập liệu
<input>Ô để người dùng gõ dữ liệu
type="text"Ô này là để gõ chữ
name="..."Tên của ô nhập, dùng để lấy dữ liệu
<br />Xuống dòng để hiển thị đẹp hơn

Nếu bạn muốn mình giải thích bằng ví dụ có hình ảnh hoặc bạn muốn thêm nút "Gửi", mình có thể giúp bạn mở rộng đoạn mã nhé.

Bạn đã nói:
nếu tôi sửa Firstname : <input type = "tessssss" name ="Firstnam"/> <br/> chuyện gì sẽ xảy ra
ChatGPT đã nói:

Câu hỏi rất hay! Khi bạn sửa dòng này:

html
First Name: <input type="tessssss" name="Firstnam" /> <br />

và cụ thể sai ở phần type="tessssss", thì trình duyệt sẽ xử lý thế nào?

✅ Kết quả: Trình duyệt sẽ mặc định thành type="text"

Giải thích:

HTML quy định chỉ có một số giá trị hợp lệ cho thuộc tính type (như text, email, number, password, v.v.).

Nếu bạn viết sai, ví dụ như type="tessssss" — thì đây không phải giá trị hợp lệ, nên trình duyệt sẽ:

❗ Mặc định coi đây là type="text"

🧪 Ví dụ

Mã HTML:

html
First Name: <input type="tessssss" name="Firstnam" /> <br />

Hiển thị trên trình duyệt:

Sẽ giống như:

html
First Name: <input type="text" name="Firstnam" /> <br />

👉 Bạn vẫn thấy một ô nhập văn bản bình thường, và vẫn gõ được chữ vào như thường.

🔍 Thực tế dùng để làm gì?

Thỉnh thoảng người lập trình có thể gõ sai type, nhưng vì trình duyệt "bao dung", nó vẫn hiển thị ô nhập văn bản (text) nên trang không bị hỏng hoàn toàn.

Tuy nhiên, không nên để sai như vậy vì:

  • Làm mã HTML không đúng chuẩn.

  • Gây khó hiểu cho người khác đọc mã.

  • Một số trình duyệt nghiêm ngặt có thể cảnh báo lỗi.

✅ Kết luận

Sai cú phápTrình duyệt sẽ làm gì
type="tessssss"Mặc định là type="text"


Thẻ lable trong form

Đây được xem là một cách tốt hơn để hiển thị nhãn trong form. Vì nó tạo được trải nghiệm thân thiện hơn cho người dùng/trình duyệt/bộ phân tích mã nguồn.

Khi bạn click vào thẻ label, nó sẽ focus vào ô nhập text tương ứng. Để làm được như vậy, bạn cần có thuộc tính for trong thẻ label phải giống với thuộc tính id trong thẻ input.

?
1
2
3
4
5
6
7
<form> 
  <label for="firstname">First Name: </label> 
  <input type="text" id="firstname" name="firstname"/> <br/> 
  <label for="lastname">Last Name: </label> 
  <input type="text" id="lastname" name="lastname"/> <br/> 
</form>

✅ 1. type= là gì?

➤ Nằm trong thẻ <input>

html
<input type="text" />

🔍 Nghĩa là: Loại dữ liệu mà ô nhập liệu (input) cho phép người dùng nhập vào.

Một số giá trị phổ biến của type:

type=Ý nghĩaVí dụ
textNhập văn bảnTên, địa chỉ, v.v.
passwordNhập mật khẩu (ẩn ký tự)********
emailNhập email (có kiểm tra định dạng)abc@gmail.com
numberNhập số1, 2, 3
checkboxHộp chọn☑
radioNút chọn một trong nhiều○
submitNút gửi form🔘 Gửi
buttonNút bấm (tự xử lý bằng JS)🔘 Click

👉 type giúp trình duyệt hiểu đây là kiểu ô gì để xử lý đúng.

✅ 2. for= là gì?

➤ Nằm trong thẻ <label>

html
<label for="firstname">First Name:</label>
<input id="firstname" type="text" />

🔍 Nghĩa là: Thẻ label này gắn với ô nhập liệu có id tương ứng.

  • for="firstname" nói rằng: “Tôi là nhãn cho cái ô có id="firstname"”

  • Nhờ đó, khi bạn bấm vào chữ "First Name:", trình duyệt sẽ tự động chọn ô nhập tương ứng.

🔁 So sánh nhanh:

Thuộc tínhNằm ở đâu?Dùng để làm gì?
typeTrong thẻ <input>Chỉ định loại ô nhập
forTrong thẻ <label>Gắn nhãn với ô nhập tương ứng (qua id)


🧩 Câu hỏi 1: id là gì?

Trong HTML, id là một định danh duy nhất cho một phần tử (element) trong trang.

html
<input type="text" id="firstname" name="firstname"/>

  • Ở đây, id="firstname" có nghĩa là ô input này được gắn nhãn là "firstname", để các phần khác có thể tham chiếu đến nó.

  • Mỗi id phải là duy nhất trong một trang HTML.

🧩 Câu hỏi 2: Thẻ <label> dùng để làm gì?

Thẻ <label> được dùng để gắn nhãn cho ô nhập liệu, giúp:

  • Người dùng biết rõ họ đang nhập cái gì.

  • Trình duyệt hiểu được mối quan hệ giữa text nhãn và ô nhập liệu.

  • Cải thiện truy cập cho người khiếm thị (vì phần mềm đọc màn hình sẽ hiểu rõ).

Cách sử dụng đúng:

html
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname"/>

Ở đây:

  • for="firstname" trong label trỏ tới id="firstname" của input.

  • Tức là: "Nhãn này dành cho ô có id là firstname".

👉 Khi bạn bấm vào chữ "First Name:", trình duyệt sẽ tự động chọn ô nhập tương ứng! (Hãy thử nhé!)

🔍 So sánh có và không có <label>

MụcKhông có <label>Có <label>
Ví dụFirst Name: <input ... /><label for="...">First Name:</label> <input id="..." />
Hiển thịCó thể giống nhau (chỉ là text kèm input)Gắn nhãn đúng chuẩn
Truy cậpKhông thân thiện cho người dùng khiếm thịTốt hơn cho phần mềm đọc màn hình
Trải nghiệm người dùngBấm vào chữ không chọn được inputBấm vào chữ sẽ chọn được input
Thực hành tốt❌ Không khuyến khích✅ Nên dùng

✅ Kết luận

  • id là cách đặt tên duy nhất cho một phần tử, để dùng cho mục đích tham chiếu.

  • <label> với for="id" giúp gắn nhãn cho input, thân thiện hơn với người dùng và phần mềm.

  • Dù không dùng label vẫn hoạt động, nhưng nếu bạn làm form đúng chuẩn, thì nên dùng label + id.

Trường HTML Password trong form

Password sẽ không được hiện thị trong trường password.

?
1
2
3
4
5
<form> 
  <label for="password">Password: </label> 
  <input type="password" id="password" name="password"/> <br/> 
</form>

Trường HTML 5 Email trong form

Trường email là một trường mới trong HTML 5. Nó sẽ kiểm tra tính hợp lệ của một địa chỉ email. Bạn phải sử dụng @ và dấu chấm (.) bên trong trường này.

?
1
2
3
4
5
<form> 
  <label for="email">Email: </label> 
  <input type="email" id="email" name="email"/> <br/> 
</form>

Radio Button trong form

Radio button được sử dụng để chọn chỉ một trong nhiều lựa chọn. Nó được sử dụng để lựu chọn giới tính, câu hỏi trắc nghiệm...

Sử dụng name giống nhau cho tất cả các radio button, thì chỉ duy nhất một radio button được chọn tại một thời điểm.

?
1
2
3
4
5
6
<form> 
  <label for="gender">Gender: </label> 
  <input type="radio" id="gender" name="gender" value="male"/>Male 
  <input type="radio" id="gender" name="gender" value="female"/>Female <br/> 
</form>

Checkbox trong form

Checkbox được sử dụng để có thể chọn nhiều lựa chọn từ các checkbox đã cho.

?
1
2
3
4
5
6
7
8
9
10
<form>
  Sở thích:<br>
  <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
  <label for="cricket">Cricket</label>
  <input type="checkbox" id="football" name="football" value="football"/>
  <label for="football">Football</label>
  <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
  <label for="hockey">Hockey</label>
</form>

Ví dụ về HTML Form

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<form action="#">
  <table>
    <tr>
      <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>
      <td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>
    </tr>
    <tr>
      <td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>
      <td><input type="password" name="password" id="register_password" style="width:160px"/></td>
    </tr>
    <tr>
      <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
      <td><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>
    </tr>
    <tr>
      <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>
      <td>
        <input type="radio" name="gender" id="register_gendermale" value="male"/>
        <label for="register_gendermale">male</label>
        <input type="radio" name="gender" id="register_genderfemale" value="female"/>
        <label for="register_genderfemale">female</label>
      </td>
    </tr>
    <tr>
      <td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>
      <td>
        <select name="country" id="register_country" style="width:160px">
          <option value="india">india</option>
          <option value="pakistan">pakistan</option>
          <option value="africa">africa</option>
          <option value="china">china</option>
          <option value="other">other</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <div align="right"><input type="submit" id="register_0" value="register"/>
        </div>
      </td>
    </tr>
  </table>
</form>

Kêt quả:

form trong html

✅ Câu hỏi: value= có nghĩa là gì?

➤ Trong HTML form, value nghĩa là:

Giá trị thật sự được gửi đi (gửi lên server) khi người dùng chọn hoặc nhập vào ô đó.

📌 Ví dụ bạn đưa ra:

html
<form>
  <label for="gender">Gender: </label>
  <input type="radio" id="gender" name="gender" value="male" /> Male
  <input type="radio" id="gender" name="gender" value="female" /> Female <br />
</form>

Giải thích từng phần:

Thành phầnGiải thích
type="radio"Là nút chọn (radio button), người dùng chỉ chọn được 1 trong nhiều lựa chọn
name="gender"Tên nhóm lựa chọn (cả 2 nút đều thuộc nhóm gender)
value="male"Nếu chọn ô này, giá trị "male" sẽ được gửi
value="female"Nếu chọn ô này, giá trị "female" sẽ được gửi

🧪 Ví dụ thực tế:

Giả sử người dùng chọn "Female", sau đó form được gửi đi (submit), thì dữ liệu sẽ như sau:

ini
gender=female

Nếu người dùng chọn "Male", thì:

ini
gender=male

📦 value còn dùng ở đâu?

Ô nhập liệuVí dụÝ nghĩa
radiovalue="male"Giá trị khi người dùng chọn
checkboxvalue="agree"Gửi nếu ô được chọn
input type="text"value="John"Nội dung ban đầu hiển thị trong ô
submitvalue="Send"Dòng chữ trên nút gửi

✅ Kết luận

Thuộc tínhDùng để làm gì
valueChỉ định giá trị sẽ được gửi nếu người dùng chọn/nhập vào ô đó


1. class="..." là gì?

  • class dùng để gán tên lớp (nhóm) cho phần tử HTML.

  • Mục đích chính: để CSS hoặc JavaScript áp dụng kiểu hoặc hành động cho những phần tử thuộc cùng class.

Ví dụ:

html
<td class="tdLabel">...</td>

  • Nghĩa là ô <td> này thuộc lớp tdLabel, có thể được CSS tô màu, định dạng riêng.

🔍 2. style="..." là gì?

  • style là nơi bạn viết CSS trực tiếp trong thẻ HTML.

  • Nó điều khiển cách hiển thị của phần tử đó (màu sắc, kích thước, căn lề,...)

Ví dụ:

html
<input type="text" style="width:160px" />

  • Nghĩa là ô nhập này có chiều rộng 160px (pixel).

🔍 3. colspan="2" là gì?

  • Dùng trong thẻ <td> hoặc <th> để gộp nhiều cột thành một trong bảng (<table>).

Ví dụ:

html
<td colspan="2">Nội dung</td>

  • Nghĩa là ô này sẽ chiếm 2 cột liền kề, thay vì chỉ 1 cột như mặc định.


✅ Chọn quốc gia:

html
<select name="country">
  <option value="india">India</option>
</select>

  • select là danh sách chọn.

  • option là từng lựa chọn bên trong.

HTML Style

Thuộc tính style trong HTML được sử dụng để thay đổi hoặc thêm kiểu cách (style) cho các thành phần HTML đang tồn tại. Có các style mặc định cho các thành phần HTML như màu nền là trắng, văn bản là đen...

Thuộc tính style có thể áp dụng cho bất kỳ thẻ HTML nào. Để áp dụng style trên thẻ HTML, bạn cần có kiến thức cơ bản về các property của css như color, background-color, text-align, font-family, font-size...

Cú pháp của thuộc tính style

?
1
style = "property:value"

color của HTML Style

Đặc tính color được sử dụng để định nghĩa màu văn bản.

Ví dụ về color

?
1
2
<h3 style="color:green">This is Green Color</h3> 
<h3 style="color:red">This is Red Color</h3> 

Kết quả:

This is Green Color

This is Red Color

background-color của HTML Style

Đặc tính background-color được sử dụng để định nghĩa màu nền cho các thẻ HTML.

Ví dụ về background-color

?
1
2
<h3 style="background-color:yellow;">This is yellow background</h3> 
<h3 style="background-color:red;color:white">This is red background</h3> 

Kết quả:

This is yellow background

This is red background

font-family của HTML Style

Đặc tính font-family được sử dụng để chỉ định font chữ cho các thẻ HTML.

Ví dụ về font-family

?
1
2
<p style="font-family:times new roman">This is times new roman font family</p> 
<p style="font-family:arial">This is arial font family</p> 

Kết quả:

This is times new roman font family

This is arial font family

font-size của HTML Style

Đặc tính font-size được sử dụng để định nghĩa kích thước của văn bản của các thẻ HTML.

Ví dụ về font-size

?
1
2
3
<h3 style="font-size:200%">This is 200% h3 tag</h3> 
<p style="font-size:200%">This is 200% p tag</p> 
<p style="font-size:20px">This is 16px p tag</p>

Kết quả:

This is 200% h3 tag

This is 200% p tag

This is 16px p tag

text-align của HTML Style

Đặc tính text-align được sử dụng để định nghĩa vị trí của văn bản cho các thẻ HTML. text-align có các giá trị là left, center, right.

Ví dụ về text-align

?
1
2
<h3 style="text-align:right;background-color:pink;">This text is located at right side</h3> 
<p style="text-align:center;background-color:pink;">This text is located at center side</p> 

Kết quả:

This text is located at right side

This text is located at center side

Chú ý: thẻ <center> không được hỗ trợ trong HTML5 mà chỉ được hỗ trợ trong các version trước của HTML.




vào lúc

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)