XỬ LÝ BIỂU MẪU VÀ GỬI DỮ LIỆU
158
Chương 5 XỬ LÝ BIỂU MẪU VÀ GỬI DỮ LIỆU
5.1. Giới thiệu về biểu mẫu trong PHP
5.1.1. Khái niệm biểu mẫu
• Biểu mẫu (form) là một thành phần của trang web, cho phép người dùng nhập
và gửi dữ liệu đến máy chủ để xử lý.
• Biểu mẫu chứa các phần tử nhập liệu như ô văn bản, nút radio, hộp kiểm, trình
đơn chọn, nút gửi, ...
• Dữ liệu từ biểu mẫu được gửi đến máy chủ thông qua các phương thức HTTP
(GET hoặc POST).
5.1.2. Tầm quan trọng của biểu mẫu
• Thu thập dữ liệu từ người dùng: Biểu mẫu là cách chính để thu thập thông tin
từ người dùng, chẳng hạn như thông tin đăng ký, đăng nhập, tìm kiếm, liên hệ, ...
• Tương tác người dùng: Biểu mẫu tạo sự tương tác giữa người dùng và ứng dụng
web, cho phép người dùng thực hiện các hành động và nhận phản hồi.
• Xử lý và lưu trữ dữ liệu: Dữ liệu từ biểu mẫu có thể được xử lý trên máy chủ để
thực hiện các hành động như kiểm tra tính hợp lệ, lưu trữ thông tin vào cơ sở dữ liệu, gửi
email hoặc thực hiện các tác vụ khác.
5.2. Xây dựng biểu mẫu HTML
Biểu mẫu HTML là cách phổ biến để thu thập dữ liệu từ người dùng. Việc xây
dựng biểu mẫu đúng cách là bước đầu tiên quan trọng trong việc xử lý dữ liệu người
dùng.
5.2.1. Cấu trúc cơ bản của biểu mẫu HTML
Cấu trúc cơ bản của một biểu mẫu HTML bao gồm các thẻ nhập liệu khác nhau
được chứa trong cặp thẻ <form> và </form>.
• Thẻ <form>: Đây là thẻ bao quanh các phần tử nhập liệu và nút gửi dữ liệu của
biểu mẫu.
• Các thuộc tính quan trọng của thẻ <form>:
o action: Xác định URL sẽ nhận và xử lý dữ liệu biểu mẫu khi biểu mẫu
được gửi đi.
o method: Xác định phương thức gửi dữ liệu. Có hai giá trị chính:
XỬ LÝ BIỂU MẪU VÀ GỬI DỮ LIỆU
159
▪ GET: Gửi dữ liệu dưới dạng chuỗi truy vấn (query string) trong URL
và hiển thị công khai.
▪ POST: Gửi dữ liệu dưới dạng thân yêu cầu (request body), bảo mật
hơn và không hiển thị trên URL.
Ví dụ:
<form action="xuly.php" method="post">
<!-- Các phần tử nhập liệu -->
</form>
5.2.2. Các thẻ nhập liệu cơ bản
• Thẻ <input>: Là thẻ phổ biến nhất trong các biểu mẫu HTML, được sử dụng
để tạo ra các loại nhập liệu khác nhau như văn bản, mật khẩu, email, số, nút gửi, ... Các
thuộc tính quan trọng của thẻ <input> bao gồm:
o type: Xác định loại dữ liệu nhập liệu (text, password, email, number,
submit, …).
o name: Tên của trường dữ liệu, được gửi tới server.
o id: Định danh duy nhất cho trường dữ liệu.
o value: Giá trị mặc định của trường dữ liệu.
o placeholder: Văn bản gợi ý hiển thị trong trường nhập liệu.
o required: Xác định trường bắt buộc phải nhập.
o maxlength: Độ dài tối đa của văn bản có thể nhập vào.
o min và max: Giá trị tối thiểu và tối đa cho các trường kiểu số.
o pattern: Biểu thức chính quy để xác thực đầu vào.
Ví dụ:
<form action="register.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter
your username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="example@domain.com" required>
<label for="age">Age:</label>
XỬ LÝ BIỂU MẪU VÀ GỬI DỮ LIỆU
160
<input type="number" id="age" name="age" min="1" max="100" required>
<input type="submit" value="Submit">
</form>
• Thẻ <textarea>: Được sử dụng để tạo trường nhập liệu nhiều dòng. Các thuộc
tính quan trọng bao gồm:
o name: Tên của trường dữ liệu, được gửi tới server.
o id: Định danh duy nhất cho trường dữ liệu.
o rows và cols: Số dòng và số cột của trường nhập liệu.
o placeholder: Văn bản gợi ý hiển thị trong trường nhập liệu.
o maxlength: Độ dài tối đa của văn bản có thể nhập vào.
Ví dụ:
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter
your message here..."></textarea>
• Thẻ <select> và <option>: Được sử dụng để tạo ra danh sách lựa chọn, với
mỗi tùy chọn được định nghĩa bằng thẻ <option>. Các thuộc tính quan trọng bao gồm:
o name: Tên của trường dữ liệu, được gửi tới server.
o id: Định danh duy nhất cho trường dữ liệu.
o multiple: Cho phép chọn nhiều tùy chọn.
Ví dụ:
<label for="country">Country:</label>
<select id="country" name="country">
<option value="vn">Vietnam</option>
<option value="us">USA</option>
<option value="uk">UK</option>
<option value="jp">Japan</option>
<option value="kr">Korea</option>
<option value="ge">German</option>
</select>
• Thẻ <button>: Được sử dụng để tạo ra các nút bấm trong biểu mẫu. Các thuộc
tính quan trọng bao gồm:
o type: Xác định loại nút (submit, reset, button).
o name: Tên của nút, được gửi tới server (chỉ dùng với submit hoặc reset).
o value: Giá trị của nút, được gửi tới server (chỉ dùng với submit hoặc reset).
Ví dụ:
XỬ LÝ BIỂU MẪU VÀ GỬI DỮ LIỆU
161
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Clicked!')">Click Me</button>
• Thẻ <input> với các loại khác:
o type="radio": Tạo ra nút chọn cho phép người dùng chọn một trong nhiều
tùy chọn. Các nút radio cùng nhóm phải có cùng tên (name).
Ví dụ:
<label><input type="radio" name="gender" value="male" checked> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
o type="checkbox": Tạo ra ô kiểm cho phép người dùng chọn hoặc bỏ chọn
nhiều tùy chọn.
Ví dụ:
<label><input type="checkbox" name="interest" value="coding">
Coding</label>
<label><input type="checkbox" name="interest" value="music"> Music</label>
o type="file": Tạo ra trường để tải lên tập tin.
Ví dụ:
<label for="file">Upload file:</label>
<input type="file" id="file" name="file">
5.2.3. Thiết kế biểu mẫu
• Tạo một biểu mẫu đăng ký cơ bản bao gồm username, password, email và tuổi.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="register.php" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</div>
<div>
<label for="email">Email:</label>
XỬ LÝ BIỂU MẪU VÀ GỬI DỮ LIỆU
162
<input type="email" id="email" name="email">
</div>
<div>
<label for="age">Age:</label>
<input type="number" id="age" name="age">
</div>
<div class="button">
<button type="submit">Register</button>
</div>
</form>
</body>
</html>
• Tạo biểu mẫu đăng nhập cơ bản chỉ bao gồm 2 ô nhập username và password.
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<form action="login.php" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</div>
<div class="button">
<button type="submit">Login</button>
</div>
</form>
</body>
</html>
• Sử dụng CSS để làm đẹp biểu mẫu: Thêm đoạn css bên dưới vào trong cặp thẻ
<head> và </head> của đoạn mã tạo biểu mẫu đăng ký và đăng nhập.
<style>
form {
width: 300px;
margin: 0 auto;
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;