Bài F5. Tạo biểu mẫu trong trang web

1. Giới thiệu biểu mẫu trong trang web

• Biểu mẫu web là thành phần giúp người dùng nhập dữ liệu vào trang web, ví dụ: văn bản, số, mật khẩu, phương án chọn,...

• Biểu mẫu thường dùng khi:

  • Mua sắm trực tuyến (nhập thông tin thanh toán).

  • Đăng ký tài khoản.

  • Gửi góp ý hoặc phản hồi.

2. Tạo một số thành phần trong biểu mẫu

• Thẻ <form> dùng để tạo biểu mẫu:

<form action="địa_chỉ_trang_nhận_dữ_liệu" method="cách_gửi_dữ_liệu">
  Các thành phần của biểu mẫu
</form>

• Thuộc tính action: chỉ định địa chỉ nơi dữ liệu sẽ được gửi đến.

• Thuộc tính method: quy định phương thức gửi dữ liệu (GET hoặc POST).

a) Thành phần nhập liệu văn bản

• Dùng thẻ <input> với type="text":

<label for="hoten">Họ tên:</label><br>
<input type="text" id="hoten" name="hoten"><br>
<label for="lop">Lớp:</label><br>
<input type="text" id="lop" name="lop"><br>

• label: gắn nhãn cho input.

• input type="text": cho phép nhập chuỗi ký tự văn bản.

b) Một số kiểu input khác

Bảng 1. Các giá trị của thuộc tính type trong thẻ <input>

<label for="khmt">Khoa học máy tính</label><br>
<input type="radio" id="khmt" name="dinhhuong">
<label for="tin">Tin học ứng dụng</label><br>
<input type="radio" id="tin" name="dinhhuong">

<input type="checkbox" id="clbbongda" name="caulacbo">
<label for="clbbongda">CLB Bóng đá</label><br>
<input type="checkbox" id="clbvoinam" name="caulacbo">
<label for="clbvoinam">CLB Võ cổ truyền</label><br>
<input type="checkbox" id="clbvannghe" name="caulacbo">
<label for="clbvannghe">CLB Văn nghệ</label><br>

<textarea id="ykien" name="ykien" rows="10" cols="30">
</textarea><br>
<input type="submit" value="Gửi">