Form (biểu mẫu) là một phần quan trọng trong phát triển web, cho phép người dùng tương tác với trang web và gửi dữ liệu lên máy chủ. Form được sử dụng cho nhiều mục đích, chẳng hạn như thu thập thông tin người dùng, xử lý đầu vào người dùng và cho phép người dùng thực hiện các hành động trên trang web. Trong bài viết này, chúng ta sẽ tìm hiểu về các thuộc tính và các loại trường nhập liệu, phần tử select, textarea và button thường được sử dụng trong Form HTML.
Trường nhập liệu (Input Fields)
<input type="text">: Tạo một trường nhập liệu văn bản cho người dùng nhập các ký tự chữ và số.<input type="password">: Hiển thị một trường nhập liệu mật khẩu với ký tự được ẩn đi.<input type="email">: Kiểm tra tính hợp lệ của định dạng email trong trường nhập liệu.<input type="number">: Chỉ cho phép nhập các giá trị số.<input type="checkbox">: Tạo một checkbox cho phép người dùng chọn hoặc bỏ chọn.<input type="radio">: Tạo một nút radio cho phép người dùng chọn một lựa chọn trong một nhóm các lựa chọn.<input type="file">: Cho phép người dùng chọn và tải lên các tệp tin.<input type="submit">: Hiển thị một nút submit để gửi Form khi nhấn.<input type="reset">: Hiển thị một nút reset để đặt lại Form về trạng thái ban đầu.<input type="date">: Cung cấp một trình chọn ngày để chọn ngày.<input type="time">: Cho phép người dùng nhập giá trị thời gian.
Phần tử select
<select>: Tạo một menu dropdown cho phép người dùng chọn một lựa chọn.<option>: Xác định một lựa chọn trong menu dropdown, nằm bên trong thẻ<select>.<optgroup>: Nhóm các lựa chọn liên quan với nhau trong menu dropdown.<select multiple>: Cho phép người dùng chọn nhiều lựa chọn cùng một lúc bằng cách giữ phím Ctrl (hoặc phím Command trên Mac) khi nhấp chuột.
Phần tử textarea
<textarea>: Tạo một trường nhập liệu văn bản đa dòng cho phép người dùng nhập và chỉnh sửa các đoạn văn bản dài hơn. Có thể điều chỉnh kích thước và cấu hình thông qua các thuộc tính như rows và cols để xác định kích thước của nó.
Nút (Button)
<button>: Đại diện cho một nút cho phép kích hoạt các hành động trong Form. Có thể sử dụng để gửi Form, thực hiện một hàm JavaScript hoặc điều hướng đến trang khác.
Ví dụ sử dụng:
<form action="/submit-form" method="post">
<label for="name">Tên:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Nội dung:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<label for="newsletter">Đăng ký nhận tin:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="color">Màu yêu thích:</label>
<select id="color" name="color">
<option value="red">Đỏ</option>
<option value="blue">Xanh dương</option>
<option value="green">Xanh lá cây</option>
</select>
<button type="submit">Gửi</button>
</form>
Ví dụ trên mô tả việc sử dụng các phần tử Form, bao gồm trường nhập liệu, textarea, checkbox, dropdown select và nút submit. Bạn có thể tùy chỉnh các phần tử và thuộc tính của Form dựa trên yêu cầu cụ thể của bạn.