Tạo các biểu mẫu HTML. Lưu trữ dữ liệu ở phía khách hàng. Ví dụ tạo form đăng ký

Hôm nay tôi đang trong thời gian học tập
Tôi sẽ chiếm được lòng tin của bạn thông qua dịch vụ của tôi,
Bạn viết cho tôi một giấy nợ,
Vì vậy, tôi không có bất kỳ nghi ngờ nào về việc thanh toán.

Mephistophele, trong Faust của Goethe

Các biểu mẫu đã được giới thiệu ngắn gọn trong chương trước như một cách để truyền thông tin do người dùng nhập qua HTTP. Chúng được phát triển trên web trước khi có JavaScript, với mong muốn xảy ra tương tác với máy chủ khi chuyển sang một trang khác.

Nhưng các phần tử của chúng là một phần của DOM, giống như phần còn lại của trang và các phần tử DOM đại diện cho các trường biểu mẫu hỗ trợ một số thuộc tính và sự kiện mà các phần tử khác không có. Điều này cho phép xem và thao tác các trường đầu vào từ các chương trình JavaScript và thêm chức năng vào các biểu mẫu cổ điển hoặc sử dụng các biểu mẫu và trường làm cơ sở để xây dựng một ứng dụng.

Trường Một biểu mẫu web bao gồm bất kỳ số lượng trường đầu vào nào được bao quanh bởi một thẻ. HTML cung cấp nhiều trường khác nhau, từ các hộp kiểm bật/tắt đơn giản đến danh sách thả xuống và trường nhập văn bản. Cuốn sách này sẽ không thảo luận chi tiết về tất cả các loại lĩnh vực nhưng chúng tôi sẽ cung cấp một cái nhìn tổng quan ngắn gọn về chúng.

Nhiều loại trường đầu vào sử dụng thẻ. Thuộc tính type của nó được sử dụng để chọn kiểu của trường. Dưới đây là một số loại phổ biến:

trường văn bản văn bản trên một dòng
mật khẩu giống với văn bản nhưng ẩn nội dung nhập
bật/tắt hộp kiểm
phần radio của trường với khả năng chọn từ một số tùy chọn
tập tin cho phép người dùng chọn một tập tin trên máy tính của họ

Các trường biểu mẫu không nhất thiết phải xuất hiện bên trong thẻ. Chúng có thể được đặt ở bất cứ đâu trên trang. Thông tin từ các trường như vậy không thể được chuyển đến máy chủ (điều này chỉ có thể thực hiện được đối với toàn bộ biểu mẫu), nhưng khi chúng tôi tạo các trường mà JavaScript xử lý, chúng tôi thường không cần chuyển thông tin từ các trường thông qua gửi.

(chữ)

(mật khẩu)

(hộp kiểm)

(Đài)

(tài liệu)

Giao diện JavaScript cho các phần tử như vậy khác nhau tùy thuộc vào loại. Chúng ta sẽ xem xét từng cái một lát sau.

Các trường văn bản nhiều dòng có thẻ riêng. Thẻ phải có thẻ đóng và sử dụng văn bản bên trong các thẻ đó thay vì sử dụng thuộc tính value.

một hai ba

Và thẻ được sử dụng để tạo trường cho phép người dùng chọn một trong các tùy chọn đã cho.
Bánh kếp kem soong

Khi giá trị của một trường thay đổi, sự kiện “thay đổi” sẽ được kích hoạt.

Tập trung Không giống như hầu hết các yếu tố tài liệu HTML, các trường biểu mẫu có thể nhận tiêu điểm bàn phím. Khi bạn nhấp vào hoặc chọn chúng, chúng sẽ hoạt động, tức là. máy thu chính của đầu vào bàn phím.

Nếu tài liệu có trường văn bản thì văn bản bạn nhập sẽ chỉ xuất hiện trong đó nếu trường đó có tiêu điểm nhập. Các trường khác phản hồi khác với bàn phím. Ví dụ: nó cố gắng di chuyển đến một tùy chọn có chứa văn bản mà người dùng nhập và cũng phản hồi các phím mũi tên bằng cách di chuyển lựa chọn tùy chọn lên và xuống.

Bạn có thể kiểm soát tiêu điểm từ JavaScript bằng cách sử dụng các phương pháp lấy nét và làm mờ. Cái đầu tiên di chuyển tiêu điểm đến phần tử DOM mà nó được gọi và cái thứ hai loại bỏ tiêu điểm. Giá trị của document.activeElement tương ứng với tiêu điểm nhận phần tử hiện tại.

document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → CƠ THỂ

Một số trang yêu cầu người dùng bắt đầu làm việc ngay lập tức trên một trong các trường biểu mẫu. Tại Trợ giúp về JavaScript Có thể đặt tiêu điểm cho trường này khi tài liệu được tải, nhưng HTML cũng có thuộc tính tự động lấy nét giúp đạt được kết quả tương tự nhưng cho trình duyệt biết ý định của chúng ta là gì. Trong trường hợp này, trình duyệt có thể ghi đè hành vi này trong những trường hợp thích hợp, chẳng hạn như khi người dùng đã di chuyển tiêu điểm đi nơi khác.

Các trình duyệt theo truyền thống cho phép người dùng di chuyển tiêu điểm bằng phím Tab. Chúng ta có thể tác động đến thứ tự điều hướng thông qua thuộc tính tabindex. Trong ví dụ này, tài liệu sẽ di chuyển tiêu điểm từ trường văn bản sang nút OK, thay vì đi qua liên kết trợ giúp trước tiên.

(trợ giúp) được rồi

Theo mặc định, hầu hết các loại phần tử HTML không tập trung. Nhưng việc thêm tabindex vào một phần tử sẽ giúp phần tử đó có thể nhận được tiêu điểm.

Các trường bị vô hiệu hóa Tất cả các trường có thể bị vô hiệu hóa bằng thuộc tính bị vô hiệu hóa, thuộc tính này cũng tồn tại dưới dạng thuộc tính của thành phần đối tượng DOM.

Tôi ổn, tôi kiệt sức rồi

Các trường bị vô hiệu hóa không chấp nhận tiêu điểm hoặc thay đổi và không giống như các trường đang hoạt động, chúng thường có màu xám và mờ dần.

Khi một chương trình đang trong quá trình xử lý thao tác nhấp chuột vào nút hoặc phần tử khác, việc này có thể yêu cầu liên lạc với máy chủ và mất nhiều thời gian, bạn nên tắt phần tử này cho đến khi hành động hoàn tất. Trong trường hợp này, khi người dùng mất kiên nhẫn và nhấp lại vào phần tử đó, hành động sẽ không được lặp lại nữa.

