Tạo Bài Viết

Ở bài học này chúng ta sẽ tìm hiểu cách tạo một trang PHP với một form để người dùng có thể tạo bài viết.

Trang PHP Tạo Bài Viết

Đầu tiên bạn mở text editor lên và tạo một tập tin mới với nội dung như sau:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Form HTML</title>
</head>
<body>
    <form method="POST" action="save.php">
        <div>
            <input type="text" name="title" placeholder="Nhập tiêu đề">
        </div>
        <div>
            <textarea name="content" placeholder="Nhập nội dung"></textarea>
        </div>
        <button type="submit">Lưu</button>
    </form>
</body>
</html>

Sau đó bạn lưu tập tin trên với tên create.php vào địa chỉ thư mục gốc của web server trên máy tính của bạn (nếu sử dụng XAMPP cho Windows hoặc Mac OSX thì địa chỉ thư mục gốc này sẽ là \PATH_TO_XAMPP_FOLDER\htdocs với hệ điều hành Ubuntu địa chỉ thư mục gốc này thường sẽ là /var/www/html/).

Trang tạo bài viết ở trên chứa một form với hai thuộc tính:

  • Thuộc tính method="POST" quy định dữ liệu của form sẽ được gửi bằng phương thức HTTP POST.
  • Thuộc tính action="save.php" quy định tập tin save.php sẽ được dùng để xử lý request gửi dữ liệu form lên server. Hiện tại tập tin này chưa có, ở các bài học tiếp theo chúng ta sẽ thêm tập tin này sau.

Thêm HTML Validation

Bên trong form này có hai trường để nhập dữ liệu là inputtextarea. Khi người dùng tạo bài viết chúng ta muốn cả hai trường này cần được điền dữ liệu trước khi gửi dữ liệu trong form lên server.
Chúng ta có thể làm điều này bằng cách thêm các thuộc tính validation trong HTML dành cho hai thẻ trên. Bạn sửa lại đoạn code trong form thành như sau:

<form method="POST" action="save.php">
    <div>
        <input type="text" name="title" placeholder="Nhập tiêu đề" required="true">
    </div>
    <div>
        <textarea name="content" placeholder="Nhập nội dung" required="true"></textarea>
    </div>
    <button type="submit">Lưu</button>
</form>

Với việc thêm các thuộc tính required="true" vào hai thẻ ứng với hai trường nhập dữ liệu như trên thì khi người dùng không nhập dữ liệu và bấm nút gửi đi trình duyệt sẽ hiển thị cảnh báo lỗi thay vì gửi form dữ liệu đi.

Ngoài ra, bạn cũng có thể thử thêm vào các thuộc tính như minlength hay maxlength để giới hạn số lượng ký tự cho mỗi trường nhập dữ liệu.

Thêm Phản Hồi

Câu Hỏi Liên Quan

Hướng Dẫn Liên Quan