Hướng dẫn html form submit save data - biểu mẫu html gửi lưu dữ liệu

Tôi đang sử dụng Trisquel 7.0. Tôi đã một số kiến ​​thức cơ bản về HTML và JavaScript. Bây giờ tôi muốn lưu dữ liệu biểu mẫu HTML vào tệp (cũng quan tâm đến việc tải/điền vào biểu mẫu HTML từ tệp).

Tôi đã tìm kiếm và thấy rằng điều này sẽ có thể với PHP, v.v. nhưng tôi không biết làm thế nào. Là người mới bắt đầu vào thời điểm này, tôi chỉ muốn lưu thông tin văn bản trong tệp văn bản chỉ đơn giản từ mẫu HTML.

Dưới đây tôi đang viết ví dụ đơn giản với dạng HTML đơn giản và chức năng JavaScript (không có bất kỳ hành động nào)


Bây giờ tôi muốn lưu văn bản từ

   


 myform


  
0 vào tệp tệp văn bản, giả sử
   


 myform


  
1. Tất cả dữ liệu/tệp được truy cập cục bộ trên PC của tôi. Vì vậy, làm thế nào tôi có thể làm điều đó? Với PHP hoặc JavaScript ?; Sau đó như thế nào? (Cho tôi một số tập lệnh/thông tin cơ bản).


Cũng đề xuất tôi tài nguyên bên ngoài để học biểu mẫu HTML tương tác với cơ sở dữ liệu.

Đã hỏi ngày 26 tháng 1 năm 2015 lúc 7:18Jan 26, 2015 at 7:18

Hướng dẫn html form submit save data - biểu mẫu html gửi lưu dữ liệu

PandyapandyaPandya

1982 Huy hiệu vàng4 Huy hiệu bạc19 Huy hiệu đồng2 gold badges4 silver badges19 bronze badges

6

Nếu bạn muốn lưu dữ liệu biểu mẫu ở phía máy chủ, tôi sẽ làm điều đó với PHP như thế này:

   


 myform


  
  • Bản thân tập tin cần phải là một tệp PHP.
  • Không có xác thực biểu mẫu được thực hiện trong ví dụ này
  • Máy chủ web cần quyền viết trong $ TargetFolder

Tuy nhiên, nếu bạn muốn lưu dữ liệu ở phía máy khách, thông thường bạn làm điều đó với bộ lưu trữ cục bộ. Nhưng hãy nhớ rằng chỉ có khách hàng mới có thể truy cập dữ liệu lưu trữ cục bộ của mình. Dưới đây là một ví dụ: Lưu trữ các đối tượng trong HTML5 LocalStorage

Đã trả lời ngày 26 tháng 1 năm 2015 lúc 7:24Jan 26, 2015 at 7:24

Mario Amario aMario A

3.2761 Huy hiệu vàng16 Huy hiệu bạc22 Huy hiệu đồng1 gold badge16 silver badges22 bronze badges

0

Điều gì về điểm sử dụng các biểu mẫu thông minh, trực tuyến trong quy trình công việc định kỳ của bạn nếu bạn vẫn phải cập nhật (các) cơ sở dữ liệu của mình với thông tin từ các biểu mẫu đã hoàn thành?

Đó là một việc sử dụng không hiệu quả của các nguồn lực và thời gian, dễ bị phiên mã.

Trình kết nối cơ sở dữ liệu Withfrevvo, bạn có thể dễ dàng lưu dữ liệu từ các biểu mẫu HTML vào cơ sở dữ liệu SQL của mình, cải thiện tính hợp lệ của năng suất và dữ liệu. frevvo’s Database Connector, you can easily save data from HTML forms to your SQL database, improving your productivity and data validity.

Hãy để đặt ra chính xác cách bạn có thể sử dụng trình kết nối cơ sở dữ liệu để kết nối các biểu mẫu trực tuyến với cơ sở dữ liệu SQL của bạn.

Bắt đầu đọc bên dưới, hoặc nhảy ngay vào một phần:

  • Đầu nối cơ sở dữ liệu của FREVVO: Tổng quan
  • Vậy làm cách nào để kết nối biểu mẫu HTML của tôi với cơ sở dữ liệu của tôi?
  • Sử dụng trường hợp: tạo một đơn đặt hàng mới
  • Trường hợp sử dụng: Tạo/Cập nhật hồ sơ
  • Sử dụng trường hợp: chèn nhiều bản ghi

Đầu nối cơ sở dữ liệu của FREVVO: Tổng quan

Vậy làm cách nào để kết nối biểu mẫu HTML của tôi với cơ sở dữ liệu của tôi?

