STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    HTML - Phần 6: Các Thẻ Input trong HTML

    Các loại thẻ <input> hỗ trợ nhập liệu chuỗi, số, mật khẩu, ... trong HTML.
    31/10/2015
    30/08/2020
    3 phút đọc
    HTML - Phần 6: Các Thẻ Input trong HTML

    Cấu trúc thẻ <input>

    Thẻ input được HTML hỗ trợ với cấu trúc như sau:

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

    Các thuộc tính của thẻ <input>

    • input: là thẻ được định nghĩa trong HTML.
    • type: là kiểu của input.
      • text: văn bản, ví dụ tên, email, số điện thoại.
      • password: mật khẩu.
      • ...
    • name: thuộc tính này sử dụng để trang web có thể lấy được giá trị của input và xử lý ở phía server-side.
    • Ngoài ra các loại thẻ <input> với type khác nhau có thể có thêm các thuộc tính khác nhau.

    Các loại thẻ <input> thông dụng

    <input> với các type khác nhau có chức năng khác nhau:

    • text: nhập văn bản.
    • password: nhập mật khẩu.
    • radio: 1 lựa chọn.
    • checkbox: nhiều lựa chọn. 
    • button: nút bấm.
    • file: lựa chọn file.
    • number: nhập số.
    • color: nhập màu sắc.
    • email: nhập email.

    text

    Dùng để nhập dữ liệu dưới dạng văn bản trên một dòng:

    FIRST NAME:<br />
    <input type="text" name="firstName" /><br />
    LAST NAME:<br />
    <input type="text" name="lastName" />
    Kết quả

    FIRST NAME:

    LAST NAME:

    password

    Dùng để nhập văn bản và văn bản nhập vào sẽ hiện thị dấu * để tránh bị nhìn trộm:

    PASSWORD:<br/>
    <input type="password" />
    Kết quả

    PASSWORD:

    radio

    Dùng chọn một trong nhiều sự lựa chọn ví dụ như trắc nghiệm.

    BẠN BIẾT BÀI VIẾT NÀY THÔNG QUA?<br />
    <input type="radio" name="survey" value="lua-chon-1" checked /> Trực tiếp vào đường dẫn.<br />
    <input type="radio" name="survey" value="lua-chon-2" /> Từ link Facebook.<br />
    <input type="radio" name="survey" value="lua-chon-3" /> Tìm kiếm trên Google.<br />
    <input type="radio" name="survey" value="lua-chon-4" /> Bạn bè chia sẻ.<br />
    <input type="radio" name="survey" value="lua-chon-5" /> Từ bài viết khác trong trang.
    Kết quả

    BẠN BIẾT BÀI VIẾT NÀY THÔNG QUA?
    Trực tiếp vào đường dẫn.
    Từ link Facebook.
    Tìm kiếm trên Google.
    Bạn bè chia sẻ.
    Từ bài viết khác trong trang.

    checkbox

    Dùng chọn nhiều trong nhiều sự lựa chọn ví dụ như trắc nghiệm.

    BẠN THÍCH SẢN PHẨM NÀO?<br />
    <input type="checkbox" name="iphone-x" value="iphone-6"  /> iPhone X<br />
    <input type="checkbox" name="google-pixel" value="google-pixel"  /> Google Pixel<br />
    <input type="checkbox" name="samsung-gallaxy" value="samsung-gallaxy" /> Samsung Gallaxy
    Kết quả

    BẠN THÍCH SẢN PHẨM NÀO?
    iPhone X
    Google Pixel
    Samsung Gallaxy

    button

    Dùng để tạo 1 nút bấm.

    <input type="button" value="Nhấn vào đây!" />
    
    Kết quả

    file

    Dùng để lựa chọn file, thường dùng cho việc tải file lên server.

    <input type="file" name="file" />
    Kết quả

    number

    Dùng chọn lựa những giá trị số trong khoảng xác định.

    <input type="number" name="quality" min="0" max="10"  />
    • min: giới hạn dưới.
    • max: giới hạn trên.
    Kết quả

    color

    Dùng để lấy mã màu thông qua công cụ trực quan.

    <input type="color" name="color" />
    
    Kết quả

    email

    Dùng cho việc nhập email.

    <input type="email" name="email" />
    Kết quả

    Ngoài những <input> này thì HTML còn có hỗ trợ rất nhiều thẻ <input> khác:

    • data
    • datetime
    • time
    • search
    • month
    • week.
    • ...

    Bài chung series

    0
    HTML Cheat Sheet

    HTML Cheat Sheet

    STDIO Training - Đào tạo lập trình Front-end.

    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích.. Tìm hiểu thêm.

    Đề xuất

    HTML - Phần 4: Các Thẻ Định Dạng Danh Sách
    Các thẻ định dạnh danh sách <ul>, <ol>, <li> trong HTML. Các thẻ danh ...
    HTML - Phần 8: Thẻ Form trong HTML
    Thẻ <form> - "khung nhập liệu" trong HTML điền thông tin ứng dụng trong ...

    Khám phá

    HTML - Phần 3: Thẻ Liên Kết trong HTML
    Thẻ liên kết <a href="...">...</a> được xem như là trái tim của 1 trang ...
    HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio
    Âm thanh, hình ảnh, video clip làm cho trang web thêm tiện ích, đẹp và ...
    Các Thẻ - Tag Thông Dụng trong HTML
    Liệt kê các loại thẻ (tag) thường dùng trong HTML để trình bày 1 trang ...
    HTML - Phần 2: Các Thẻ Định Dạng Văn Bản
    Giới thiệu và hướng dẫn sử dụng 1 số thẻ định dạng văn bản HTML.
    HTML - Phần 1: Cơ Bản Về HTML
    Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu ...
    HTML - Phần 7: Thẻ Table Trong HTML
    Trình bày dữ liệu thống kê theo dòng và cột với thẻ <table>.
    Validate Form Bằng Thư Viện Knockout-Validation trong Dự Án Durandaljs
    Bài viết hướng dẫn sử dụng thư viện Knockout-Validation để kiểm tra dữ ...
    HTML - Phần 0: Trang Web Đầu Tiên
    Hướng dẫn từng bước đầu tiên tạo trang web với HTML.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020