Biểu mẫu html không gửi tất cả các trường
|
Một biểu mẫu HTML được sử dụng để thu thập đầu vào của người dùng. Đầu vào của người dùng thường được gửi đến máy chủ để xử lý Show
Phần tửPhần tử HTML được sử dụng để tạo biểu mẫu HTML cho đầu vào của người dùng
Các phần tử là nơi chứa các loại phần tử đầu vào khác nhau, chẳng hạn như. trường văn bản, hộp kiểm, nút radio, nút gửi, v.v.Tất cả các yếu tố hình thức khác nhau được đề cập trong chương này. Phần tử biểu mẫu HTML Phần tửPhần tử HTML Phần tử Dưới đây là một số ví dụ LoạiMô tảHiển thị trường nhập văn bản một dòngHiển thị nút radio (để chọn một trong nhiều lựa chọn)Hiển thị hộp kiểm (để chọn không hoặc nhiều lựa chọn)Hiển thị nút gửi (để gửi biểu mẫu)Hiển thị nút có thể nhấpTất cả các loại đầu vào khác nhau được đề cập trong chương này. Các loại đầu vào HTML Trường văn bản
Thí dụMột biểu mẫu có các trường nhập văn bản
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt Ghi chú. Bản thân biểu mẫu không hiển thị. Cũng lưu ý rằng chiều rộng mặc định của trường nhập liệu là 20 ký tự Phần tửLưu ý việc sử dụng phần tử Thẻ Phần tử Phần tử Thuộc tính Biểu mẫu là một trong những phần quan trọng nhất của trang web. Không có chúng, sẽ không có cách nào dễ dàng để thu thập dữ liệu, tìm kiếm tài nguyên hoặc đăng ký để nhận thông tin có giá trị Bạn có thể nhúng các biểu mẫu trên các trang web bằng phần tử HTML Trong hướng dẫn này, chúng ta sẽ khám phá phần tử biểu mẫu HTML, các loại đầu vào khác nhau mà nó cần và cách tạo nút gửi để gửi dữ liệu Cuối cùng, bạn sẽ biết cách thức hoạt động của các biểu mẫu và bạn sẽ có thể tự tin tạo ra chúng Cú pháp biểu mẫu HTML cơ bảnCác loại đầu vào biểu mẫu HTMLBạn sử dụng thẻ Thuộc tính Có 20 loại đầu vào khác nhau và chúng tôi sẽ xem xét từng loại một Nhập văn bảnLoại đầu vào này nhận một giá trị là “văn bản”, vì vậy nó tạo ra một dòng đầu vào văn bản Đầu vào với loại văn bản trông giống như ảnh chụp màn hình bên dưới  Nhập mật khẩuNhư tên của nó, một đầu vào với một loại mật khẩu sẽ tạo ra một mật khẩu. Nó tự động ẩn đối với người dùng, trừ khi nó bị thao túng bởi JavaScript Nhập EmailBất kỳ đầu vào nào có loại email đều xác định trường để nhập địa chỉ email Loại sốLoại đầu vào này chỉ cho phép người dùng nhập số Loại đài phát thanhĐôi khi, người dùng sẽ cần chọn một trong số nhiều tùy chọn. Trường đầu vào có thuộc tính loại được đặt thành “radio” cho phép bạn thực hiện việc này Loại hộp kiểmVì vậy, với một kiểu đầu vào của bộ đàm, người dùng sẽ được phép chọn một trong vô số lựa chọn. Điều gì sẽ xảy ra nếu bạn muốn họ chọn càng nhiều tùy chọn càng tốt? Loại GửiBạn sử dụng loại này để thêm nút gửi vào biểu mẫu. Khi người dùng nhấp vào nó, nó sẽ tự động gửi biểu mẫu. Nó nhận một thuộc tính giá trị, xác định văn bản xuất hiện bên trong nút Loại nútĐầu vào có loại được đặt thành nút sẽ tạo một nút, nút này có thể được thao tác bằng loại trình xử lý sự kiện onClick của JavaScript. Nó tạo một nút giống như một kiểu gửi đầu vào, nhưng ngoại trừ giá trị mặc định là trống, vì vậy nó phải được chỉ định Nhập tệpĐiều này xác định một trường để gửi tệp. Khi người dùng nhấp vào nó, họ sẽ được nhắc chèn loại tệp mong muốn, có thể là hình ảnh, PDF, tệp tài liệu, v.v. Kết quả của một loại tệp đầu vào trông như thế này Loại MàuĐây là một loại đầu vào ưa thích được giới thiệu bởi HTML5. Với nó, người dùng có thể gửi màu yêu thích của họ chẳng hạn. Màu đen (#000000) là giá trị mặc định, nhưng có thể được ghi đè bằng cách đặt giá trị thành màu mong muốn Nhiều nhà phát triển đã sử dụng nó như một thủ thuật để chọn các sắc thái màu khác nhau có sẵn ở định dạng RGB, HSL và chữ số Đây là kết quả của một loại màu đầu vào Loại tìm kiếmĐầu vào với loại tìm kiếm xác định một trường văn bản giống như một loại văn bản đầu vào. Nhưng lần này nó có mục đích duy nhất là tìm kiếm thông tin. Nó khác với gõ văn bản ở chỗ, nút hủy xuất hiện khi người dùng bắt đầu gõ Nhập URLKhi thuộc tính loại của thẻ đầu vào được đặt thành URL, nó sẽ hiển thị một trường nơi người dùng có thể nhập URL Nhập số điện thoạiLoại đầu vào của điện thoại cho phép bạn thu thập số điện thoại từ người dùng Nhập ngàyBạn có thể đã đăng ký trên một trang web nơi bạn yêu cầu ngày của một sự kiện nhất định. Trang web có thể đã sử dụng đầu vào có giá trị loại được đặt thành ngày để đạt được điều này Đây là giao diện của đầu vào có kiểu ngày tháng Nhập Datetime-localĐiều này hoạt động giống như ngày loại đầu vào, nhưng nó cũng cho phép người dùng chọn một ngày với một thời gian cụ thể Loại TuầnLoại đầu vào của tuần cho phép người dùng chọn một tuần cụ thể Loại thángĐầu vào có loại tháng sẽ điền các tháng để người dùng chọn khi nhấp vào vùng văn bảnĐôi khi, người dùng sẽ cần điền vào nhiều dòng văn bản không phù hợp với loại văn bản đầu vào (vì nó chỉ định trường văn bản một dòng) Nhiều hộp chọnĐiều này giống như một nút radio và hộp kiểm trong một gói. Nó được nhúng trong trang với hai phần tử – một phần tử Theo mặc định, người dùng chỉ có thể chọn một trong các tùy chọn. Nhưng với nhiều thuộc tính, bạn có thể cho phép người dùng chọn nhiều tùy chọn Cách dán nhãn đầu vào HTMLViệc gán nhãn cho các điều khiển biểu mẫu là rất quan trọng. Khi chúng được kết nối đúng cách với trường đầu vào thông qua thuộc tính Cách biểu mẫu HTML hoạt độngKhi người dùng điền vào một biểu mẫu và gửi nó bằng nút gửi, dữ liệu trong các điều khiển biểu mẫu sẽ được gửi đến máy chủ thông qua các phương thức yêu cầu HTTP Vậy máy chủ được chỉ định như thế nào? . Nó cũng nhận một thuộc tính phương thức, trong đó phương thức HTTP mà nó sử dụng để truyền các giá trị đến máy chủ được chỉ định Phương pháp này có thể là Nếu một thuộc tính phương thức không được sử dụng trong biểu mẫu, nó sẽ tự động cho rằng người dùng muốn sử dụng phương thức GET, vì đó là mặc định Vậy khi nào bạn nên sử dụng phương pháp Dự án nhỏ. Xây dựng một biểu mẫu liên hệ cơ bảnHãy lấy những gì chúng ta đã học về biểu mẫu và sử dụng nó để tạo một biểu mẫu liên hệ đơn giản. Tôi cũng sẽ giới thiệu một số khái niệm mới khi chúng ta tổng hợp lại tất cả Đây là HTMLĐiều gì đang xảy ra trong mã HTML này?Đầu tiên, một phần tử Sau phần tử biểu mẫu, mọi phần tử khác cũng được bao quanh bởi phần tử Chúng tôi sử dụng phần tử Các đầu vào Chúng cũng được xác thực với thuộc tính Sau tất cả, chúng ta sẽ có kết quả trong ảnh chụp màn hình bên dưới Làm thế nào xấu là điều đó? Đây là CSSMã CSS đang làm gì ở đây?Chúng tôi căn giữa mọi thứ trong cơ thể theo chiều ngang với Flexbox và theo chiều dọc với chiều cao khung nhìn 100%. Chúng tôi đã sử dụng một họ phông chữ thảo Chúng tôi đã cung cấp cho các đầu vào và Chúng tôi đã tạo kiểu cụ thể cho nút (nút loại đầu vào) bằng thuộc tính biến đổi để đẩy nó vào giữa vì nó lệch tâm một chút. Chúng tôi đã tạo cho nó một phần đệm 3px để có thêm khoảng cách xung quanh nó. Sau đó, chúng tôi đã chọn một họ phông chữ thảo cho nó với độ đậm đậm. Bởi vì nút quá gần với Chúng tôi đã cung cấp cho phần tử bộ trường của mình một phần đệm 20px ở trên cùng và dưới cùng, với 40px ở bên trái và bên phải để đẩy đường viền mà nó tạo ra xung quanh _________3 phần tử mà nó được bao bọc. Cuối cùng ta được mẫu đẹp bên dưới Phần kết luậnTôi hy vọng hướng dẫn này đã giúp bạn hiểu cách thức hoạt động của các biểu mẫu. Bây giờ bạn đã có kiến thức cần thiết để tích hợp các biểu mẫu vào trang web của mình để có thể bắt đầu thu thập dữ liệu Cảm ơn bạn đã đọc và tiếp tục mã hóa QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu Làm cách nào để kích hoạt nút gửi trong html?The xác định nút gửi sẽ gửi tất cả các giá trị biểu mẫu tới trình xử lý biểu mẫu. Trình xử lý biểu mẫu thường là trang máy chủ có tập lệnh để xử lý dữ liệu đầu vào. Trình xử lý biểu mẫu được chỉ định trong thuộc tính hành động của biểu mẫu.
Làm cách nào để không gửi đầu vào trong JavaScript?Sử dụng giá trị "return false"
. Cung cấp giá trị này cho sự kiện làm cho biểu mẫu không trả lại gì và ngăn biểu mẫu gửi cũng như làm mới trình duyệt. giving the "return false;" value to the onsubmit event. Giving this value to the event makes the form return nothing and prevent it from submission as well as refreshing the browser.
Làm cách nào để gửi biểu mẫu bằng nút gửi?Sử dụng các nút gửi
. Nếu bạn muốn tạo một nút tùy chỉnh và sau đó tùy chỉnh hành vi bằng JavaScript, bạn cần sử dụng hoặc tốt hơn nữa là một phần tử buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use , or better still, a
Làm cách nào để tạo nút gửi bằng JavaScript?Trong thẻ body, tạo biểu mẫu HTML và chỉ định id, phương thức và hành động của biểu mẫu. Trong biểu mẫu, hãy chỉ định thẻ neo với sự kiện onclick. Tạo một hàm cho JavaScript sẽ được thực thi khi nhấp vào liên kết. Khi chúng ta click vào link thì hàm submitForm() sẽ được thực thi |
