HTML Cơ bản
HTML Nâng cao
Quảng cáo

Biểu mẫu HTML

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

HTML Form là gì?

Biểu mẫu HTML (HTML Form) được yêu cầu để thu thập các loại đầu vào khác nhau của người dùng, chẳng hạn như chi tiết liên hệ như tên, địa chỉ email, số điện thoại hoặc các chi tiết như thông tin 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à điều khiển như hộp nhập, hộp kiểm, nút radio, nút gửi, v.v. Người dùng thường hoàn thành biểu mẫu bằng cách sửa đổi các điều khiển của nó, 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êm.

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

Ví dụ

<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 điều khiển khác nhau mà bạn có thể sử dụng trong biểu mẫu của mình.

Yếu tố đầu vào

Đâ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 nhập 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à kiểu 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 đặt lại , hộp chọn tệp , (text fieldpassword fieldcheckboxradio buttonsubmit buttonreset buttonfile select box) 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 (Text Fields)

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

Các điều khiển 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> có 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 để lấy tên người dùng:

Ví dụ

<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:

Trường nhập văn bản HTML
 

Lưu ý: Thẻ <label> được sử dụng để xác định các nhãn cho các yếu tố <input>. Nếu bạn muốn người dùng của mình nhập nhiều dòng, bạn nên sử dụng phần <a href="https://www.tutorialrepublic.com/html-reference/html-textarea-tag.php"><textarea></a> thay thế.


Trường mật khẩu (Password Field)

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 điều khiển 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> có thuộc tính type có giá trị password.

Dưới đây là một ví dụ về cách nhập mật khẩu một dòng được sử dụng để lấy mật khẩu của người dùng:

Ví dụ

<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:

Trường nhập mật khẩu HTML

Các nút radio (Radio Buttons)

Các nút radio đượ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 một phần tử <input> có 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 để thu thập thông tin giới tính của người dùng:

Ví dụ

<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:

Các nút radio HTML

Hộp kiểm (Checkboxes)

Hộp kiểm 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 một phần tử <input> có 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:

Ví dụ

<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:

Hộp kiểm HTML
 

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 tệp (File Select box)

Các trường tệp cho phép người dùng duyệt tìm tệp cục bộ và gửi tệp đó dưới dạng tệp đí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 đầu vào chọn tệp bằng nút Duyệt qua cho phép người dùng điều hướng ổ cứng cục bộ và chọn tệp.

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

Ví dụ

<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:

Trường chọn tệp HTML
 

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


Textarea

Textarea là một điều khiển 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. Các điều khiển nhập văn bản nhiều dòng được tạo bằng một phần tử <textarea>.

Ví dụ

<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:

HTML Textarea

Chọn hộp (Select Boxes)

Hộp chọn 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 kéo 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>.

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

Ví dụ

<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:

HTML Chọn thả xuống

Các nút Gửi và đặt lại (Submit và Reset Buttons)

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 tệp được chỉ định trong thuộc tính action của biểu mẫu để xử lý dữ liệu đã gửi.

Nút đặt lại sẽ đặt lại tất cả các điều khiển 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.

Ví dụ

<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>
Nút Gửi và Đặt lại HTML

Nhập tên của bạn vào trường văn bản ở trên và nhấp vào nút gửi để xem tên của bạn đang hoạt động.

 

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> giống như các nút được tạo bằng phần tử đầu vào, 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.


Nhóm điều khiển biểu mẫu

Bạn cũng 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 <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:

Ví dụ

<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>

Thuộc tính 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ử biểu mẫu được sử dụng thường xuyên nhất:

Thuộc tính Sự miêu tả
name Chỉ định tên của biểu mẫu.
action Chỉ định URL của chương trình hoặc tập lệnh trên máy chủ web sẽ được sử dụng để xử lý thông tin được gửi qua biểu mẫu.
method Chỉ định phương thức HTTP được trình duyệt sử dụng để gửi dữ liệu đến máy chủ web. Giá trị có thể là get(mặc định) và post.
target Chỉ định nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu. Giá trị có thể là _blank_self_parentvà _top.
enctype Chỉ định cách dữ liệu biểu mẫu sẽ được mã hóa khi gửi biểu mẫu đến máy chủ. Chỉ áp dụng khi giá trị của methodthuộc tính là post.

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

 

Lưu ý: Thuộc tính name đại diện cho tên của mẫu trong bộ sưu tập các hình thức. 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 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.

Bài viết này đã giúp ích cho bạn?

Advertisements