1. Giới thiệu

HTML Input Attributes là các thuộc tính được sử dụng với thẻ <input> để điều khiển và tùy chỉnh hành vi của các trường nhập liệu trong biểu mẫu. Các thuộc tính này cung cấp nhiều chức năng khác nhau, từ yêu cầu người dùng nhập dữ liệu đến việc tự động điền, giới hạn số lượng ký tự, và nhiều tính năng khác giúp tăng cường trải nghiệm người dùng cũng như đảm bảo dữ liệu được thu thập chính xác.

Trong bài viết này, chúng ta sẽ tìm hiểu về các thuộc tính phổ biến được sử dụng với HTML Input và cách sử dụng chúng để tạo các biểu mẫu hiệu quả và thân thiện với người dùng.

2. Các HTML Input attributes phổ biến

a. required – bắt buộc người dùng phải nhập liệu

Thuộc tính required đảm bảo rằng người dùng phải điền thông tin vào trường nhập liệu trước khi gửi biểu mẫu. Nếu người dùng không nhập dữ liệu vào trường có thuộc tính required, trình duyệt sẽ hiển thị thông báo lỗi.

Cách sử dụng:

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
</form>

• required: Người dùng bắt buộc phải nhập dữ liệu vào trường này.

b. placeholder – gợi ý cho người dùng

placeholder là văn bản gợi ý hiển thị bên trong trường nhập liệu, giúp hướng dẫn người dùng về nội dung cần nhập. Văn bản gợi ý này sẽ biến mất khi người dùng bắt đầu nhập liệu.

Cách sử dụng:

<form>
    <label for="name">Họ và tên:</label>
    <input type="text" id="name" name="name" placeholder="Nhập họ và tên của bạn">
</form>

• placeholder: Hiển thị gợi ý về nội dung người dùng cần nhập vào.

c. value – giá trị mặc định

value được sử dụng để đặt giá trị mặc định cho trường nhập liệu khi trang web được tải. Người dùng có thể thay đổi giá trị này trước khi gửi biểu mẫu.

Cách sử dụng:

<form>
    <label for="username">Tên người dùng:</label>
    <input type="text" id="username" name="username" value="codetuthub">
</form>

• value: Đặt giá trị mặc định cho trường nhập liệu.

d. readonly – trường nhập liệu chỉ đọc

Thuộc tính readonly cho phép người dùng xem giá trị trong trường nhập liệu, nhưng không thể chỉnh sửa giá trị này.

Cách sử dụng:

<form>
    <label for="userid">Mã người dùng:</label>
    <input type="text" id="userid" name="userid" value="12345" readonly>
</form>

• readonly: Trường nhập liệu này không thể bị thay đổi.

e. disabled – vô hiệu hóa trường nhập liệu

disabled là thuộc tính được sử dụng để vô hiệu hóa trường nhập liệu. Khi trường bị vô hiệu hóa, người dùng không thể tương tác với nó, và dữ liệu trong trường sẽ không được gửi khi biểu mẫu được gửi.

Cách sử dụng:

<form>
    <label for="promo">Mã khuyến mãi:</label>
    <input type="text" id="promo" name="promo" disabled>
</form>

• disabled: Vô hiệu hóa trường nhập liệu, ngăn người dùng tương tác.

f. min và max – giới hạn giá trị nhập vào

Thuộc tính min và max được sử dụng để giới hạn giá trị tối thiểu và tối đa mà người dùng có thể nhập vào trong các trường số hoặc ngày.

Cách sử dụng:

<form>
    <label for="age">Tuổi:</label>
    <input type="number" id="age" name="age" min="18" max="100">
</form>

• min: Giá trị nhỏ nhất mà người dùng có thể nhập.
• max: Giá trị lớn nhất mà người dùng có thể nhập.

g. step – bước nhảy giá trị

step được sử dụng trong các trường number, range, date, time để xác định khoảng cách giữa các giá trị hợp lệ.

