Khóa học IT HTML Cơ bản 013_Biểu mẫu và Nhập liệu người dùng

Biểu mẫu

Biểu mẫu HTML (Form) là một phần rất quan trọng của HTML, cho phép người dùng nhập thông tin trên trang web và gửi đến máy chủ.

Ví dụ:

1
<form action="/submit" method="post">
2
  <!-- Các phần tử biểu mẫu ở đây -->
3
</form>

Phần tử <form> định nghĩa vùng nơi người dùng nhập dữ liệu và có thể chứa các loại phần tử nhập liệu khác nhau như vùng văn bản <textarea>, danh sách thả xuống <select>, nút radio <radio>, hộp kiểm <checkbox> và nút bấm <button>.

Thuộc tính biểu mẫu:

• action: Định nghĩa URL của tệp xử lý dữ liệu biểu mẫu sau khi gửi đến máy chủ.
• method: Định nghĩa phương thức HTTP được sử dụng để gửi dữ liệu đến máy chủ. Các giá trị phổ biến là “get” và “post”.
• name: Dùng để chỉ định tên biểu mẫu. Tên biểu mẫu dùng để nhận dạng biểu mẫu và được sử dụng khi xử lý dữ liệu biểu mẫu ở phía máy chủ.
• enctype: Dùng để chỉ định phương thức mã hóa dữ liệu biểu mẫu. Dữ liệu biểu mẫu có thể sử dụng mã hóa application/x-www-form-urlencoded hoặc multipart/form-data.
• autocomplete: Dùng để chỉ định có bật tính năng tự động hoàn thành biểu mẫu hay không. Nếu đặt thành on, trình duyệt sẽ tự động điền dữ liệu đã nhập trước đó vào biểu mẫu.
• novalidate: Dùng để chỉ định có xác thực dữ liệu biểu mẫu hay không. Nếu đặt thành on, dữ liệu biểu mẫu sẽ không được xác thực trước khi gửi.

[!Tóm tắt]

• Bản thân biểu mẫu form không hiển thị.

Trường văn bản

Trong biểu mẫu, chúng ta thường cần người dùng nhập nội dung văn bản như chữ cái, số. Điều này có thể được thực hiện với phần tử <input> với thuộc tính type được đặt thành “text”.

Ví dụ:

1
<form>
2
Họ tên: <input type="text" name="name"><br>
3
Tuổi: <input type="text" name="age">
4
</form>

Hiệu ứng:

[!Tóm tắt]

• Trong hầu hết các trình duyệt, chiều rộng mặc định của trường văn bản là 20 ký tự.

Trường mật khẩu

Nếu bạn cần người dùng nhập mật khẩu, đặt thuộc tính type của phần tử <input> thành “password”, và nội dung nhập vào sẽ được ẩn đi.

Ví dụ:

1
<form>
2
Mật khẩu: <input type="password" name="pwd">
3
</form>

Hiệu ứng:

[!Tóm tắt]

• Các ký tự trong trường mật khẩu không hiển thị dạng văn bản thông thường mà được thay thế bằng dấu sao * hoặc dấu chấm .

Nút radio (Radio Buttons)

Nút radio và hộp kiểm cho phép người dùng chọn một hoặc nhiều tùy chọn từ nhiều lựa chọn. Giá trị thuộc tính type cho nút radio là “radio”.

Ví dụ:

1
<form action="">
2
Giới tính:
3
<input type="radio" name="sex" value="male" checked>Nam
4
<input type="radio" name="sex" value="female">Nữ
5
</form>

Hiệu ứng:

[!Tóm tắt]

• Giá trị thuộc tính name của các nút radio phải giống nhau, nếu không chúng sẽ không thuộc cùng một nhóm.
• Thuộc tính checked dùng để chỉ định nút radio có được chọn mặc định hay không.

Hộp kiểm (Checkboxes)

Hộp kiểm cho phép chọn một hoặc nhiều tùy chọn, được định nghĩa bằng <input type="checkbox">

Ví dụ:

1
<form>
2
  Các ứng dụng bạn đã sử dụng:
3
  <input type="checkbox" name="app" value="jd">JD
4
  <input type="checkbox" name="app" value="wechat">WeChat
5
  <input type="checkbox" name="app" value="qq">QQ
6
  <input type="checkbox" name="app" value="douyin">TikTok
7
</form>

Hiệu ứng:

[!Tóm tắt]

• Thuộc tính checked dùng để chỉ định hộp kiểm có được chọn mặc định hay không.

Danh sách thả xuống (select)

Danh sách thả xuống cho phép người dùng chọn một tùy chọn từ nhiều lựa chọn. Nó được tạo bằng phần tử <select> và sử dụng phần tử <option> để định nghĩa các tùy chọn.

Ví dụ:

1
<form action="">
2
  Vui lòng chọn quốc gia của bạn:
3
  <select name="country">
4
    <option value="china">Trung Quốc</option>
5
    <option value="us">Hoa Kỳ</option>
6
    <option value="japan">Nhật Bản</option>
7
  </select>
8
</form>

Hiệu ứng:

[!Tóm tắt]

• Thuộc tính selected dùng để chỉ định tùy chọn mặc định trong danh sách thả xuống.
• Thuộc tính disabled dùng để chỉ định danh sách thả xuống có khả dụng hay không.
• Bạn có thể sử dụng thuộc tính size để chỉ định số lượng tùy chọn hiển thị trong danh sách thả xuống.

Nút gửi (Submit, Reset, Button)

Biểu mẫu thường cần một nút để gửi hoặc xác nhận đầu vào của người dùng. submit, reset và button đều là các phần tử nút biểu mẫu trong HTML.

Ví dụ:

1
<form action="/submit" method="post">
2
  <input type="submit" value="Nút gửi">
3
  <input type="reset" value="Nút đặt lại">
4
  <button type="button" value="Nút xác nhận">Nút xác nhận</button>
5
  <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="Nút hình ảnh" width="50" height="50">
6
</form>

Hiệu ứng:

[!Tóm tắt]

• post: Đề cập đến phương thức HTTP POST, dữ liệu biểu mẫu được bao gồm trong phần thân biểu mẫu rồi gửi đến máy chủ, được sử dụng để gửi dữ liệu nhạy cảm như tên người dùng và mật khẩu.
• get: Giá trị mặc định, đề cập đến phương thức HTTP GET, dữ liệu biểu mẫu được thêm vào URL trong thuộc tính action với ? làm dấu phân cách, thường được sử dụng cho thông tin không nhạy cảm như phân trang. Ví dụ: https://www.zhaojian.net/?page=1, trong đó page=1 là dữ liệu được gửi qua phương thức get.

Các phần tử và thuộc tính biểu mẫu