Sử dụng trường hợp: tạo một đơn đặt hàng mới

Hướng dẫn html form submit save data - biểu mẫu html gửi lưu dữ liệu

Trường hợp sử dụng: Tạo/Cập nhật hồ sơ

Sử dụng trường hợp: chèn nhiều bản ghi

Đây là một bài viết khá kỹ thuật có chứa các truy vấn SQL, JavaScript, v.v.

Hướng dẫn html form submit save data - biểu mẫu html gửi lưu dữ liệu

Đầu nối cơ sở dữ liệu Restful của FREVVO sử dụng Ngôn ngữ đánh dấu mở rộng (XML) và ký hiệu đối tượng JavaScript (JSON) để kết nối các biểu mẫu HTML và cơ sở dữ liệu SQL của bạn thông qua kết nối HTTPS an toàn. & NBSP;

  • FREVVO xử lý tất cả các phép biến đổi dữ liệu - JSON, XML, SQL - Dành cho bạn theo cả hai hướng: Mẫu HTML sang cơ sở dữ liệu và cơ sở dữ liệu để hình thành.
  • Một truy vấn SQL có thể trả về một hàng hoặc nhiều hàng, mỗi hàng có nhiều cột. Nhờ đầu nối cơ sở dữ liệu, biểu mẫu sẽ tự động cập nhật để hiển thị cho bạn thông tin liên quan đến yêu cầu của bạn - ở định dạng dễ đọc.
  • Ngược lại, đầu nối DB sẽ dịch dữ liệu của người dùng từ JSON hoặc XML sang SQL để giữ cho cơ sở dữ liệu hài lòng.
  • Tích hợp các biểu mẫu và cơ sở dữ liệu của bạn bằng Trình kết nối FREVVO có nghĩa là:
  • Ít nhập dữ liệu (và năng suất cao hơn)
  • Ít lỗi và thiếu sót & nbsp;
  • Kết nối tự động gộp, thử lại, v.v.

Bảo vệ chống tiêm SQL và các cuộc tấn công khác & NBSP;

Các truy vấn phức tạp như SQL tham gia

Kết nối được mã hóa để bảo mật cao hơn

Thực hiện nhanh chóng với mã hóa tối thiểu

  1. Chúng tôi đã thảo luận về cách bạn có thể sử dụng trình kết nối cơ sở dữ liệu để tự động dân cư từ cơ sở dữ liệu. Hãy cùng xem xét kỹ hơn về cách nó hoạt động ngược lại.
  2. Vậy làm cách nào để kết nối biểu mẫu HTML của tôi với cơ sở dữ liệu của tôi?
  3. Lưu ý: Các bước sau đây yêu cầu tài khoản FREVVO. Bạn có thể đăng ký để thử frevvo miễn phí trong 30 ngày.
  4. Với frevvo, các bước rất đơn giản:
  5. Cài đặt đầu nối cơ sở dữ liệu.

Định cấu hình đầu nối bằng SQL hoặc các thủ tục được lưu trữ.

Sử dụng trường hợp: tạo một đơn đặt hàng mới

Trường hợp sử dụng: Tạo/Cập nhật hồ sơ

Hướng dẫn html form submit save data - biểu mẫu html gửi lưu dữ liệu

Sử dụng trường hợp: chèn nhiều bản ghi

Đây là một bài viết khá kỹ thuật có chứa các truy vấn SQL, JavaScript, v.v.


           
               
                   SELECT orderNumber as onum, customerNumber as cnum from Orders
                   WHERE orderNumber=10100
           
           
               INSERT into Orders (orderNumber,orderDate, requiredDate, status,customerNumber)
                   VALUES ({onum}, Now(), Now(), 'In Process', {cnum})
               
           
       

Đầu nối cơ sở dữ liệu Restful của FREVVO sử dụng Ngôn ngữ đánh dấu mở rộng (XML) và ký hiệu đối tượng JavaScript (JSON) để kết nối các biểu mẫu HTML và cơ sở dữ liệu SQL của bạn thông qua kết nối HTTPS an toàn. & NBSP;

FREVVO xử lý tất cả các phép biến đổi dữ liệu - JSON, XML, SQL - Dành cho bạn theo cả hai hướng: Mẫu HTML sang cơ sở dữ liệu và cơ sở dữ liệu để hình thành.

Một truy vấn SQL có thể trả về một hàng hoặc nhiều hàng, mỗi hàng có nhiều cột. Nhờ đầu nối cơ sở dữ liệu, biểu mẫu sẽ tự động cập nhật để hiển thị cho bạn thông tin liên quan đến yêu cầu của bạn - ở định dạng dễ đọc.