Toàn bộ biểu mẫu Khi một trường được chứa trong một phần tử, phần tử DOM của nó sẽ có thuộc tính biểu mẫu tham chiếu đến biểu mẫu. Ngược lại, phần tử này có thuộc tính Elements chứa tập hợp các trường giống như mảng.

Thuộc tính tên của một trường chỉ định cách xác định giá trị của trường này khi được gửi đến máy chủ. Nó cũng có thể được sử dụng làm tên thuộc tính khi truy cập thuộc tính phần tử của biểu mẫu, thuộc tính này hoạt động như một đối tượng giống như mảng (được truy cập theo số) và bản đồ (được truy cập theo tên).

Tên:
Mật khẩu:
Đăng nhập var form = document.querySelector("form"); console.log(form.elements.type); // → mật khẩu console.log(form.elements.password.type); // → mật khẩu console.log(form.elements.name.form == biểu mẫu); // → đúng

Nút có thuộc tính loại bằng gửi sẽ gửi biểu mẫu khi được nhấp vào. Nhấn Nhập phím bên trong một trường biểu mẫu có tác dụng tương tự.

Việc gửi biểu mẫu thường có nghĩa là trình duyệt đi tới trang được chỉ định trong thuộc tính hành động của biểu mẫu, sử dụng yêu cầu GET hoặc POST. Nhưng trước đó, thuộc tính “submit” sẽ bị hủy. Nó có thể được xử lý bằng JavaScript và trình xử lý có thể ngăn chặn hành vi mặc định bằng cách gọi sự kiện PreventDefault trên đối tượng.

Giá trị: Lưu var form = document.querySelector("form"); form.addEventListener("gửi", function(event) ( console.log("Đang lưu giá trị", form.elements.value.value); event.preventDefault(); ));

Việc chặn các sự kiện “gửi” rất hữu ích trong một số trường hợp. Chúng ta có thể viết mã kiểm tra tính hợp lệ của các giá trị đã nhập và ngay lập tức hiển thị lỗi thay vì truyền dữ liệu biểu mẫu. Hoặc chúng ta có thể tắt tính năng gửi biểu mẫu theo mặc định và để chương trình tự xử lý dữ liệu đầu vào, ví dụ như sử dụng XMLHttpRequest để gửi dữ liệu đến máy chủ mà không cần tải lại trang.

Trường văn bản Các trường có thẻ và loại văn bản, mật khẩu cũng như thẻ có giao diện chung. Các phần tử DOM của chúng có thuộc tính giá trị chứa nội dung hiện tại dưới dạng chuỗi văn bản. Việc đặt thuộc tính này thành một giá trị sẽ thay đổi nội dung của trường.

Thuộc tính trường văn bản SelectionStart và SelectionEnd chứa thông tin về vị trí của con trỏ và vùng chọn văn bản. Khi không có gì được chọn, giá trị của chúng giống nhau và bằng vị trí con trỏ. Ví dụ: 0 biểu thị phần đầu của văn bản, 10 biểu thị con trỏ ở ký tự thứ 10. Khi một phần của trường được chọn, các thuộc tính sẽ được những nghĩa khác nhau, cụ thể là phần đầu và phần cuối của văn bản đã chọn. Bạn cũng có thể nhập giá trị vào các trường này.

Ví dụ: hãy tưởng tượng rằng bạn đang viết một bài báo về Khasekhemwy, nhưng bạn gặp khó khăn khi đánh vần tên của anh ấy một cách chính xác. Đoạn mã sau gán một trình xử lý sự kiện cho thẻ, khi nhấn F2, sẽ chèn chuỗi “Khasekhemwy”.

