Tìm hiểu thẻ input trong HTML: Phân loại định dạng và thuộc tính

Thẻ HTML rất cần thiết cho các biểu mẫu web, đóng vai trò là cầu nối giữa người dùng và trang web. Thẻ input đóng vai trò cốt lõi để khởi tạo các trường tiếp nhận thông tin tương tác trực tiếp trên trình duyệt. Trong bài viết này cùng Viettel IDC phân tích chi tiết thẻ input trong HTML là gì và hệ thống thuộc tính của phần tử này. 

Thẻ input trong HTML là gì?

Thẻ input trong HTML là đoạn mã dùng để tạo ra các ô điền thông tin trên trang web. Đây là nơi người dùng trực tiếp gõ chữ hoặc chọn dữ liệu. Thẻ này có thể biến hóa thành nhiều kiểu ô nhập khác nhau như ô điền tên, ô nhập mật khẩu bí mật, ô điền email hoặc ô nhập số điện thoại.

Người làm web thường đặt phần tử này bên trong một khung chứa lớn hơn gọi là thẻ form. Mục đích là để gom nhóm các ô nhập liệu lại và gửi dữ liệu đi cùng một lúc. Thẻ input có thể kết hợp thêm nhiều tính năng phụ để hỗ trợ người dùng. Ví dụ như tính năng hiển thị chữ mờ để hướng dẫn cách điền hoặc tính năng khóa ô không cho phép nhập chữ.

Dưới đây là ví dụ về cách viết mã để tạo ra một ô nhập tên tài khoản đơn giản:

<html>

<body>

    <form>

        <label for="username">Username:</label>

        <input type="text" id="username" name="username">

    </form>

</body>

</html>

Giải thích ý nghĩa các thành phần:

- Thẻ label: Đây là đoạn chữ chú thích hiển thị ngay bên cạnh ô nhập liệu. Thành phần for sẽ liên kết dòng chữ này với ô nhập có chung tên id. Nhờ vậy khi người dùng bấm vào dòng chữ, con trỏ chuột sẽ tự động nhảy vào bên trong ô điền.

- Thuộc tính type: Yếu tố này quyết định loại dữ liệu mà người dùng được phép điền. Chữ text báo cho hệ thống biết hãy tạo ra một ô để gõ văn bản bình thường.

- Thuộc tính name: Đây là tên gọi đại diện cho ô nhập liệu đó. Khi người dùng bấm nút gửi, hệ thống máy chủ sẽ nhìn vào tên này để phân loại xem chữ vừa nhận được là tên tài khoản hay là mật khẩu.

- Thuộc tính value: Thành phần này dùng để điền sẵn một đoạn chữ mặc định vào trong ô. Khi chúng ta bỏ trống phần này, trang web sẽ hiển thị một ô điền hoàn toàn trắng để người xem tự gõ nội dung.
Có thể bạn quan tâm:
- HTML là gì? Nguyên lý hoạt động trong việc xây dựng website

Phân loại các định dạng thẻ input trong HTML cơ bản

Thành phần phân loại bên trong thẻ input sẽ quyết định tính chất của thông tin mà người xem được phép điền. Lập trình viên có thể tạo ra ô điền chữ bình thường, ô nhập số điện thoại hoặc lịch chọn ngày tháng chỉ bằng cách thay đổi giá trị thuộc tính này.

Dưới đây là các định dạng nhập liệu thường gặp nhất trên mọi trang web:

- <input type="text">: Ô nhập văn bản thông thường. Đây là ô điền chữ cơ bản trên một dòng dùng để ghi họ tên hoặc địa chỉ nhà ngắn gọn.

- <input type="password">: Ô điền mật khẩu bí mật. Mọi chữ cái người dùng gõ vào sẽ tự động biến thành dấu chấm hoặc hình ngôi sao đen để bảo vệ sự riêng tư.

- <input type="checkbox">: Ô vuông đánh dấu. Định dạng này cho phép người dùng chọn cùng lúc nhiều đáp án khác nhau trong một danh sách gợi ý.

- <input type="radio">: Nút chọn hình tròn. Khác với dạng ô vuông ở trên, loại nút tròn này chỉ cho phép người xem chọn một đáp án duy nhất trong nhóm.

- <input type="submit">: Nút gửi biểu mẫu. Khi người xem nhấn vào nút này, toàn bộ thông tin họ vừa điền xong sẽ được đóng gói và chuyển thẳng về cho máy chủ.

