Cách sử dụng thẻ input trong HTML

HTML là một ngôn ngữ đánh dấu quan trọng trong việc xây dựng các trang web. Trong HTML, chúng ta có thể sử dụng nhiều thẻ để tạo ra các phần tử và hộp thoại khác nhau trên trang web của mình. Trong bài viết này, chúng ta sẽ tìm hiểu về thẻ <input/> - một thẻ quan trọng và phổ biến trong HTML. Thẻ <input/> cho phép người dùng nhập liệu và tương tác với trang web. Hãy cùng khám phá cách sử dụng thẻ này và tận dụng các tính năng hữu ích mà nó mang lại.

Input dạng text

<input type="text" name="" value="" size="30" />

Sử dụng để nhập giá trị text

Input dạng text - sử dụng maxlength

<input type="text" name="" value="" size="30" maxlength="20" />

Xác định chiều dài lớn nhất (trong ký tự) của một trường text. Trong ví dụ trên là tối đa 20 ký tự

Input dạng text - sử dụng readonly

<input type="text" name="" value="Không thay đổi được text này" size="30" readonly="readonly" />

Sử dụng khi giá trị text chỉ dùng để đọc, không được thay đổi.

Input dạng password

<input type="password" name="" value="" size="30" />

Text hiển thị bên trong dưới dạng password.

Input dạng hidden

<input type="hidden" name="" value="" size="30" />

Dạng này sẽ không hiển thì ra trình duyệt, sử dụng khi không muốn dữ liệu bị thay đổi.

Input dạng checkbox và sử dụng các lựa chọn

Checked

<input type="checkbox" name="" value="" checked="checked" />
<input type="checkbox" name="" value="" />

Được sử dụng cho nhiều lựa chọn khác nhau


Disabled

<input type="checkbox" name="" value="" disabled="disabled" />
<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />

Dạng này không cho click hay tác động tới input mà ta chỉ định

Input dạng radio và sử dụng các lựa chọn

Checked

<input type="radio" name="checkbox" value="" checked="checked" />
<input type="radio" name="checkbox" value="" />

Sử dụng cho lựa chọn mặc định

LƯU Ý: Các <input/> phải cùng "name", nếu không sẽ không chọn được.

Disabled

<input type="radio" name="checkbox" value="" />
<input type="radio" name="checkbox" value=""  disabled="disabled" />
<input type="radio" name="checkbox" value="" />

Dạng này không cho click hay tác động tới input, sử dụng khi không muốn dữ liệu bị thay đổi.

Input dạng button và sử dụng các lựa chọn

Button bình thường

<input type="button" name="" value="Click" />

Button reset

<input type="reset" name="" value="Reset" />

Dùng để reset lại giá trị trong <form>


Button submit

<input type="submit" name="" value="Submit" />

Dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong <form>


Button image

<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj57aunpULTINXIKQhLAZaOMebjwYOmDq3xBuaDKhAHkNO2Lm4pR1zeOLWFsJaxi9QMsCxqquHpsdDxxXr95BZDxoKcMcKmfGh0xOYHqBwrGUBy6jKOsnKg7EeiVoIJDa_szqDMQPRNuZRA/s100/366358_preview.png" alt="SUBMIT" name="" />

Sử dụng như một nút nhấn bằng hình.


Input dạng file upload

<input type="file" name="" />

Sử dụng để upload file


Như vậy, trong bài viết này chúng ta đã tìm hiểu cách sử dụng thẻ <input> trong HTML. Thẻ này cho phép người dùng nhập liệu và tương tác với trang web một cách đơn giản và tiện lợi. Chúng ta đã khám phá các loại input phổ biến như text, password, checkbox, radio, và submit button. Bên cạnh đó, chúng ta cũng đã tìm hiểu về một số thuộc tính quan trọng như value, placeholder, và disabled để tùy chỉnh và kiểm soát thẻ <input> theo ý muốn.
Việc hiểu và sử dụng thẻ <input> một cách thành thạo sẽ giúp bạn xây dựng các trang web tương tác đáng chú ý và hấp dẫn. Hãy thực hành và khám phá thêm các tính năng khác của thẻ <input> để nâng cao kỹ năng lập trình web của bạn. Chúc bạn thành công và tận hưởng quá trình học tập!