Ngược lại, đầu nối DB sẽ dịch dữ liệu của người dùng từ JSON hoặc XML sang SQL để giữ cho cơ sở dữ liệu hài lòng.


            
                SELECT max(orderNumber) + 1 as onum FROM Orders
            
        

Một lần nữa, đây là một sự đơn giản hóa cho mục đích hướng dẫn. Trong thực tế, các số thứ tự có thể được tạo bởi ứng dụng bên ngoài thay vì cơ sở dữ liệu.

2. Tạo lược đồ XML

Trong trình duyệt của bạn, hãy truy cập URL có liên quan cho đầu nối cơ sở dữ liệu của bạn, ví dụ: http: // localhost: 8082/cơ sở dữ liệu/birt/createser/lược đồ. Lưu tệp lược đồ XML kết quả vào đĩa.

Chỉnh sửa tệp. Do giới hạn hiện tại trong đầu nối cơ sở dữ liệu, lược đồ được tạo cần phải được chỉnh sửa. Xóa thuộc tính MaxOccurs = không giới hạn khỏi khai báo phần tử hàng. Thay thế:

with

Cuối cùng, tải lên lược đồ lên các hình thức trực tiếp. Xem nguồn dữ liệu để được hướng dẫn.

3. Tạo biểu mẫu

  1. Tạo một biểu mẫu và định cấu hình nó bằng cách sử dụng trình tạo biểu mẫu kéo và thả. (Dưới đây là một số hướng dẫn chi tiết về bắt đầu.)
  2. Trong bảng thuộc tính bên trái, hãy mở ngăn nguồn dữ liệu bằng cách nhấp vào nó.
  3. Nhấp vào mới từ XSD.
  4. Bạn sẽ thấy lược đồ của bạn trong hộp thoại kết quả. Mở rộng nó và thêm phần tử ‘createdererous vào biểu mẫu bằng cách nhấp vào biểu tượng + bên cạnh nó.
  5. Đóng hộp thoại bằng cách nhấp vào ‘X, ở góc trên cùng bên phải.
  6. Trong khung nguồn dữ liệu, mở rộng nguồn dữ liệu CreatErder bằng cách nhấp vào biểu tượng + bên trái.
  7. Nhấp vào biểu tượng + bên cạnh phần tử hàng. Các biểu mẫu trực tiếp sẽ tạo ra các điều khiển trong biểu mẫu.
  8. Bạn có thể kéo và thả để sắp xếp lại như bạn muốn.
  9. Đổi tên phần có tên ‘Hàng, thành‘ Thông tin đặt hàng.

Bước này tạo ra các điều khiển được liên kết với nguồn dữ liệu CreatErder bằng các biểu mẫu trực tiếp. Bạn có thể hiển thị các điều khiển như bạn muốn nhưng các biểu mẫu trực tiếp sẽ luôn tạo tài liệu XML phù hợp với lược đồ XML ở trên.

Tạo quy tắc kinh doanh

  1. Nhấp vào nút ‘Quy tắc trên thanh công cụ ở đầu Trình thiết kế biểu mẫu.
  2. Nhấp + để tạo quy tắc mới và nút ‘Chỉnh sửa để mở quy tắc.
  3. Đặt tên thành ‘Sao chép số khách hàng và tạo số đơn đặt hàng.

Trong khu vực văn bản ‘quy tắc: Sao chép và dán những như sau:

/*member onum, resultSet */
if (sc.value.length > 0) {
  cnum.value = sc.value;
  eval ('x=' + http.get('http://localhost:8082/database/BIRT/getOrderNumber'));
  onum.value = x.resultSet[0].onum;
}

