Biểu mẫu trong HTML5

Trong hướng dẫn này, bạn sẽ học cách tạo biểu mẫu trong HTML5 để thu thập thông tin đầu vào của người dùng.

Biểu mẫu HTML là gì

Biểu mẫu (form) HTML được yêu cầu để thu thập các loại dữ liệu đầu vào khác nhau của người dùng, chẳng hạn như thông tin liên hệ: tên, địa chỉ email, số điện thoại hoặc các thông tin khác thẻ tín dụng, v.v.

Biểu mẫu chứa các phần tử đặc biệt được gọi là các control như input, checkbox, radio button, nút gửi, v.v. Người dùng thường hoàn thành biểu mẫu bằng cách thay đổi giá trị của các control, ví dụ: nhập văn bản, chọn mục, v.v. và gửi biểu mẫu này đến máy chủ web để xử lý.

Thẻ <form> được sử dụng để tạo ra một biểu mẫu HTML. Đây là một ví dụ đơn giản về biểu mẫu đăng nhập:

<form>
    <label>Username: <input type="text"></label>
    <label>Password: <input type="password"></label>
    <input type="submit" value="Submit">
</form>

Phần sau đây mô tả các loại control khác nhau mà bạn có thể sử dụng trong biểu mẫu của mình.

Input

Đây là phần tử được sử dụng phổ biến nhất trong các biểu mẫu HTML.

Nó cho phép bạn chỉ định nhiều loại trường dữ liệu đầu vào của người dùng, tùy thuộc vào thuộc tính type. Phần tử đầu vào có thể là trường văn bản, trường mật khẩu, hộp kiểm, nút radio, nút gửi, nút reset, hộp chọn file, cũng như một số kiểu nhập mới được giới thiệu trong HTML5.

Các loại đầu vào được sử dụng thường xuyên nhất được mô tả bên dưới.

Trường văn bản

Trường văn bản (text field) là control nhập văn bản một dòng cho phép người dùng nhập văn bản.

Control nhập văn bản một dòng được tạo bằng cách sử dụng một phần tử <input> với thuộc tính type có giá trị là text. Dưới đây là một ví dụ về kiểu nhập văn bản một dòng được sử dụng để nhận thông tin tên người dùng:

<form>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
</form>

Kết quả của ví dụ trên sẽ giống như sau:

Lưu ý: Thẻ <label> được sử dụng để chỉ định các nhãn cho thẻ <input>. Nếu bạn muốn người dùng của mình nhập dữ liệu nhiều dòng, bạn nên sử dụng thẻ <textarea> sẽ được trình bày ở bên dưới.

Trường mật khẩu

Trường mật khẩu tương tự như trường văn bản. Sự khác biệt duy nhất là; các ký tự trong trường mật khẩu được che đi, tức là chúng được hiển thị dưới dạng dấu hoa thị hoặc dấu chấm.

Điều này là để ngăn người khác đọc mật khẩu trên màn hình. Đây cũng là một control nhập văn bản một dòng được tạo bằng cách sử dụng một phần tử <input> với thuộc tính type có giá trị là password.

Dưới đây là một ví dụ về control mật khẩu được sử dụng để nhận thông tin mật khẩu của người dùng:

<form>
    <label for="user-pwd">Password:</label>
    <input type="password" name="user-password" id="user-pwd">
</form>

Kết quả của ví dụ trên sẽ giống như sau:

Các nút radio

Các nút radio (radio button) được sử dụng để cho phép người dùng chọn chính xác một tùy chọn từ một nhóm tùy chọn được xác định trước. Nó được tạo bằng cách sử dụng phần tử <input> vưới thuộc tính type có giá trị là radio.

Dưới đây là một ví dụ về các nút radio có thể được sử dụng để nhận thông tin giới tính của người dùng:

<form>
    <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
</form>

Kết quả của ví dụ trên sẽ giống như sau:

Hộp kiểm

Hộp kiểm (checkbox) cho phép người dùng chọn một hoặc nhiều tùy chọn từ một nhóm tùy chọn được xác định trước. Nó được tạo bằng cách sử dụng phần tử <input> với thuộc tính type có giá trị là checkbox.

Dưới đây là một ví dụ về các hộp kiểm có thể được sử dụng để thu thập thông tin về sở thích của người dùng:

<form>
    <input type="checkbox" name="sports" id="soccer">
    <label for="soccer">Soccer</label>
    <input type="checkbox" name="sports" id="cricket">
    <label for="cricket">Cricket</label>
    <input type="checkbox" name="sports" id="baseball">
    <label for="baseball">Baseball</label>
</form>

Kết quả của ví dụ trên sẽ giống như sau:

