Login

PHP Cơ bản

  Trang Chủ / Tin tức / PHP Cơ bản

Tạo Form HTML tạo bài viết với PHP

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

Cấu hình Vhost cho dự án blog.local

Trước tiên, chúng ta sẽ cấu hình vhost cho Wamp để chạy một dự án với domain là blog.local trỏ về folder code C:/wamp/www/blog

Để biết cách cấu hình vhost, tham khảo thêm bài viết: Cấu hình vhost trên Wampserver


Form 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="http://blog.local/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 thì địa chỉ thư mục gốc nếu dùng wamp này sẽ là C:/wamp/www/blog với hệ điều hành Ubuntu địa chỉ thư mục gốc này thường sẽ là /var/www/html/blog).

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à input và textarea. 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.

Để xem form, các bạn chạy url sau trên trình duyệt: http://blog.local/create.php

php php cơ bản tạo form với php

Danh Mục Lập Trình

Baobinh.net
TIN LIÊN QUAN
DANH MỤC GIAO DIỆN

Bài viết ngẫu nhiên

Danh mục lập trình