• Trang chủ
• Hướng dẫn HTML
• Biểu mẫu HTML

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:

<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ínhtype.Phần tử đầu vào có thể là kiểutrường văn bản,trườngmậ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 field,password field,checkbox,radio button,submit button,reset button,file select box) cũng như một sốkiểu nhập mới đượcgiớ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ínhtypecó 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:

<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 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ínhtypecó 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:

<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 (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ínhtypecó 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:

<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 (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ínhtypecó 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:

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ínhtypeđược đặt thànhfile.

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

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

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

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.

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

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ínhactioncủ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.

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

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.

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:

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

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