Lưu ý: Nếu bạn muốn chọn nút radio hoặc hộp kiểm theo mặc định, bạn có thể thêm thuộc tính checked vào phần tử đầu vào, chẳng hạn như <input type="checkbox" checked>.

Hộp chọn file

Hộp chọn file cho phép người dùng duyệt file cục bộ và gửi file đó dưới dạng file đính kèm với dữ liệu biểu mẫu. Các trình duyệt web như Google Chrome và Firefox hiển thị trường chọn tệp bằng nút Browse cho phép người dùng chọn file trên máy cục bộ.

Điều này được tạo bằng cách sử dụng một phần tử <input> với thuộc tính type có giá trị  được đặt thành file.

<form>
    <label for="file-select">Upload:</label>
    <input type="file" name="upload" id="file-select">
</form>

Kết quả của ví dụ trên sẽ giống như sau:

Mẹo: Có một số kiểu đầu vào khác. Vui lòng xem chương về các kiểu đầu vào mới của HTML5 để tìm hiểu thêm về các kiểu đầu vào mới được giới thiệu.

Textarea

Textarea là một control nhập văn bản nhiều dòng cho phép người dùng nhập nhiều hơn một dòng văn bản. Control nhập văn bản nhiều dòng được tạo bằng phần tử <textarea>.

<form>
    <label for="address">Address:</label>
    <textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>

Kết quả của ví dụ trên sẽ giống như sau:

Hộp chọn

Hộp chọn (select) là danh sách tùy chọn thả xuống cho phép người dùng chọn một hoặc nhiều tùy chọn từ danh sách tùy chọn thả xuống. Hộp chọn được tạo bằng cách sử dụng phần tử <select> và phần tử <option>.

Các phần tử <option> bên trong phần tử <select> xác định từng mục trong danh sách.

<form>
    <label for="city">City:</label>
    <select name="city" id="city">
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
        <option value="cromwell">Cromwell</option>
    </select>
</form>

Kết quả của ví dụ trên sẽ giống như sau:

Nút gửi và reset biểu mẫu

Nút gửi được sử dụng để gửi dữ liệu biểu mẫu đến máy chủ web. Khi nhấp vào nút gửi, dữ liệu biểu mẫu được gửi đến URL được chỉ định trong thuộc tính action của biểu mẫu để xử lý dữ liệu đã gửi.

Nút reset sẽ đặt lại tất cả các control của biểu mẫu về các giá trị mặc định. Hãy thử ví dụ sau bằng cách nhập tên của bạn vào trường văn bản và nhấp vào nút gửi để xem nó hoạt động.

<form action="action.php" method="post">
    <label for="first-name">First Name:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

Lưu ý: Bạn cũng có thể tạo các nút bằng cách sử dụng phần tử <button>. Các nút được tạo với phần tử <button> có chức năng giống như các nút được tạo bằng phần tử <input>, nhưng chúng cung cấp khả năng hiển thị phong phú hơn bằng cách cho phép nhúng các phần tử HTML khác.

Gom nhóm các điều khiển trong biểu mẫu

Bạn cũng gom nhóm các điều khiển và nhãn liên quan một cách hợp lý trong một biểu mẫu web bằng cách sử dụng phần tử <legend>.

Nhóm các điều khiển biểu mẫu thành các danh mục giúp người dùng dễ dàng xác định vị trí điều khiển, điều này làm cho biểu mẫu thân thiện hơn với người dùng.

Hãy thử ví dụ sau để xem nó hoạt động như thế nào:

<form>
    <fieldset>
        <legend>Contact Details</legend>
        <label>Email Address: <input type="email" name="email"></label>
        <label>Phone Number: <input type="text" name="phone"></label>
    </fieldset>
</form>

Các thuộc tính của biểu mẫu được sử dụng thường xuyên

Bảng sau liệt kê các thuộc tính của phần tử <form> được sử dụng thường xuyên nhất:

Có một số thuộc tính khác, để biết về chúng, vui lòng xem thêm về phần tử <form>.

Lưu ý: Thuộc tính name đại diện cho tên của biểu mẫu trong danh sách các biểu mẫu. Giá trị của nó phải là duy nhất trong số các biểu mẫu trong tài liệu và không được là một chuỗi trống.

Mẹo: Tất cả dữ liệu được gửi qua phương thức get sẽ hiển thị trong thanh địa chỉ của trình duyệt. Tuy nhiên, dữ liệu được gửi qua phương thức post không hiển thị cho người dùng. Vui lòng xem hướng dẫn về GET so với POST để tìm hiểu chi tiết về sự khác biệt giữa hai phương thức HTTP này.