var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) ( // Chìa khóa mã cho F2 xảy ra là 113 if (event.keyCode == 113) ( thaySelection(textarea, "Khasekhemwy"); event.preventDefault(); ) )); hàm thay thếSelection(field, word) ( var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Đặt con trỏ sau từ field.selectionStart = field.selectionEnd = from + word.length );

Hàm thay thếSelection thay thế văn bản hiện được chọn bằng từ được chỉ định và di chuyển con trỏ đến vị trí sau từ đó để bạn có thể tiếp tục nhập.

Sự kiện "thay đổi" cho trường văn bản không kích hoạt mỗi lần nhập một ký tự. Nó kích hoạt sau khi trường mất tiêu điểm và giá trị của nó đã bị thay đổi. Để phản hồi ngay lập tức những thay đổi trong trường văn bản, bạn cần đăng ký một sự kiện “đầu vào”, sự kiện này sẽ kích hoạt mỗi khi bạn nhập một ký tự, xóa văn bản hoặc thao tác khác với nội dung của trường.

Trong ví dụ sau, chúng ta thấy một trường văn bản và bộ đếm hiển thị độ dài hiện tại của văn bản đã nhập.

độ dài: 0 var text = document.querySelector("input"); đầu ra var = document.querySelector("#length"); text.addEventListener("input", function() ( out.textContent = text.value.length; ));

Hộp kiểm và nút radio Hộp kiểm là một nút radio nhị phân đơn giản. Giá trị của nó có thể được truy xuất hoặc thay đổi thông qua thuộc tính đã chọn, chứa giá trị Boolean.

Làm cho trang có màu tím var hộp kiểm = document.querySelector("#purple"); hộp kiểm.addEventListener("change", function() ( document.body.style.background = hộp kiểm.checked ? "mediumpurple" : ""; ));

Thẻ được sử dụng để liên kết một đoạn văn bản với trường đầu vào. Thuộc tính for phải khớp với id của trường. Nhấp vào nhãn sẽ kích hoạt trường đầu vào, nó nhận tiêu điểm và thay đổi giá trị - nếu đó là dấu kiểm hoặc nút radio.

Nút radio tương tự như dấu kiểm, nhưng nó được liên kết với các nút radio khác có cùng tên nên chỉ có thể chọn một trong số chúng.

Màu sắc: Tím Xanh Xanh Nút var = document.getElementsByName("color"); hàm setColor(event) ( document.body.style.background = event.target.value; ) for (var i = 0; i< buttons.length; i++) buttons[i].addEventListener("change", setColor);

Phương thức document.getElementsByName trả về tất cả các phần tử có giá trị đã cho thuộc tính tên. Ví dụ lặp qua chúng (thông qua vòng lặp for thông thường, không phải forEach, vì tập hợp được trả về không phải là một mảng thực) và đăng ký một trình xử lý sự kiện cho từng phần tử. Hãy nhớ rằng các đối tượng sự kiện có thuộc tính đích đề cập đến phần tử đã kích hoạt sự kiện. Điều này hữu ích cho việc tạo trình xử lý sự kiện - trình xử lý của chúng tôi có thể được gọi bởi các phần tử khác nhau và nó phải có cách truy cập vào phần tử hiện tại đã gọi nó.

Chọn trường Chọn trường tương tự như nút radio—chúng cũng cho phép bạn chọn từ nhiều tùy chọn. Nhưng nếu các nút radio cho phép chúng ta kiểm soát bố cục của các tùy chọn thì loại trường sẽ do trình duyệt xác định.

Các trường chọn có một tùy chọn trông giống danh sách hộp kiểm hơn là nút radio. Nếu có thuộc tính multiple, thẻ sẽ cho phép bạn chọn bất kỳ số lượng tùy chọn nào, thay vì chỉ một.

Bánh kếp kem soong

Trong hầu hết các trình duyệt, giao diện của trường sẽ khác với trường một lựa chọn, thường trông giống như một menu thả xuống.

Thuộc tính kích thước của thẻ được sử dụng để đặt số lượng tùy chọn hiển thị cùng lúc - bằng cách này, bạn có thể tác động đến giao diện của phần bỏ học. Ví dụ: bằng cách gán kích thước 3, bạn sẽ thấy ba dòng cùng một lúc, bất kể có nhiều tùy chọn hay không.

Mỗi thẻ có một ý nghĩa. Nó có thể được xác định bởi thuộc tính value, nhưng nếu nó không được chỉ định thì giá trị của thẻ sẽ xác định văn bản nằm bên trong thẻ... Thuộc tính giá trị của phần tử phản ánh tùy chọn hiện được chọn. Đối với trường có khả năng chọn một số tùy chọn, thuộc tính này không đặc biệt cần thiết vì nó sẽ chỉ chứa một trong một số tùy chọn đã chọn.

Thẻ trường có thể được truy cập dưới dạng đối tượng giống mảng thông qua thuộc tính tùy chọn. Mỗi tùy chọn có một thuộc tính được chọn cho biết tùy chọn đó hiện có được chọn hay không. Thuộc tính cũng có thể được thay đổi để làm cho tùy chọn được chọn hoặc không được chọn.

Ví dụ sau trích xuất các giá trị được chọn từ trường chọn và sử dụng chúng để tạo số nhị phân từ các bit. Nhấn Ctrl (hoặc Command trên máy Mac) để chọn nhiều giá trị cùng một lúc.

0001 0010 0100 1000 = 0 var select = document.querySelector("select"); var đầu ra = document.querySelector("#output"); select.addEventListener("change", function() ( var number = 0; for (var i = 0; i< select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; });

Trường tệp Trường tệp ban đầu được dùng để tải tệp lên từ máy tính thông qua một biểu mẫu. TRONG trình duyệt hiện đại chúng cũng cho phép bạn đọc tệp từ JavaScript. Trường này hoạt động như một người bảo vệ cho các tập tin. Tập lệnh không thể đơn giản lấy và mở tệp từ máy tính của người dùng, nhưng nếu người dùng chọn tệp trong trường này, trình duyệt sẽ cho phép tập lệnh bắt đầu đọc tệp.

Trường tệp thường trông giống như một nút có nhãn giống như “Chọn tệp” với thông tin về tệp đã chọn bên cạnh.

var input = document.querySelector("input"); input.addEventListener("change", function() ( if (input.files.length > 0) ( var file = input.files; console.log("Bạn đã chọn", file.name); if (file.type) console.log("Nó có kiểu", file.type);

Thuộc tính tệp của phần tử là một đối tượng giống mảng (không phải mảng thực) chứa danh sách các tệp đã chọn. Ban đầu nó trống rỗng. Phần tử không có tài sản đơn giản tệp vì người dùng có thể chọn nhiều tệp cùng một lúc khi thuộc tính multiple được bật.

Các đối tượng trong thuộc tính tệp có các thuộc tính tên (tên tệp), kích thước (kích thước tệp tính bằng byte) và loại (loại tệp theo nghĩa loại phương tiện - văn bản/thuần túy hoặc hình ảnh/jpeg).

Thứ nó không có là thuộc tính chứa nội dung của tệp. Bạn phải cố gắng hết sức để có được nội dung. Vì việc đọc tệp từ đĩa mất nhiều thời gian nên giao diện phải không đồng bộ để tài liệu không bị treo. Bạn có thể coi hàm tạo FileReader là hàm tạo XMLHttpRequest, nhưng dành cho tệp.

var input = document.querySelector("input"); input.addEventListener("change", function() ( Array.prototype.forEach.call(input.files, function(file) ( var reader = new FileReader(); reader.addEventListener("load", function() ( console .log("File", file.name, "bắt đầu bằng", reader.result.slice(0, 20)); reader.readAsText(file));

Việc đọc một tệp xảy ra bằng cách tạo một đối tượng FileReader, đăng ký một sự kiện "tải" cho nó và gọi phương thức readAsText của nó, truyền tệp vào ổ đĩa. Khi quá trình tải xuống hoàn tất, nội dung của tệp sẽ được lưu trữ trong thuộc tính kết quả.

Ví dụ này sử dụng Array.prototype.forEach để lặp qua mảng, vì trong một vòng lặp bình thường, sẽ bất tiện khi lấy các đối tượng tệp và trình đọc được yêu cầu từ trình xử lý sự kiện. Các biến sẽ chung cho tất cả các lần lặp của vòng lặp.

FileReaders cũng gặp phải sự kiện "lỗi" khi đọc tệp không thành công. đối tượng lỗi sẽ được lưu trong thuộc tính lỗi. Nếu bạn không muốn bận tâm đến những điều bất tiện khác mạch không đồng bộ, bạn có thể gói nó trong một lời hứa (xem Chương 17):

Hàm readFile(file) ( return new Promise(function(succeed, failed) ( var reader = new FileReader(); reader.addEventListener("load", function() ( thành công(reader.result); )); reader.addEventListener ("lỗi", function() ( failed(reader.error); )); reader.readAsText(file));

Lưu trữ dữ liệu ở phía máy khách Các trang HTML đơn giản có bổ sung JavaScript có thể là cơ sở tuyệt vời cho các ứng dụng nhỏ - nhỏ chương trình hỗ trợ, tự động hóa các công việc hàng ngày. Bằng cách đính kèm trình xử lý sự kiện vào các trường biểu mẫu, bạn có thể thực hiện mọi việc từ chuyển đổi độ F sang độ C cho đến tạo mật khẩu từ mật khẩu chính và tên trang web.

Khi một ứng dụng như vậy cần lưu thông tin giữa các phiên, các biến JavaScript không thể được sử dụng - giá trị của chúng sẽ bị loại bỏ mỗi khi đóng trang. Bạn có thể thiết lập một máy chủ, kết nối nó với Internet và sau đó ứng dụng sẽ lưu trữ dữ liệu của bạn ở đó. Chúng ta sẽ xem xét vấn đề này trong Chương 20. Nhưng nó làm tăng thêm công việc và sự phức tạp cho bạn. Đôi khi chỉ cần lưu trữ dữ liệu trong trình duyệt của bạn là đủ. Nhưng bằng cách nào?

Bạn có thể lưu trữ dữ liệu chuỗi để nó có thể tồn tại khi tải lại trang - để thực hiện việc này, bạn cần đặt nó vào đối tượng localStorage. Nó cho phép dữ liệu chuỗi được lưu trữ dưới tên (cũng là chuỗi), như trong ví dụ này:

LocalStorage.setItem("tên người dùng", "marijn"); console.log(localStorage.getItem("tên người dùng")); // → marijn localStorage.removeItem("tên người dùng");

Biến trong localStorage được lưu trữ cho đến khi nó bị ghi đè, xóa bằng cách sử dụng RemoveItem hoặc xóa bộ nhớ cục bộ của người dùng.

Đối với các trang web có các miền khác nhau– các ngăn khác nhau trong kho lưu trữ này. Nghĩa là, dữ liệu được lưu từ một trang web trong localStorage chỉ có thể được đọc hoặc ghi đè bởi các tập lệnh từ cùng một trang web.

Các trình duyệt cũng giới hạn lượng dữ liệu mà chúng có thể lưu trữ, thường là vài megabyte. Hạn chế này, cùng với thực tế là việc ghi điểm ổ cứng không mang lại lợi nhuận cho mọi người, ngăn chặn tình trạng ăn hết dung lượng ổ đĩa.

Đoạn mã sau thực hiện một chương trình đơn giảnđể ghi chép. Nó lưu trữ các ghi chú như một đối tượng, liên kết các tiêu đề với nội dung. Nó được mã hóa bằng JSON và được lưu trữ trong localStorage. Người dùng có thể chọn một ghi chú thông qua trường và thay đổi văn bản của nó. Một mục được thêm vào bằng cách nhấn vào một nút.

Ghi chú: mới
var list = document.querySelector("#list"); function addToList(name) ( var option = document.createElement("option"); option.textContent = name; list.appendChild(option); ) // Lấy danh sách từ bộ nhớ cục bộ var note = JSON.parse(localStorage.getItem ("ghi chú")) || ("mua gì": ""); for (tên var trong ghi chú) if (notes.hasOwnProperty(name)) addToList(name); hàm saveToStorage() ( localStorage.setItem("notes", JSON.stringify(notes)); ) var current = document.querySelector("#currentnote"); current.value = ghi chú; list.addEventListener("change", function() ( current.value = ghi chú; )); current.addEventListener("change", function() ( note = current.value; saveToStorage(); )); hàm addNote() ( var name = nhắc("Tên ghi chú", ""); if (!name) return; if (!notes.hasOwnProperty(name)) ( ghi chú = ""; addToList(name); saveToStorage() ; ) list.value = tên; current.value = ghi chú)

Tập lệnh khởi tạo biến ghi chú với giá trị từ localStorage và nếu nó không có ở đó, thì bằng một đối tượng đơn giản có một mục nhập “mua gì”. Nỗ lực đọc trường bị thiếu từ localStorage sẽ trả về giá trị rỗng. Bằng cách chuyển null sang JSON.parse, chúng ta sẽ nhận lại null. Do đó, bạn có thể sử dụng toán tử || cho giá trị mặc định. .

Khi dữ liệu trong ghi chú thay đổi (thêm lối đi mới hoặc thay đổi hiện tại), hàm saveToStorage được gọi để cập nhật trường được lưu trữ. Nếu chúng tôi mong đợi rằng chúng tôi sẽ lưu trữ hàng nghìn bản ghi thì điều đó sẽ quá tốn kém và chúng tôi sẽ phải đưa ra một quy trình lưu trữ phức tạp hơn - ví dụ: một trường riêng cho mỗi bản ghi.

Khi người dùng thêm bản ghi, mã phải cập nhật trường văn bản, mặc dù trường này có trình xử lý "thay đổi". Điều này là cần thiết vì sự kiện "thay đổi" chỉ xảy ra khi người dùng thay đổi giá trị của trường chứ không phải khi tập lệnh thực hiện điều đó.

Có một đối tượng khác tương tự như localStorage được gọi là sessionStorage. Sự khác biệt giữa chúng là nội dung của sessionStorage bị quên vào cuối phiên, điều này đối với hầu hết các trình duyệt có nghĩa là thời điểm đóng.

Bản tóm tắt HTML cung cấp nhiều nhiều loại khác nhau trường biểu mẫu – văn bản, hộp kiểm, nhiều lựa chọn, chọn tệp.

Bạn có thể lấy giá trị và thao tác các trường này từ JavaScript. Khi thay đổi, chúng kích hoạt sự kiện “thay đổi”, khi nhập bằng bàn phím – “đầu vào” và nhiều sự kiện bàn phím khác nhau. Chúng giúp chúng tôi nắm bắt được thời điểm người dùng tương tác với trường đầu vào. Các thuộc tính như giá trị (đối với trường văn bản và lựa chọn) hoặc được chọn (đối với hộp kiểm và nút radio) được sử dụng để đọc và ghi nội dung của trường.

Khi gửi biểu mẫu, sự kiện "gửi" xảy ra. Sau đó, trình xử lý JavaScript có thể gọi ngăn chặnDefault trong sự kiện này để dừng truyền dữ liệu. Các thành phần của biểu mẫu không cần phải được đặt trong thẻ.

Khi người dùng chọn một tập tin có ổ cứng Thông qua trường chọn tệp, giao diện FileReader sẽ cho phép chúng ta truy cập nội dung của tệp từ chương trình JavaScript.

Các đối tượng localStorage và sessionStorage có thể được sử dụng để lưu trữ thông tin theo cách có thể tồn tại khi tải lại trang. Cái đầu tiên lưu dữ liệu vĩnh viễn (hoặc cho đến khi người dùng xóa nó một cách cụ thể) và cái thứ hai – cho đến khi đóng trình duyệt.

Bài tậpJavaScript Workbench Tạo một giao diện cho phép bạn viết và thực thi các đoạn mã JavaScript.

Tạo một nút bên cạnh, khi được nhấp vào, hàm tạo Hàm từ Chương 10 sẽ gói văn bản đã nhập vào một hàm và gọi nó. Chuyển đổi giá trị trả về của hàm hoặc bất kỳ lỗi nào của hàm thành một chuỗi và in nó sau trường văn bản.

trả lại "xin chào"; Đi thôi // Mã của bạn.

Tự động hoàn tất Hoàn thành trường văn bản để khi bạn nhập văn bản, danh sách các tùy chọn sẽ xuất hiện bên dưới trường văn bản đó. Bạn có một mảng những lựa chọn khả thi và bạn cần hiển thị những cái bắt đầu bằng văn bản đã nhập. Khi người dùng nhấp vào tùy chọn được đề xuất, nó sẽ thay đổi nội dung của trường thành tùy chọn đó.

// Xây dựng một mảng các tên biến toàn cục, // như "alert", "document" và "scrollTo" var terms = ; for (tên var trong cửa sổ) terms.push(name); // Ma cua ban.

Trò chơi cuộc sống của Conway Đây là một mô phỏng đơn giản về cuộc sống trên một lưới hình chữ nhật, mỗi phần tử trong đó còn sống hoặc không. Mỗi thế hệ (bước trò chơi) áp dụng các quy tắc sau:

Mọi tế bào sống có số lượng tế bào lân cận ít hơn hai hoặc nhiều hơn ba sẽ chết
- mọi tế bào sống có hai đến ba tế bào lân cận đều tồn tại cho đến bước tiếp theo
- mọi ô chết có chính xác ba ô lân cận sẽ sống lại

Hàng xóm của một ô là tất cả các ô liền kề với nó theo chiều ngang, chiều dọc và đường chéo, tổng cộng là 8 ô.

Xin lưu ý rằng các quy tắc áp dụng cho toàn bộ lưới cùng một lúc chứ không áp dụng cho từng ô lần lượt. Nghĩa là, số lượng hàng xóm được tính tại một thời điểm trước bước tiếp theo và những thay đổi xảy ra ở các ô lân cận không ảnh hưởng đến trạng thái mới của ô.

Triển khai trò chơi bằng cách sử dụng bất kỳ cấu trúc phù hợp nào. Sử dụng Math.random để tạo các quần thể ban đầu ngẫu nhiên. Hiển thị trường dưới dạng lưới các dấu kiểm bằng nút “chuyển sang bước tiếp theo”. Khi người dùng bật hoặc tắt các hộp kiểm, những thay đổi này phải được tính đến khi tính toán thế hệ tiếp theo.

Thế hệ tiếp theo // Mã của bạn.

JS hoặc JavaScript là ngôn ngữ kịch bản chạy ở phía máy khách và không yêu cầu tải lại trang. JavaScript được Netscape phát triển vào năm 1995.

Bạn có thể đã thấy trên trang web của tôi trong sổ khách hoặc trên diễn đàn, các biểu mẫu để thêm tin nhắn với các nút đặc biệt. Và nếu bạn muốn có được điều tương tự thì bài viết này là dành cho bạn.

Khái niệm cơ bản về JS

Mã JavaScript được chèn vào giữa các thẻ và

Nếu mã chứa các hàm thì các hàm này phải được đặt trong các thẻ giữa thẻ và.

Nếu như Mã JavaScriptđược đặt trong một tệp riêng biệt có phần mở rộng .js, sau đó bạn có thể kết nối tệp đó với mã HTML bằng cách chỉ định tên tệp làm tham số src của thẻ

…

Vì vậy, chúng tôi đã kết nối tệp JavaScript với tệp HTML.

Ví dụ: bạn có thể sử dụng JavaScript làm trình xử lý cho một số sự kiện nhất định. Ví dụ: khi bạn nhấp chuột vào phần tử điều khiển, sự kiện OnClick sẽ xảy ra.

Để trình duyệt “hiểu” rằng chúng ta cần thực thi một tập lệnh được viết bằng JS, chúng ta chỉ định giao thức giả javascript:

Chức năng cảnh báo (chuỗi s) hiển thị một cửa sổ có văn bản s và một nút “OK”.

Trong ví dụ này, khi bạn nhấp vào nút “Hiển thị”, một cửa sổ sẽ xuất hiện với dòng chữ “Bạn đã nhấp vào nút” và một nút “OK”.

Các hình thức

Bạn có thể truy cập các phần tử của biểu mẫu thông qua cấu trúc sau:

document.|form_name|.|tên thành phần|

Đối với các phần tử đầu vào thông tin ( và ), thuộc tính value có sẵn để truy cập vào chính thông tin đã nhập hoặc chưa được nhập.

hàm AddText (văn bản) ( document.form1.edit1.value=text; )

Trong ví dụ này, sau khi nhấp vào nút “Nhấn tôi”, dòng chữ “Đây là Chỉnh sửa” sẽ xuất hiện trong trường nhập văn bản. Bạn cũng có thể thêm một tham số nữa vào các hàm thuộc loại này - một đối tượng mà bạn muốn viết văn bản vào đó. Ví dụ: chúng tôi có hai trường đầu vào thông tin văn bản và hai nút. Khi nhấp vào nút đầu tiên, chúng tôi sẽ viết một số văn bản vào trường nhập đầu tiên và khi nhấp vào nút thứ hai, chúng tôi sẽ viết một số văn bản vào trường nhập thứ hai. Để làm điều này, chúng ta không cần phải viết hai hàm; chỉ cần viết một hàm, chỉ ra trong các tham số của nó, ngoài văn bản mà chúng ta muốn thêm, đối tượng mà văn bản này cần được thêm vào.

hàm AddText2 (đối tượng, văn bản) ( object.value=text; )

Đó là tất cả chức năng cần thiết để thay đổi bất kỳ văn bản nào trong bất kỳ thành phần nhập văn bản nào. Hãy lưu trữ hàm này trong một tệp riêng có tên addtext.js

Và đây là trang html:

Chà, đó có lẽ là tất cả những gì tôi muốn viết. Nếu bạn có bất kỳ câu hỏi nào, hãy viết chúng cho tôi địa chỉ email: [email được bảo vệ]

Tốt xấu

Hàm là một đoạn mã có thể tái sử dụng và có thể được gọi ở bất kỳ đâu trong chương trình. Điều này giúp loại bỏ sự cần thiết nhiều lần ...

Đôi khi bạn cần đặt trường văn bản, nút radio hoặc hộp kiểm hoạt động hoặc không hoạt động. Làm cách nào để thực hiện việc này một cách linh hoạt mà không cần tải lại trang? Đối với điều này bạn có thể…

Chúc một ngày tốt lành, những người hâm mộ phát triển web và những người muốn tạo trang web của riêng mình. Trước đó, tất cả các ấn phẩm của tôi đều dành cho các yếu tố cơ bản của ngôn ngữ, cách tạo các đối tượng nội dung khác nhau, định dạng, cấu trúc của chúng, v.v. Nắm vững các chủ đề trước, bạn đã có thể tạo một trang web khá tốt. Tuy nhiên, nó sẽ không đầy đủ nếu không có chủ đề hôm nay: “Tạo biểu mẫu trong html”.

Phần ngôn ngữ này rất quan trọng. Vì vậy, hãy đặc biệt chú ý nghiên cứu nó, nếu không tài nguyên web bạn tạo sẽ không được đưa vào sản xuất. Vì vậy, sau khi đọc bài viết, bạn sẽ biết lý do tại sao bạn cần sử dụng biểu mẫu, chúng được sử dụng để tạo những thẻ nào và bạn cũng có thể thử các ví dụ cụ thể trong thực tế. Bắt đầu nào!

Biểu mẫu là gì và nó hoạt động như thế nào?

Biểu mẫu là một trong những đối tượng quan trọng nhất, dùng để trao đổi dữ liệu thông tin giữa máy chủ và người dùng.

Nói một cách đơn giản, nếu bạn muốn tạo một cửa hàng trực tuyến có khả năng đặt mua sản phẩm trên trang web, yêu cầu đăng ký trên tài nguyên web và làm việc với các tài khoản hoặc cung cấp cho khách hàng nhận xét với người quản lý công ty thì bạn không thể làm gì nếu không có biểu mẫu.

Biểu mẫu được chỉ định bằng cách sử dụng phần tử đặc biệt của ngôn ngữ html.

Lưu ý rằng một tài liệu mã có thể chứa nhiều khai báo thẻ nhưng chỉ có thể gửi một yêu cầu đến máy chủ để xử lý dữ liệu. Đó là lý do tại sao thông tin được người dùng nhập vào các trường được cung cấp cho mục đích này và liên quan đến các biểu mẫu khác nhau sẽ không phụ thuộc vào nhau. Ngoài ra, không được phép lồng các biểu mẫu này vào trong các biểu mẫu khác.

Đối với những người thiếu kiên nhẫn và mong muốn xem nhanh phần trình bày mã, tôi đã đính kèm một ví dụ đơn giản về việc sử dụng bảng có trường văn bản để lấy mật khẩu bằng một nút:

1 2 3 4 5 6 7 8 9 10 11 12

Ví dụ

Có lẽ bây giờ vẫn chưa rõ cái gì và tương tác như thế nào trong này chương trình nhỏ, tuy nhiên, tôi đảm bảo rằng sau khi đọc toàn bộ bài viết này, bạn sẽ có thể tạo các ứng dụng phức tạp hơn nhiều.

Gửi dữ liệu đến phía máy chủ

Để gửi thông tin đã nhập (hoặc đã chọn) vào hộp thoại, bạn phải sử dụng cơ chế tiêu chuẩn - nút Gửi.

Mã cho một phương thức như vậy trông như thế này:

Khi bạn chạy dòng được trình bày, một nút sẽ xuất hiện với dòng chữ: “Gửi”.

Một cách khác để gửi dữ liệu đến phía máy chủ là nhấn phím Enter trong hộp thoại.

Sau khi xác nhận lô hàng thông tin quy định, nó không đến máy chủ ngay lập tức. Đầu tiên, nó được trình duyệt xử lý, dẫn đến dạng “name=value”.

Tên là tham số thuộc tính loại của thẻ và giá trị là dữ liệu do người dùng nhập. Tiếp theo, chuỗi đã chuyển đổi được chuyển tới trình xử lý, chuỗi này thường được chỉ định trong thuộc tính hành động yếu tố .

Bản thân tham số hành động là không bắt buộc và trong một số trường hợp, nó hoàn toàn không cần thiết. Ví dụ: nếu một trang web được viết bằng sử dụng php hoặc js thì quá trình xử lý sẽ diễn ra trên trang hiện tại và không cần liên kết.

Để hiểu rõ hơn về toàn cảnh hoạt động của trang web, tôi muốn nói thêm rằng trên máy chủ, công việc với dữ liệu đã được thực hiện bằng các ngôn ngữ khác. Vì thế, ngôn ngữ phía máy chủđã xem xét: Python, php, các ngôn ngữ giống C (C#, C, v.v.), Java và các ngôn ngữ khác.

Bây giờ tôi muốn dừng lại và nói thêm về nguyên tố này. Nếu bạn giải thích bằng ngôn ngữ đơn giản, thì bạn cần tạo các trường văn bản, nút radio, các nút khác nhau, trường ẩn, hộp kiểm và các đối tượng khác.

Thẻ không nhất thiết phải được ghép nối với , tuy nhiên, nếu bạn cần xử lý hồ sơ người dùng hoặc nhập chúng, chẳng hạn như vào cơ sở dữ liệu, thì bạn không thể thực hiện nếu không có vùng chứa.

Các thuộc tính chính của thành phần ngôn ngữ này đánh dấu siêu văn bản là:

Văn bản – tạo trường văn bản;
Gửi – tạo nút để gửi dữ liệu đến máy chủ;
Hình ảnh – chịu trách nhiệm về một nút có hình ảnh;
Đặt lại – đặt nút để xóa biểu mẫu;
Mật khẩu – đặt trường văn bản dành riêng cho mật khẩu;
Hộp kiểm – chịu trách nhiệm về các trường có hộp kiểm;
Radio – chịu trách nhiệm về các trường có lựa chọn một phần tử;
Nút – tạo một nút;
Ẩn – được sử dụng cho các trường ẩn;
Tệp – chỉ định trường chịu trách nhiệm gửi tệp.

Phương thức truyền tải thông tin

Có 2 cách để chuyển dữ liệu người dùng về phía server: Get và Post. Các phương pháp này thực hiện cùng một hành động, nhưng chúng khác nhau đáng kể. Vì vậy, trước khi đề cập đến bất kỳ ai trong số họ, chúng ta hãy làm quen với các tính năng của chúng.

	Bưu kiện	Lấy
Kích thước của tài liệu được truyền	Giới hạn ở phía máy chủ.	Tối đa – 4 KB.
Cách hiển thị thông tin đã gửi	Chỉ khả dụng khi được xem qua tiện ích mở rộng của trình duyệt hoặc các sản phẩm phần mềm đặc biệt khác.	Ngay lập tức có sẵn cho tất cả mọi người.
Sử dụng dấu trang	Không có cách nào để thêm vào dấu trang vì các yêu cầu không được lặp lại (tất cả các trang đều liên kết đến một địa chỉ).	Bất kỳ trang nào có yêu cầu đều có thể được lưu dưới dạng dấu trang và quay lại trang đó sau.
Bộ nhớ đệm	Dựa trên đoạn trước, tất cả các yêu cầu đều nằm trên một trang.	Mỗi trang có thể được lưu trữ riêng biệt.
Mục đích	Được sử dụng để gửi các tệp lớn (sách, hình ảnh, video, v.v.), tin nhắn, bình luận.	Tuyệt vời để tìm kiếm các giá trị được yêu cầu trên tài nguyên web hoặc để gửi tin nhắn văn bản ngắn.

Để chỉ ra phương thức truyền dữ liệu nào trong hai phương thức truyền dữ liệu mà trình duyệt nên sử dụng, phần tử sử dụng tham số phương thức được cung cấp (ví dụ: Method="post" ).

Hãy xem ví dụ thứ hai. Hãy tạo một biểu mẫu trong đó bạn cần nhập dữ liệu cá nhân của mình (họ và tên, ngày sinh) và tạo mật khẩu. Sau đó, chúng tôi gửi tất cả những thứ này đến máy chủ bằng phương thức Đăng.

phương thức ĐĂNG

Nhập thông tin cá nhân của bạn!

Ví dụ: để nhập ngày, có các công tắc cho số lượng của từng tham số (ngày, tháng và năm), cũng như bảng điều khiển thả xuống có lịch để thuận tiện.

Tạo bảng đăng ký

Các thẻ và thuộc tính cơ bản đã được đề cập. Đó là lý do tại sao đã đến lúc tạo một biểu mẫu đăng ký đầy đủ bằng cách sử dụng đánh dấu kiểu css và xác thực dữ liệu đã nhập. Tất nhiên, chúng tôi sẽ không thể thấy máy chủ hoạt động với họ nhưng chúng tôi sẽ cung cấp thiết kế và các chi tiết quan trọng.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

Đăng ký Đăng ký trên trang web

Tên:

Họ:

E-mail:

Mật khẩu:

Lặp lại mật khẩu:

Nội dung đăng ký ( nền-color:#98FB98; nền-đính kèm: cố định; ) biểu mẫu( nền-color:#AEEEE; Color: #006400; font-size:15px; ) h4 ( color: red; text-align: center; ) p ( text-align: center; ) input ( Color: #006400; font-size:15px; border: 5px Ridge #98FB98; Background-color:#fff; ) Đăng ký trên trang web Để tiếp tục hoạt động chính xác trong dịch vụ của chúng tôi, vui lòng nhập dữ liệu trung thực!

Tên:

Họ:

E-mail:

Mật khẩu:

Lặp lại mật khẩu:

Tôi khuyên bạn nên tiết kiệm mã này chương trình trong tài liệu có phần mở rộng .html và mã hóa utf-8, đồng thời mở phần sau trong cửa sổ trình duyệt. Bạn sẽ thấy một bảng đăng ký lộng lẫy với các trường để nhập tên, họ, e-mail và mật khẩu lặp lại. Lưu ý rằng khi bạn khởi chạy trang, con trỏ sẽ được định vị ngay trong trường văn bản đầu tiên. Kỹ thuật này đạt được thông qua thuộc tính lấy nét tự động.

Bắt đầu điền vào các trường, giữ nguyên một trường và nhấp vào nút “Đăng ký”. Như bạn đã nhận thấy, biểu mẫu sẽ không được gửi vì mỗi phần tử< input>thuộc tính bắt buộc được chỉ định. Nó đặt các trường được đánh dấu là bắt buộc.

Một điểm thú vị khác là đặc tả của type="email" , xuất hiện trong . Khi sử dụng loại trường này, thông tin đã nhập sẽ tự động được kiểm tra tính chính xác. Trong trường hợp có lỗi, biểu mẫu sẽ không được gửi đến máy chủ.

Vậy là việc xuất bản đã kết thúc. Trong đó tôi đã cố gắng thu thập số tiền tối đa kiến thức quan trọng và có liên quan về các hình thức. Tôi hy vọng nó hữu ích cho bạn! Tôi sẽ rất biết ơn nếu bạn gia nhập hàng ngũ những người đăng ký của tôi và kể cho bạn bè của bạn về blog.

Tạm biệt!

Trân trọng, Roman Chueshov

Đọc: 333 lần

Các biểu mẫu HTML là các thành phần giao diện phức tạp. Chúng bao gồm nhiều loại yếu tố chức năng: các trường và danh sách đầu vào, chú giải công cụ, v.v. Tất cả mã biểu mẫu đều được chứa trong tệp .

Hầu hết thông tin biểu mẫu web được truyền tải bằng phần mở rộng . Để nhập một dòng văn bản, phần tử được sử dụng; đối với nhiều dòng, phần tử được sử dụng. Phần tử tạo một danh sách thả xuống.

Phần tử tạo nhãn cho các trường biểu mẫu. Có hai cách để nhóm nhãn và trường. Nếu trường nằm bên trong một phần tử thì không cần chỉ định thuộc tính for.

Họ Họ Họ Tên

Các trường biểu mẫu có thể được chia thành các khối logic bằng cách sử dụng phần tử. Mỗi phần có thể được đặt tên bằng cách sử dụng phần tử.

Thông tin liên hệ Tên Email
Cơm. 1. Nhóm các trường biểu mẫu

Để làm cho biểu mẫu dễ hiểu hơn đối với người dùng, văn bản sẽ được thêm vào các trường của biểu mẫu để cung cấp ví dụ về dữ liệu đầu vào. Loại văn bản này được gọi là văn bản ký tự đại diện và được tạo bằng thuộc tính giữ chỗ.

Các trường bắt buộc cũng phải được đánh dấu. Trước HTML5, ký hiệu dấu hoa thị * được sử dụng bên cạnh tên trường. Thông số kỹ thuật mới giới thiệu một thuộc tính bắt buộc đặc biệt, cho phép bạn đánh dấu trường bắt buộc ở cấp độ đánh dấu. Thuộc tính này hướng dẫn trình duyệt (giả sử nó hỗ trợ HTML5) không gửi dữ liệu sau khi người dùng nhấp vào gửi cho đến khi các trường được chỉ định được hoàn thành.

Để thay đổi giao diện của trường văn bản khi nhận tiêu điểm, hãy sử dụng lớp giả tiêu điểm. Ví dụ: bạn có thể làm nền của trường hiện tại tối hơn hoặc thêm khung màuđể làm cho nó nổi bật so với phần còn lại:

Đầu vào: tiêu điểm ( nền: #eaeaea; )

Một thuộc tính HTML5 hữu ích khác là thuộc tính tự động lấy nét. Nó cho phép bạn tự động đặt tiêu điểm vào trường ban đầu mong muốn cho các phần tử và (chỉ một phần tử của mỗi biểu mẫu).

Ví dụ tạo form đăng ký

đánh dấu HTML

Tên đăng ký Giới tính nam nữ E-mail Quốc gia Chọn quốc gia cư trú Nga Ukraina Belarus Gửi

Ghi chú
action="form.php" - liên kết đến tệp xử lý biểu mẫu. Tạo một tệp ở dạng mã hóa UTF-8, tải nó lên máy chủ và thay thế action="form.php" bằng đường dẫn đến tệp trên máy chủ của bạn.

Cơm. 2. Vẻ bề ngoài biểu mẫu mặc định

Như bạn có thể thấy trong hình, mỗi thành phần của biểu mẫu có kiểu trình duyệt mặc định. Hãy xóa các kiểu và tạo kiểu cho các thành phần của biểu mẫu.

Bao bọc biểu mẫu ( width: 550px; nền: #ffd500; bán kính đường viền: 20px; ) .form-wrap *(transition: .1s tuyến tính) .profile ( width: 240px; float: left; text-align: center; phần đệm : 30px; ) dạng ( nền: trắng; float: left; width: calc(100% - 240px); đệm: 30px; bán kính đường viền: 0 20px 20px 0; màu: #7b7b7b; ) .form-wrap:after, biểu mẫu div:after ( nội dung: ""; display: bảng; clear: cả hai; ) biểu mẫu div ( lề-dưới: 15px; vị trí: tương đối; ) h1 ( cỡ chữ: 24px; trọng lượng phông chữ: 400; vị trí: tương đối ; lề trên: 50px; ) h1:after ( nội dung: "\f138"; cỡ chữ: 40px; họ phông chữ: FontAwesome; vị trí: tuyệt đối; trên cùng: 50px; bên trái: 50%; biến đổi: dịchX(-50 %); ) /****************** kiểu dáng của các phần tử biểu mẫu ********************** / nhãn, span ( display: block; font-size: 14px; Margin-bottom: 8px; ) đầu vào, đầu vào ( border-width: 0; Outline: none; lề: 0; width: 100%; đệm: 10px 15px; nền: #e6e6e6; ) đầu vào: tiêu điểm, đầu vào: tiêu điểm ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio label ( vị trí: tương đối; phần đệm bên trái: 50px; con trỏ: con trỏ; chiều rộng: 50%; float: trái; chiều cao dòng: 40px; ) .radio đầu vào ( vị trí: tuyệt đối; độ mờ: 0; ) .radio -control ( vị trí: tuyệt đối; trên cùng: 0; trái: 0; chiều cao: 40px; chiều rộng: 40px; nền: #e6e6e6; bán kính đường viền: 50%; căn chỉnh văn bản: giữa; ) .male:trước ( nội dung: " \f222"; họ phông chữ: FontAwesome; font-weight: đậm; ) .female:trước ( nội dung: "\f221"; họ phông chữ: FontAwesome; font-weight: đậm; ) .radio label:hover input ~ . radio-control, .radiol input:focus ~ .radio-control ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:checked ~ .radio-control ( color: red; ) chọn ( width: 100%; con trỏ: con trỏ; phần đệm: 10px 15px; đường viền: 0; đường viền: 0; nền: #e6e6e6; màu: #7b7b7b; -webkit-appearance: none; /* bỏ chọn webkit -browsers */ -moz-appearance: none; /*bỏ chọn trong Mozilla Firefox*/ ) select::-ms-expand ( display: none; /*bỏ chọn trong IE*/ ) .select-arrow ( location: tuyệt đối ; trên cùng: 38px; phải: 15px; chiều rộng: 0; chiều cao: 0; sự kiện con trỏ: không có; /*kích hoạt hiển thị danh sách khi bạn nhấp vào mũi tên*/ border-style: Solid; chiều rộng đường viền: 8px 5px 0 5px; màu viền: #7b7b7b trong suốt trong suốt trong suốt; ) nút ( đệm: 10px 0; chiều rộng đường viền: 0; hiển thị: khối; chiều rộng: 120px; lề: 25px tự động 0; nền: #60e6c5; màu: trắng; cỡ chữ: 14px; phác thảo: không có; chuyển đổi văn bản : chữ hoa; ) /********************* thêm khả năng thích ứng vào biểu mẫu ******************* ** **/ @media (max-width: 600px) ( .form-wrap (margin: 20px auto; max-width: 550px; width:100%;) .profile, form (float: none; width: 100% ;) dạng h1 (lề trên: auto; phần đệm dưới: 50px;) (bán kính đường viền: 0 0 20px 20px;) )

Tệp Form.php

Ghi chú
Trong biến $subject, chỉ định văn bản sẽ được hiển thị làm tiêu đề của bức thư;
Your_name - tại đây bạn có thể chỉ định tên sẽ được hiển thị trong trường “bức thư đến từ ai”;
thay thế your_site_url bằng địa chỉ của trang web bằng mẫu đăng ký;
thay thế your_email bằng địa chỉ của bạn E-mail;
$headers .= "Bcc: your_email". "\r\n"; gửi bccđến địa chỉ email của bạn.