Thẻ Input trong HTML là gì? Tổng hợp các ví dụ cụ thể

Thẻ Input trong HTML là một phần quan trọng của ngôn ngữ đánh dấu siêu văn bản (HTML) và được sử dụng rộng rãi trong việc tạo ra các biểu mẫu trên trang web. Thẻ Input cho phép người dùng nhập liệu vào các trường dữ liệu như văn bản, số, ngày tháng và nhiều loại dữ liệu khác. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về thẻ Input trong HTML và xem xét một số ví dụ cụ thể.

1. Thẻ Input là gì?

Thẻ Input là một thẻ HTML được sử dụng để tạo ra các trường nhập liệu trên trang web. Nó cho phép người dùng nhập thông tin vào các trường như văn bản, số, ngày tháng và nhiều loại dữ liệu khác. Thẻ Input có một số thuộc tính để xác định kiểu dữ liệu và hành vi của trường nhập liệu.

Ví dụ:

<input type="text" name="username" placeholder="Nhập tên đăng nhập">

Trong ví dụ trên, chúng ta sử dụng thuộc tính “type” để xác định kiểu dữ liệu của trường nhập liệu là văn bản (text). Thuộc tính “name” được sử dụng để xác định tên của trường nhập liệu, và thuộc tính “placeholder” được sử dụng để hiển thị một gợi ý cho người dùng.

2. Các kiểu dữ liệu của thẻ Input

Thẻ Input hỗ trợ nhiều kiểu dữ liệu khác nhau để phù hợp với các yêu cầu nhập liệu khác nhau. Dưới đây là một số kiểu dữ liệu phổ biến của thẻ Input:

a) Kiểu văn bản (text)

Kiểu văn bản cho phép người dùng nhập vào các ký tự và chuỗi văn bản. Đây là kiểu dữ liệu mặc định của thẻ Input khi không có thuộc tính “type” được chỉ định.

Ví dụ:

<input type="text" name="fullname" placeholder="Nhập họ và tên">

Trong ví dụ trên, chúng ta sử dụng kiểu văn bản để tạo ra một trường nhập liệu cho người dùng nhập vào họ và tên.

b) Kiểu số (number)

Kiểu số cho phép người dùng chỉ nhập vào các giá trị số.

Ví dụ:

<input type="number" name="age" placeholder="Nhập tuổi">

Trong ví dụ trên, chúng ta sử dụng kiểu số để tạo ra một trường nhập liệu cho người dùng nhập vào tuổi.

c) Kiểu ngày tháng (date)

Kiểu ngày tháng cho phép người dùng chọn một ngày hoặc một khoảng thời gian từ một lịch.

Ví dụ:

<input type="date" name="birthdate" placeholder="Chọn ngày sinh">

Trong ví dụ trên, chúng ta sử dụng kiểu ngày tháng để tạo ra một trường nhập liệu cho người dùng chọn ngày sinh.

3. Các thuộc tính của thẻ Input

Thẻ Input có nhiều thuộc tính khác nhau để xác định kiểu dữ liệu và hành vi của trường nhập liệu. Dưới đây là một số thuộc tính phổ biến của thẻ Input:

a) Thuộc tính “type”

Thuộc tính “type” được sử dụng để xác định kiểu dữ liệu của trường nhập liệu. Có nhiều giá trị khác nhau cho thuộc tính này, như đã đề cập ở phần trước.

Ví dụ:

<input type="text" name="username" placeholder="Nhập tên đăng nhập">

Trong ví dụ trên, chúng ta sử dụng thuộc tính “type” với giá trị “text” để xác định kiểu dữ liệu của trường nhập liệu là văn bản.

b) Thuộc tính “name”

Thuộc tính “name” được sử dụng để xác định tên của trường nhập liệu. Tên này sẽ được sử dụng để xác định giá trị của trường khi gửi biểu mẫu lên máy chủ.

Ví dụ:

<input type="text" name="fullname" placeholder="Nhập họ và tên">

Trong ví dụ trên, chúng ta sử dụng thuộc tính “name” với giá trị “fullname” để xác định tên của trường nhập liệu là họ và tên.

c) Thuộc tính “placeholder”

Thuộc tính “placeholder” được sử dụng để hiển thị một gợi ý cho người dùng trong trường nhập liệu. Gợi ý này sẽ biến mất khi người dùng bắt đầu nhập liệu.

Ví dụ:

<input type="text" name="username" placeholder="Nhập tên đăng nhập">

Trong ví dụ trên, chúng ta sử dụng thuộc tính “placeholder” với giá trị “Nhập tên đăng nhập” để hiển thị gợi ý cho người dùng.

4. Ví dụ cụ thể về thẻ Input

Để hiểu rõ hơn về cách sử dụng thẻ Input trong HTML, chúng ta sẽ xem xét một số ví dụ cụ thể:

a) Ví dụ về trường nhập liệu văn bản

Trong ví dụ này, chúng ta sẽ tạo ra một trường nhập liệu văn bản để người dùng nhập vào họ và tên:

<input type="text" name="fullname" placeholder="Nhập họ và tên">

Trường nhập liệu này sẽ hiển thị một gợi ý “Nhập họ và tên” cho người dùng.

b) Ví dụ về trường nhập liệu số

Trong ví dụ này, chúng ta sẽ tạo ra một trường nhập liệu số để người dùng nhập vào tuổi:

<input type="number" name="age" placeholder="Nhập tuổi">

Trường nhập liệu này chỉ cho phép người dùng nhập vào các giá trị số.

c) Ví dụ về trường nhập liệu ngày tháng

Trong ví dụ này, chúng ta sẽ tạo ra một trường nhập liệu ngày tháng để người dùng chọn ngày sinh:

<input type="date" name="birthdate" placeholder="Chọn ngày sinh">

Trường nhập liệu này sẽ hiển thị một lịch để người dùng chọn ngày sinh.

Tổng kết

Thẻ Input trong HTML là một công cụ mạnh mẽ để tạo ra các trường nhập liệu trên trang web. Nó cho phép người dùng nhập thông tin vào các trường như văn bản, số, ngày tháng và nhiều loại dữ liệu khác. Bằng cách sử dụng các thuộc tính của thẻ Input, chúng ta có thể xác định kiểu dữ liệu và hành vi của trường nhập liệu. Hy vọng rằng bài viết này đã giúp bạn hiểu rõ hơn về thẻ Input trong HTML và cách sử dụng nó trong việc tạo ra các biểu mẫu trên trang web của bạn.

Công ty TNHH Công nghệ Truyền thông Tổng lực

Chúng tôi chuyên cung cấp các giải pháp về Digital Marketing. Giúp các doanh nghiệp kinh doanh hiệu quả và đạt doanh thu nhanh chóng. Bên cạnh đó còn hỗ trợ xây dựng thương hiệu bền vững theo thời gian. 

Liên hệ

icon zalo
nhắn tin facebook
0765828282 gọi điện thoại