Thẻ <label> và thẻ <input> trong HTML

TextBox: Hộp nhập liệu một dòng

<form action="https://httpbin.org/anything" method="post">
    <label for="firstname">Họ:</label>
    <input type="text" name="firstname" id="firstname">
    <label for="lastname">Tên:</label>
    <input type="text" placeholder="Tên bạn?" name="lastname" id="lastname">
    <input type="submit" value="Gửi">
</form>

Hộp nhập password

<form action="https://httpbin.org/anything" method="post">
    <label for="username">Tên:</label>
    <input type="text" name="username" id="username">
    <label for="psw">Mật khẩu:</label>
    <input type="password" name="psw" id="psw">
    <input type="submit" value="Gửi">
</form> 

Tạo nút bấm để gửi hoặc reset dữ liêu, xem chi tiết tại: Nút bấm Submit và Reset

Tạo lựa chọn radio (chọn một giá trị trong nhóm). Các radio cùng tên tạo thành một nhóm (như gioitinh, noisinh). Khi submit giá trị trong radio được lựa chọn sẽ gửi đi (giá trị này lưu trong value).Một radio có thuộc tính checked thì mặc định nó là lựa chọn ban đầu của nhóm.

<form action="https://httpbin.org/anything" method="post">
    <p><strong>Chọn giới tính</strong></p>
    <input type="radio" name="gioitinh" value="1"> Nam<br>
    <input type="radio" name="gioitinh" value="0" checked> Nữ<br>
    <input type="radio" name="gioitinh" value="2"> Khác

    <p><strong>Chọn nơi sinh</strong></p>
    <input type="radio" name="noisinh" value="HN"> Hà Nội<br>
    <input type="radio" name="noisinh" value="ND"> Nam Định<br>
    <input type="radio" name="noisinh" value="Khac"> Khác
    <button type="submit">Gửi</button>
</form>

Tạo lựa chọn hộp kiểm (chọn nhiều phương án). Các checkbox cùng tên tạo thành một nhóm, nếu có nhiều lựa chọn một mảng các giá trị theo tên nhóm sẽ được gửi đi.

<form action="https://httpbin.org/anything" method="post">
    <input type="checkbox" name="love1" id="love1" value="LovePHP">
    <label for="love1">Tôi thích PHP</label><br>
    <input type="checkbox" name="love1" id="love2" value="LoveHTML">
    <label for="love2">Tôi thích HTML</label><br>
    <input type="checkbox" name="love1" id="love3" value="LoveCSS">
    <label for="love3">Tôi thích CSS</label><br>
    <button type="submit">Gửi</button>
</form>

Tạo điều khiển chọn màu sắc, giá trị là mã màu lựa chọn (mã hex của màu - Màu sắc HTML)

<form class="p-1" action="https://httpbin.org/anything" method="post">
    <label for="color">Chọn màu yêu thích</label>
    <input type="color" name="color" id="color" value="#d400ff"><br>
    <button type="submit">Gửi</button>
</form>

Tạo điều khiển chọn ngày

<form class="p-1" action="https://httpbin.org/anything" method="post">
    <label for="ngaysinh">Ngày sinh</label>
    <input type="date" name="ngaysinh" id="ngaysinh" value="2000-11-20">
    <button type="submit">Gửi</button>
</form>

Tạo điều khiển nhập email, nó sẽ kiểm tra dữ liệu đúng là email mới được submit

<form class="p-1" action="https://httpbin.org/anything" method="post">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="Nhập email">
    <button type="submit">Gửi</button>
</form>

Tạo hộp tìm kiếm: (hỗ trợ xóa nhanh chuỗi đang gõ)

<form class="p-1" action="https://httpbin.org/anything" method="post">
    <input type="search" name="search" id="search">
    <button type="submit">Tìm kiếm</button>
</form>

Tạo hộp nhập số điện thoại: (trên di động nó kích hoạt bàn phím bấm số)

<form class="p-1" action="https://httpbin.org/anything" method="post">
    <label for="tel">Số điện thoại</label>
    <input type="tel" name="tel" id="tel">
    <button type="submit">Gửi</button>
</form>

Hộp nhập số: Xuất hiện nút mũi tên để tăng giảm, bước tăng giảm thiết lập qua thuộc tính step, hỗ trợ thiết lập giá trị min, max qua thuộc tính min và max

<form class="p-1" action="https://httpbin.org/anything" method="post">
    <label for="number">Nhập giá trị</label>
    <input type="number" name="number" id="number" max="100" value="10" min="10" step="2">
    <button type="submit">Gửi</button>
</form>

Điều khiển thanh kéo trượt để chọn giá trị trong khoảng, bước tăng giảm thiết lập qua thuộc tính step, hỗ trợ thiết lập giá trị min, max qua thuộc tính min và max

<form class="p-1" action="https://httpbin.org/anything" method="post">
    <label for="number">Lựa chọn khoảng</label>
    <input type="range" name="number" id="number" max="100" value="50" min="1" step="1">
    <button type="submit">Gửi</button>
</form>

Chọn file để upload. Để form gửi được file cần cho thêm thuộc tính enctype="multipart/form-data"

<form  action="https://httpbin.org/anything" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">Gửi</button>
</form>

Hộp nhập địa chỉ URL: Hỗ trợ kiểm tra dữ liệu chính xác khi submit

<form  action="https://httpbin.org/anything" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">Gửi</button>
</form>