Hãy để phân tích quy tắc này.

  1. Nếu (sc.value.length> 0) - Điều này ngụ ý rằng quy tắc sẽ thực thi khi khách hàng chọn rơi xuống có giá trị và giá trị thay đổi.
  2. cnum.value = sc.value; Chỉ cần sao chép số khách hàng vào điều khiển CNUM.
  3. Eval (‘x = xông + http.get (‘ http: // localhost: 8082/cơ sở dữ liệu/birt/getordernumber,)) - Điều này nhận được số đơn đặt hàng http nhận được.
  4. onum.value = x.Resultset [0] .onum; Sao chép số thứ tự từ kết quả được đặt vào điều khiển onum.

4. Liên kết đến cơ sở dữ liệu

Bây giờ, chúng tôi kết nối các điều khiển được tạo với truy vấn cơ sở dữ liệu được xác định ở trên. Xem Doc Uri Wizards để được giúp đỡ trên các bước dưới đây.

  1. Nhấp vào biểu tượng Gear Properties Gear trong thanh công cụ ở đầu biểu mẫu.
  2. Trong hộp thoại Thuộc tính xuất hiện, nhấp vào hành động tài liệu. Bạn có thể phải cuộn sang phải.
  3. Nhấp vào Gửi dữ liệu và chọn tùy chọn ‘Đặt tài liệu theo cách thủ công.
  4. Cuộn xuống cho đến khi bạn thấy tài liệu có tên ‘creatEder, đó là nguồn dữ liệu mà chúng tôi quan tâm.
  5. Để trống URL đọc và các trường Phương thức.
  6. Đặt URL ghi thành: http: // localhost: 8082/cơ sở dữ liệu/birt/createder. Bạn cần phải thay đổi LocalHost: 8082 thành máy chủ: Cổng nơi bạn đã cài đặt trình kết nối cơ sở dữ liệu.
  7. Đặt phương thức ghi để đăng.
  8. Nhấp vào nút Gửi.
Hướng dẫn html form submit save data - biểu mẫu html gửi lưu dữ liệu

Bước này chỉ ra các biểu mẫu trực tiếp rằng tài liệu ‘createderer được liên kết với URL trên thông qua bài viết phương thức ghi.

Khi biểu mẫu được gửi, các biểu mẫu trực tiếp sẽ phát hành yêu cầu bài đăng HTTP cho URL trên gửi tài liệu CreatErder XML trong tải trọng. Trình kết nối cơ sở dữ liệu sẽ ánh xạ này đến hoạt động của truy vấn CreatEder mà chúng tôi đã xác định ở trên, sẽ sử dụng dữ liệu trong tài liệu XML để giải quyết truy vấn (thay thế {cnum} và {onum} với các giá trị từ XML) và thực hiện chèn.

Nói cách khác, dữ liệu từ biểu mẫu HTML của bạn sẽ lưu vào cơ sở dữ liệu của bạn.

Hãy cùng xem xét thêm một vài trường hợp sử dụng. & NBSP;

Trường hợp sử dụng: Tạo/Cập nhật hồ sơ

Nhiều vấn đề kinh doanh yêu cầu tạo hồ sơ mới hoặc cập nhật các hồ sơ hiện có trong cơ sở dữ liệu. Hãy cùng xem cách bạn có thể tạo các biểu mẫu phức tạp mà không cần lập trình bằng Trình kết nối cơ sở dữ liệu FREVVO (DB). & NBSP;

Cảnh báo công bằng: Đây là một chủ đề khá kỹ thuật vì vậy chúng tôi chỉ chạm vào những điểm nổi bật ở đây. Bạn có thể khám phá chi tiết bằng cách đọc hướng dẫn kết nối DB trong tài liệu.

1. Xác định truy vấn SQL

Bước đầu tiên là xác định truy vấn. Bạn có thể nhận thấy rằng truy vấn cụ thể này có một hoạt động ngoài hoạt động thông thường.


            
                
                    SELECT
                        "customerNumber" as "cnum","customerName","creditLimit"
                    FROM
                        "Customers"
                    WHERE
                        "customerNumber"={cnum}
                
            
            
                
                    UPDATE "Customers" SET
                        "creditLimit" = {creditLimit}
                    WHERE
                        "customerNumber"={cnum}
                
            

2. Tạo lược đồ XML

Truy vấn đầu tiên được sử dụng để tạo lược đồ XML và các điều khiển hình thức liên kết với lược đồ đó. Sẽ có hai (onum và cnum). Trong trường hợp này, bạn sẽ phải sửa đổi XML một chút do giới hạn hiện tại trong đầu nối DB. Xem tài liệu để biết hướng dẫn chi tiết.

3. Tạo biểu mẫu

Tạo biểu mẫu bằng cách sử dụng Trình tạo hình thức động không có mã FREVVO và sử dụng lược đồ XML ở trên làm nguồn dữ liệu. Xem nguồn dữ liệu để biết hướng dẫn chi tiết hơn.

4. Liên kết đến cơ sở dữ liệu

Kết nối nó với truy vấn SQL được xác định ở trên. Chúng tôi sử dụng Wizards Doc URI, với thay đổi duy nhất là chúng tôi định cấu hình URL ghi bằng bài HTTP (Tạo) thay vì URL đọc.

Đó là nó. Khi biểu mẫu được gửi, FREVVO sẽ tạo một tài liệu XML với các giá trị cho onum và cnum và gửi XML đến đầu nối DB. Trình kết nối sẽ trích xuất onum và cnum từ XML và thực hiện thao tác chèn. & Nbsp;

Sử dụng trường hợp: chèn nhiều bản ghi

Nó dễ dàng xây dựng theo nguyên tắc này để đáp ứng các yêu cầu kinh doanh phức tạp hơn nhiều. & NBSP;

Ví dụ: trong trường hợp sử dụng này, bạn muốn chèn một đơn đặt hàng nhưng cũng sẽ có nhiều mục dòng đơn hàng. Điều này có nghĩa là chạy chèn cho đơn hàng + nhiều chèn cho các mục dòng với dữ liệu khác nhau. & NBSP;

May mắn thay, với FREVVO, bạn có thể tạo các biểu mẫu với nhiều nguồn dữ liệu. Mỗi người tạo ra tài liệu XML của riêng mình và mỗi tài liệu có thể có tài liệu riêng của mình.

Hướng dẫn html form submit save data - biểu mẫu html gửi lưu dữ liệu
Một biểu mẫu FREVVO duy nhất có thể xử lý nhiều tài liệu và thực hiện nhiều truy vấn SQL khi biểu mẫu được gửi.

Tự động tạo hàng

Bạn cũng có thể thiết lập các truy vấn để trước tiên họ sẽ thử bản cập nhật và nếu không thành công, hãy tạo một bản ghi mới.

Tính năng tạo tự động đặc biệt hữu ích khi làm việc với các điều khiển hoặc bảng lặp lại. Với các điều khiển này, các hình thức của bạn có thể làm việc với các bộ sưu tập động, ví dụ: khách hàng, xe hơi, địa chỉ, người phụ thuộc và những người khác. Khi người dùng tải biểu mẫu, biểu mẫu có thể được khởi tạo với một số mục. & NBSP;

Nếu người dùng thêm các mục mới vào bộ sưu tập, hãy cập nhật một cặp và gửi biểu mẫu, các mục sẽ được tự động thêm vào cơ sở dữ liệu và các mục hiện tại sẽ được cập nhật nếu autoCreate = true.

Tự động xóa hàng

Tự động tạo đặt ra câu hỏi rõ ràng: Điều gì sẽ xảy ra nếu người dùng xóa một hàng khỏi bộ sưu tập lặp lại được mô tả ở trên? Nếu bạn muốn đầu nối DB xóa các bản ghi tương ứng khỏi cơ sở dữ liệu, bạn chỉ cần đặt thuộc tính Autodelete và cung cấp khóa.

Đằng sau hậu trường, trình kết nối so sánh các mục trong cơ sở dữ liệu với những gì được gửi trong biểu mẫu. So sánh đó dựa trên khóa mà bạn xác định với Xóa thuộc tính (bắt buộc). Giá trị xóa thường là tên của khóa chính trong bảng chứa các mục lặp lại.

Bạn muốn kết nối các biểu mẫu với cơ sở dữ liệu của bạn?

Đầu nối cơ sở dữ liệu của FREVVO làm cho nó dễ dàng. Hãy thử frevvo miễn phí trong 30 ngày.

Làm thế nào chúng ta có thể lưu trữ dữ liệu đầu vào trong HTML?

Đầu vào tài sản giá trị văn bản..
Thay đổi giá trị của trường văn bản: getEuityById ("mytext").....
Nhận giá trị của trường văn bản: getEuityById ("mytext").....
Danh sách thả xuống trong một biểu mẫu: Var mylist = Document.....
Một danh sách thả xuống khác: Var No = Document.....
Một ví dụ cho thấy sự khác biệt giữa thuộc tính DefaultValue và giá trị:.

Dữ liệu hình thức HTML được lưu trữ ở đâu?

HTML Web Storage cung cấp hai đối tượng để lưu trữ dữ liệu trên máy khách: window.localstorage - Lưu trữ dữ liệu không có ngày hết hạn.window.SessionStorage - Lưu trữ dữ liệu cho một phiên (dữ liệu bị mất khi tab Trình duyệt được đóng)window.localStorage - stores data with no expiration date. window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

Điều gì xảy ra khi biểu mẫu được gửi trong HTML?

Hầu hết các biểu mẫu HTML đều có nút gửi ở dưới cùng của biểu mẫu.Khi tất cả các trường trong biểu mẫu đã được điền vào, người dùng nhấp vào nút gửi để ghi lại dữ liệu biểu mẫu.Hành vi tiêu chuẩn là thu thập tất cả các dữ liệu được nhập vào biểu mẫu và gửi nó đến một chương trình khác để được xử lý.gather all of the data that were entered into the form and send it to another program to be processed.