Bài 16: Form HTML và Upload file với PHP

I.  Giới thiệu về Form HTML và Upload:

Form được dùng phổ biến trong html, nhằm tạo ra các biểu mẫu, thu nhận các thông tin được gửi từ người dùng. Hay nói cách khác, thẻ form chính là cầu nối giữa người dùng và website. Bên cạnh đó, form HTML cũng hỗ trợ rất nhiều trong việc upload các file dữ liệu.

Form trong html được định nghĩa như sau:

Các  đối tượng form khác nhau như: input, checkboxs, radio buttons, submit button …..

II. Các loại thẻ form

1. Thẻ <Input>

Thẻ <input> trong form là một thẻ vô cùng quan trọng, nó có thể tạo ra rất nhiều các đối tượng khác nhau, Sự khác nhau đó phụ thuộc vào thuộc tính type.

Một số loại input thường được sử dụng:

Text Xác định dữ liệu vào dạng văn bản
Radio Xác định dữ liệu vào là các chọn lựa
Submit Định nghĩa một submit button, (submit dữ liệu form)

 

  • Thẻ text input

<input type = “text”>  nhập dữ liệu là một dòng đơn dạng text.

Vd:

  • Thẻ radio button

<input type = “radio> thẻ radio giới hạn người dùng chỉ được chọn một lựa chọn.

Vd:

  • Submit button

<input type = “submit”> dùng để submit form, gửi dữ liệu đi

Điều khiển dữ liệu form, chúng ta  sử dụng thuộc tính action

Vd:

Thuộc tính action:  thường là nơi nhận dữ liệu mà người dùng nhập vào. Khi ấn nút submit, dữ liệu sẽ được gửi đi. Nếu thuộc tính action bị bỏ qua, action sẽ mặc định là trang hiện tại.

Thuộc tính method: Định nghĩa cho dữ liệu được truyền đến action theo phương thức nào (GET hay POST)

Thuộc tính name: Tên của Form. Giá trị của thuộc tính là một đoạn text thể hiện tên của Form

  • Nhóm dữ liệu với thẻ <fieldset>

Thẻ <fieldset> dùng để nhóm dữ liệu trong form

Thẻ <legend> xác định tiêu đề cho nhóm dữ liệu <fieldset>

Vd:

2. Thẻ <select>

Dùng thẻ <select> để tạo một drop-down list.

Vd:

Thẻ <option> đưa ra các sự lựa chọn cho người dùng.

3. Thẻ <textarea>

Cho phép nhập vào chuoix text nhiều dòng.

4. Thẻ <button>

Tạo một button

Một số loại input khác:

Password Trường dữ liệu vào dạng password
Checkbox Lựa chọn không hoặc nhiều đối tượng
Number Dữ liệu nhập vào có giá trị số
Date, time, datetime, month, week Dữ liệu nhập vào có giá trị thời gian
Color Dữ liệu nhập vào là màu sắc
Email Dữ liệu là địa chỉ email
Search Dùng cho search field
Tel Dữ liệu số điện thoại
url Trường dữ liệu vào có chứa địa chỉ url

 

Một số thuộc tính

Value Dữ liệu mặc định cho form
Readonly Dữ liệu của thẻ input không thể chinh sửa
Size Size ký tự của input
Maxlenght Độ dài tối đa của input
Height và width Xác định chiều cao và rộng của dữ liệu, chỉ được dùng cho <input type = “image”>
Placeholder Các gợi ý mô tả giá trị input cần nhập

III.        Upload file trong PHP

Với PHP thật dễ dàng để upload file lên server.

1. “php.ini” File

Trước tiên, để có thể upload file lên server bạn cần chắc chắn đã mở chức năng upload file. Trong file “php.ini” tìm đến giá trị file_uploads và đưa nó về giá trị on

2. Tạo html form

tiếp theo, tạo một file html form  tương tác với người dùng, cho phép người dùng lựa chọn file muốn upload.

Lưu ý:

  • Chắc chắn rằng form của bạn sử dụng method = “post”
  • Thêm thuộc tính enctype=”multipart/form-data” cho form
  • Thẻ input type=”file” để upload file

3. tạo file xử lý upload: “upload.php”

  • $target_dir = “uploads/” : thư mục chứa file sau khi upload
  • $target_file: chỉ rõ đường dẫn của file đã đươc upload

Kiểm tra sự tồn tại của file

Giới hạn size của file được upload

Giới hạn loại file upload:

Đoạn code dưới đây chỉ cho phép người dùng upload các loại file có định dạng: JPG, JPEG, PNG, GIF.  Tất cả cá định dạng file khác bốn loại trên đều sẽ báo lỗi.

Code hoàn chỉnh cho file xử lý upload “upload.php” sẽ như sau:

 

Reference : W3schools.com

Translator: IS05

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">