- <input type="button">: Nút bấm chức năng cơ bản. Quản trị viên thường dùng nút này để kích hoạt một tính năng tương tác bất kỳ trên màn hình.

- <input type="file">: Nút tải tài liệu. Người truy cập sử dụng nút này để mở thư mục trên thiết bị và tải hình ảnh hoặc tệp tin cá nhân lên trang web.

- <input type="number">: Ô điền chữ số. Khung này chỉ tiếp nhận các con số toán học và thường có sẵn hai nút mũi tên nhỏ xíu bên cạnh để người dùng bấm tăng giảm.

- <input type="date">: Ô chọn ngày tháng. Khi người dùng nhấp chuột vào, một cuốn lịch nhỏ sẽ mở ra để họ chọn ngày tháng năm cực kỳ nhanh chóng.

- <input type="email">: Ô nhập thư điện tử. Hệ thống sẽ tự động rà soát xem nội dung người dùng vừa gõ có ký tự a còng và đúng cấu trúc của một địa chỉ email hay không.

- <input type="color">: Bảng chọn màu sắc. Một bảng màu đồ họa sinh động sẽ hiện ra để người xem chấm chọn đúng tông màu yêu thích.

- <input type="range">: Thanh trượt định lượng. Người dùng thao tác kéo con chạy trên một thanh ngang để chọn một mức giá trị nằm trong giới hạn cho phép.

- <input type="hidden">: Ô chứa dữ liệu ẩn. Khung thông tin này hoàn toàn tàng hình trước mắt người xem nhưng vẫn âm thầm mang theo dữ liệu cần thiết để máy chủ xử lý.

- <input type="image">: Nút gửi dữ liệu bằng hình ảnh. Thay vì hiển thị một nút bấm cứng nhắc, hệ thống sẽ dùng một bức ảnh đồ họa đẹp mắt để làm nút bấm gửi thông tin.

Các thuộc tính tùy chỉnh thẻ input trong HTML

Thuộc tính hoạt động giống như các nút công tắc điều chỉnh chức năng cho thẻ input. Chúng giúp bạn kiểm soát cách ô điền thông tin hiển thị và hoạt động.

Ví dụ minh họa thiết kế biểu mẫu thực tế

Ví dụ 1: Khung nhập mật khẩu

Khối mã dưới đây tạo ra một ô nhập mật khẩu. Các ký tự người dùng gõ vào sẽ bị ẩn đi để bảo mật. Đoạn mã tạo kiểu CSS đi kèm giúp bo tròn các góc và đổi màu viền ô thành xanh lá cây.

<html>

<head>

        <style>

               input[type="password"] {

                       border: 2px solid #4CAF50;

                       border-radius: 4px;

                       padding: 10px;

                       width: 200px;

               }

        </style>

</head>

<body>

        <form>

               <label for="password">Password:</label>

               <input type="password" id="password" name="password">

        </form>

</body>

</html>

Ví dụ 2: Ô nhập email 

Đoạn mã này khởi tạo một trường điền email chuẩn. Thuộc tính chữ hướng dẫn mờ sẽ cung cấp một địa chỉ email mẫu bên trong khung. Khi người dùng bắt đầu gõ chữ đầu tiên, dòng chữ mẫu này sẽ tự động biến mất.

<html>

<head>

    <style>

        input[type="email"] {

            border: 1px solid #ccc;

            padding: 8px;

            font-size: 14px;

            width: 250px;

        }

    </style>

</head>

<body>

    <form>

        <label for="email">Email:</label>

        <input type="email" id="email" name="email"

         placeholder="example@example.com">

    </form>

</body>

</html>

Kết luận

Thẻ input trong HTML là thành phần cơ sở bắt buộc phải có để thiết lập hệ thống biểu mẫu tiếp nhận dữ liệu trên mọi nền tảng ứng dụng. Việc khai báo chính xác các định dạng phân loại và cấu hình chuẩn bộ thuộc tính kỹ thuật giúp kỹ sư frontend kiểm soát hoàn toàn luồng thông tin đầu vào. Quá trình xây dựng giao diện nhập liệu tối ưu không chỉ ngăn chặn dữ liệu sai định dạng từ máy khách mà còn hỗ trợ máy chủ xử lý gói tin với hiệu suất cao nhất.