26.2.20

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

Nội Dung Chính [Ẩn] [Hiển thị]
    Bài viết này mình hướng dẫn cách sử dụng thẻ <input/> cho anh em tham khảo

    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://1.bp.blogspot.com/-mJWmQVMCMKY/XlXzC5v2eQI/AAAAAAAABgw/RU1P1_gIME0RGfvc__hd04RNtwEbxRvjwCLcBGAsYHQ/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
    Bạn đang xem bài viết "Cách sử dụng thẻ <input/> trong HTML" tại chuyên mục: HTML , Tag
    Xem thêm