Cách sử dụng:

<form>
    <label for="volume">Âm lượng:</label>
    <input type="range" id="volume" name="volume" min="0" max="100" step="10">
</form>

• step: Xác định khoảng cách giữa các giá trị hợp lệ (ở ví dụ trên, người dùng chỉ có thể chọn giá trị 0, 10, 20,... đến 100).

h. maxlength và minlength – giới hạn số ký tự

maxlength và minlength xác định số lượng ký tự tối đa và tối thiểu mà người dùng có thể nhập vào một trường văn bản.

Cách sử dụng:

<form>
    <label for="username">Tên người dùng:</label>
    <input type="text" id="username" name="username" minlength="5" maxlength="15">
</form>

• minlength: Số ký tự tối thiểu mà người dùng phải nhập.
• maxlength: Số ký tự tối đa mà người dùng có thể nhập.

i. pattern – xác thực dữ liệu bằng biểu thức chính quy

Thuộc tính pattern cho phép bạn xác định một biểu thức chính quy (regular expression) để kiểm tra tính hợp lệ của dữ liệu nhập vào.

Cách sử dụng:

<form>
    <label for="phone">Số điện thoại:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" placeholder="Nhập số điện thoại 10 chữ số">
</form>

• pattern: Đảm bảo người dùng nhập dữ liệu đúng theo định dạng đã chỉ định (ở đây là 10 chữ số).

j. autofocus – tự động focus vào trường nhập liệu

Thuộc tính autofocus giúp tự động đưa con trỏ chuột vào trường nhập liệu khi trang được tải. Chỉ có một trường trong mỗi biểu mẫu có thể có thuộc tính này.

Cách sử dụng:

<form>
    <label for="name">Họ và tên:</label>
    <input type="text" id="name" name="name" autofocus>
</form>

• autofocus: Tự động chọn trường này khi trang tải.

k. autocomplete – tự động điền dữ liệu

autocomplete giúp trình duyệt tự động điền thông tin vào các trường nhập liệu dựa trên lịch sử dữ liệu mà người dùng đã nhập trước đó. Giá trị có thể là "on" (bật) hoặc "off" (tắt).

Cách sử dụng:

<form autocomplete="on">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</form>

• autocomplete: Tự động điền thông tin vào trường này nếu trình duyệt có lưu trữ thông tin trước đó.

3. Ví dụ sử dụng nhiều HTML Input attributes

Dưới đây là ví dụ về một biểu mẫu với nhiều thuộc tính HTML Input Attributes khác nhau:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Biểu mẫu đăng ký - CodeTutHub</title>
</head>
<body>

<h1>Đăng ký tài khoản</h1>
<form action="/submit_registration" method="post" autocomplete="on">
    <label for="username">Tên người dùng:</label>
    <input type="text" id="username" name="username" required minlength="5" maxlength="15" autofocus><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>

    <label for="password">Mật khẩu:</label>
    <input type="password" id="password" name="password" required><br><br>

    <label for="age">Tuổi:</label>
    <input type="number" id="age" name="age" min="18" max="100"><br><br>

    <label for="phone">Số điện thoại:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" placeholder="Nhập số điện thoại 10 chữ số"><br><br>

    <input type="submit" value="Đăng ký">
</form>

</body>
</html>

4. Kết luận

Các HTML Input Attributes cung cấp những công cụ mạnh mẽ để tùy chỉnh và kiểm soát hành vi của các trường nhập liệu trong biểu mẫu. Bằng cách sử dụng các thuộc tính như required, placeholder, maxlength, pattern, bạn có thể đảm bảo rằng dữ liệu nhập vào được định dạng chính xác và cải thiện trải nghiệm người dùng trên trang web.

Hãy sử dụng các thuộc tính này một cách hợp lý để tạo ra các biểu mẫu hiệu quả và thân thiện với người dùng!