Hãy lấy đoạn trích từ //www.w3schools.com/html/html_forms.asp
First name:
Last name:
Lưu ý Dòng đầu tiên: Khi gửi mẫu, tập lệnh PHP được gọi là: action_page.php.
action_page.php là trang web của bạn với biểu mẫu và tập lệnh PHP được nhúng. action_page.php Cả hai đều hiển thị biểu mẫu trống và sau đó xử lý dữ liệu đã gửi.
Trên dòng đầu tiên cũng được chỉ định rằng dữ liệu đã gửi được gửi bằng phương thức
Phần PHP sẽ trông như thế này:
Câu lệnh
action_page.php được tải mục đích của nó chỉ để hiển thị biểu mẫu và không nhận được bất kỳ dữ liệu bài đăng nào.Khi biểu mẫu được gửi bởi người dùng, tập lệnh sẽ nhận dữ liệu và lưu trữ vào tệp.
Kịch bản cũng sẽ [với cách tiếp cận này] hiển thị lại một biểu mẫu trống đã sẵn sàng cho việc gửi một mục khác.
Bạn có thể sắp xếp lại mọi thứ để có hai trang web: một chỉ có biểu mẫu, một trang khác có thông báo "cảm ơn" và tập lệnh PHP xử lý dữ liệu.
Tóm tắt: Biểu mẫu HTML/JavaScript lưu đầu vào của người dùng vào tệp văn bản ở định dạng đánh dấu với vật chất phía trước YAML để sử dụng trên máy tính cục bộ của bạn. Sử dụng để nhanh chóng tạo một bài đăng để xuất bản với một trình tạo trang web tĩnh như Hugo hoặc Jekyll.quickly create a post for publishing with a static website generator such as Hugo or Jekyll.
Sau khi một trang web thiết kế lại quy trình công việc xuất bản ảnh của tôi như sau:
- Sau khi chọn một bức ảnh trong Lightroom, tôi xuất nó vào thư mục
4 của trang web do Hugo cung cấp trên máy tính của tôi. - Tôi tạo một tệp văn bản đơn giản [trong trường hợp của tôi, ở định dạng đánh dấu với vấn đề mặt trước của YAML] chỉ định tiêu đề, ngày, vị trí, thẻ, v.v. và lưu nó trong thư mục
5. - Tôi nhập
6 vào thiết bị đầu cuối để Hugo tạo trang web với những thay đổi mới nhất và RSYNC xuất bản chúng ở đây tại simongriffee.com.
Mở một trình soạn thảo văn bản và viết ra thông tin cần có thời gian vì vậy tôi nghĩ rằng tôi đã cố gắng làm cho quy trình làm việc nhanh hơn. Có lẽ tôi đã viết một tập lệnh Lightroom để xuất bản một bức ảnh thông tin EXIF vào một tệp văn bản, nhưng thay vào đó đã quyết định tạo một biểu mẫu HTML với một số JavaScript để làm điều tương tự.
Tôi đã làm điều này bởi vì:
- Như thường thấy với lập trình web, người khác đã thực hiện hầu hết các công việc.someone else had already done most of the work.
- Bất cứ ai có trình duyệt web đều có thể sử dụng tập lệnh và nó có thể được sửa đổi cho các trường hợp sử dụng khác.can be modified for other use cases.
- Một biểu mẫu web là giao diện người dùng quen thuộc với các lợi thế tích hợp được cung cấp bởi trình duyệt như nhấn phím tab để chuyển sang trường tiếp theo và ghi nhớ đầu vào trước đó với AutoClete cho các mục nhập lặp đi lặp lại. Ví dụ: nếu tôi thường xuất bản ảnh được chụp ở thành phố New York, sử dụng trường đầu vào biểu mẫu như vị trí: hãy để tôi nhập chữ N đồng ruộng.web form is a familiar user interface with built-in advantages provided by the browser like pressing the Tab key to go to the next field and remembering previous input with autocomplete for repetitive entries. For example, if I often publish photos taken in New York City, using a form input field like Location: lets me type the letter N, press the ↓ down arrow and then press Tab to fill in the previously entered value and move to the next field.
Ở đây, một bản demo. Đi trước và điền vào và nhấp vào nút Lưu vào Tệp:
Bài viết mới
Vị trí tiêu đề
Location
Cảm nhận Tags Nội dung Tên tệp
Tags
Content
Filename
Để sử dụng:
- Tải xuống và lưu index.html vào máy tính để bàn của bạn hoặc bất kỳ vị trí nào trên máy tính của bạn.
- Nếu bạn thích, chỉnh sửa
7 để thêm các trường vấn đề phía trước của riêng bạn. Điều này liên quan đến việc sửa đổi JavaScript và HTML. Nhận xét chỉ ra các trường này có mặt trong mã. - Mở
7 cục bộ với trình duyệt web của bạn, điền vào các trường biểu mẫu và nhấp vào Lưu vào tệp. Bạn cũng có thể đặt
7 vào một thư mục trên máy chủ web của mình để bạn có thể truy cập nó từ bất kỳ máy tính nào, như tôi đã làm ở đây.
Tôi đã thử nghiệm kịch bản trên phiên bản Firefox mới nhất trên Mac OS. Nó cũng hoạt động trên Chrome, nhưng AutoComplete dường như không hoạt động trừ khi các trường biểu mẫu được bọc trong thẻ mẫu với thuộc tính AutoComplete [
* { box-sizing: border-box; }
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text], textarea, select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button]{
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
-- Choose the country --
India
Japan
USA
0] và khi tôi thực hiện việc này, toàn bộ biểu mẫu biến mất trong Firefox. Tôi đã điều tra và đánh giá cao các yêu cầu kéo trên Gitlab. Tôi đang chia sẻ một ví dụ đơn giản ở đây hôm nay để giải thích cách bạn có thể lưu dữ liệu biểu mẫu của mình dễ dàng trong tệp văn bản hoặc trong tệp .txt bằng JavaScript.
Một biểu mẫu web thường có nhiều yếu tố khác nhau, chủ yếu là các trường đầu vào. Bạn có thể trích xuất dữ liệu từ các yếu tố này và lưu nó trong cơ sở dữ liệu như SQL Server hoặc chỉ cần chuyển đổi nó thành tệp JSON. Bạn thậm chí có thể lưu dữ liệu biểu mẫu của bạn trong một tệp văn bản.save your form data in a text file.
Hãy cùng xem ví dụ đầu tiên.
Đánh dấu
* { box-sizing: border-box; }
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text], textarea, select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button]{
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
-- Choose the country --
India
Japan
USA
Bạn có thể thích điều này. Cách đọc tệp văn bản [tệp .txt] bằng JavaScript. You may like this. How to read a text file [a .txt file] using JavaScript.
Kịch bản
let saveFile = [] => {
const name = document.getElementById['txtName'];
const age = document.getElementById['txtAge'];
const email = document.getElementById['txtEmail'];
const country = document.getElementById['selCountry'];
const msg = document.getElementById['msg'];
let data =
'\r Name: ' + name.value + ' \r\n ' +
'Age: ' +age.value + ' \r\n ' +
'Email: ' + email.value + ' \r\n ' +
'Country: ' + country.value + ' \r\n ' +
'Message: ' + msg.value;
const textToBLOB = new Blob[[data], { type: 'text/plain' }];
const sFileName = 'formData.txt';
let newLink = document.createElement["a"];
newLink.download = sFileName;
if [window.webkitURL != null] {
newLink.href = window.webkitURL.createObjectURL[textToBLOB];
}
else {
newLink.href = window.URL.createObjectURL[textToBLOB];
newLink.style.display = "none";
document.body.appendChild[newLink];
}
newLink.click[];
}
Thử nó
Vui lòng không bị choáng ngợp bởi quy mô của chương trình. Mã bên trong thẻ là quan trọng.code inside the tag is important.
Tôi đã "thiết kế một hình thức đơn giản bằng cách sử dụng CSS" và một vài yếu tố HTML cùng với danh sách thả xuống. Tôi ý tưởng đằng sau việc sử dụng rất nhiều yếu tố là để cho bạn thấy cách bạn có thể lưu dữ liệu biểu mẫu trong tệp văn bản bằng cách sử dụng các giá trị được trích xuất từ các yếu tố đầu vào khác nhau.
Bên trong kịch bản, điều đầu tiên tôi đang làm là nhận được tất cả các giá trị từ mỗi yếu tố.
Sau đó, tôi đang tạo một chuỗi [sử dụng các giá trị], để tôi có thể chuyển đổi toàn bộ chuỗi thành một đối tượng Blob.string [using the values], so that I can convert the whole string into a BLOB object.
let data =
'\r Name: ' + name.value + ' \r\n ' +
'Age: ' +age.value + ' \r\n ' +
'Email: ' + email.value + ' \r\n ' +
'Country: ' + country.value + ' \r\n ' +
'Message: ' + msg.value;\ R \ n dành cho các dòng mới hoặc lỗi dòng, để mỗi dữ liệu có thể được viết trong một dòng mới trong tệp văn bản.\r\n is for new line or line breaks, so that each data can be written in a new line in the text file.
Tiếp theo, tôi đang tạo một liên kết [thẻ neo] [không hiển thị ở bất cứ đâu trên biểu mẫu] và gán tệp văn bản làm thuộc tính tải xuống liên kết.text file as the link’s download property.
let newLink = document.createElement["a"];
newLink.download = sFileName;Khi tôi đã tạo liên kết, tôi sẽ gán đối tượng Blob là HREF [hoặc là URL] cho thẻ liên kết mới được tạo.href [or as the URL] to the newly created Link tag.
if [window.webkitURL != null] {
newLink.href = window.webkitURL.createObjectURL[textToBLOB];
}
else {
newLink.href = window.URL.createObjectURL[textToBLOB];
newLink.style.display = "none";
document.body.appendChild[newLink];
}Bây giờ, bạn cũng có thể chuyển đổi dữ liệu biểu mẫu của mình thành PDF bằng JavaScript. Now, you can also
convert your Form data into PDF using JavaScript.
Blob là viết tắt của đối tượng lớn nhị phân. Blobs thường là, hình ảnh và tệp âm thanh, được chuyển đổi thành nhị phân và sau đó được lưu trữ trong cơ sở dữ liệu. Sử dụng hàm tạo blob [], tôi có thể chuyển đổi các văn bản thông thường thành các đối tượng Blob. stands for Binary Large Object. BLOBs are typically, images and audio files, which are converted into Binary and are later stored in a database. Using the Blob[] constructor, I can convert ordinary texts into Blob objects.
Bạn có thể thấy giá trị BLOB [được gắn vào URL liên kết hoặc thẻ mà chúng tôi đã tạo trong tập lệnh của chúng tôi] trong cửa sổ Bảng điều khiển trình duyệt của bạn. Ví dụ, tag that we created in our script] in your browser’s console window. For example,
if [window.webkitURL != null] {
newLink.href = window.webkitURL.createObjectURL[textToBLOB];
console.log [newLink];
}hình ảnh
Hình ảnh hiển thị thẻ với URL có giá trị blob. Trong cửa sổ Bảng điều khiển, sao chép URL và dán nó vào thanh địa chỉ trình duyệt. Trình duyệt sẽ dịch Blob và sẽ hiển thị giá trị.
Hãy nhớ rằng: Mỗi lần bạn nhấp vào nút Lưu, tập lệnh sẽ tạo một blob mới từ dữ liệu biểu mẫu.: Every time you click the save button, the script will create a new BLOB from the form data.
Dòng mã cuối cùng, chỉ cần gọi sự kiện nhấp chuột của thẻ và trình duyệt tải xuống tệp chứa dữ liệu trong đĩa cứng cục bộ của bạn.click event of the tag and the browser downloads the file containing the data in your local hard disc.
newLink.click[];
Không chỉ là văn bản đơn giản, bạn thậm chí có thể chuyển đổi hình ảnh thành PDF chỉ bằng JavaScript. Kiểm tra bài viết này. Not just plain text, you can even convert an image into a PDF using only JavaScript. Check out this post.
Đó là nó. Cảm ơn vì đã đọc. ☺☺
← Trước đó →Next →