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 có phần tử HTML
3. Bên trong phần tử biểu mẫu, một số đầu vào được lồng vào nhau. Những đầu vào này còn được gọi là điều khiển biểu mẫuTrong 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ản
Các loại đầu vào biểu mẫu HTML
Bạn sử dụng thẻ
4 để tạo các điều khiển biểu mẫu khác nhau trong HTML. Nó là một phần tử nội tuyến và có các thuộc tính như
5,
6,
7,
8,
9, v.v. Mỗi trong số này có các giá trị cụ thể mà chúng lấyThuộc tính
9 rất quan trọng vì nó giúp người dùng hiểu mục đích của trường nhập liệu trước khi họ nhập bất kỳ thứ gì vàoCó 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ản
Loạ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ẩu
Như 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 Email
Bất kỳ đầu vào nào có loại email đều xác định trường để nhập địa chỉ email
1Loại số
Loại đầu vào này chỉ cho phép người dùng nhập số
2Loạ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
3Loại hộp kiểm
Vì 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?
5Loại Gửi
Bạ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
6Loạ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
7Nhậ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.
8Kế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ố
0Đâ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õ
1Nhập URL
Khi 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
2Nhập số điện thoại
Loạ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
3Nhập ngày
Bạ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
4Đây là giao diện của một đầ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ể
5Loại Tuần
Loại đầu vào của tuần cho phép người dùng chọn một tuần cụ thể
6Loạ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
7vù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]
12 cho phép người dùng làm điều này vì nó xác định nhiều dòng nhập văn bản. Nó nhận các thuộc tính riêng của nó, chẳng hạn như
13 – cho số cột và
14 cho số hàng
8Nhiề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ử
15 và một phần tử
16, luôn được lồng bên trong
15Theo 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
9Cách dán nhãn đầu vào HTML
Việ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
18 và thuộc tính
19 của đầu vào, người dùng sẽ dễ dàng sử dụng hơn vì họ chỉ cần nhấp vào chính nhãn đó để truy cập thông tin đầu vào
0Cách biểu mẫu HTML hoạt động
Khi 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
20 hoặc
21Vậ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à
20 hoặc
21. Với phương pháp
20, các giá trị do người dùng nhập sẽ hiển thị trong URL khi dữ liệu được gửi. Nhưng với
21, các giá trị được gửi trong tiêu đề HTTP, vì vậy những giá trị đó không hiển thị trong URLNế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à phương thức mặc định
Vậy khi nào bạn nên sử dụng phương pháp
20 hoặc
21? . Sử dụng yêu cầu
21 khi gửi tệp hoặc dữ liệu nhạy cảmDự án nhỏ. Xây dựng một biểu mẫu liên hệ cơ bản
Hã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
1Điều gì đang xảy ra trong mã HTML này?
Đầu tiên, một phần tử
3 đang bao bọc mọi phần tử khác. Nó có một hành động được đặt thành
31 một máy chủ giả nơi sẽ nhận dữ liệu biểu mẫuSau phần tử biểu mẫu, mọi phần tử khác cũng được bao quanh bởi phần tử
32 với thẻ
33 ngay bên dưới nóChúng tôi sử dụng phần tử
32 để nhóm các đầu vào có liên quan lại với nhau và thẻ
33 chứa chú thích truyền đạt nội dung của biểu mẫuCác đầu vào
6,
37 và
12 đều nằm trong một
39 với một lớp điều khiển biểu mẫu. Vì vậy, chúng hoạt động giống như một phần tử khối, để tạo kiểu dễ dàng hơn với CSSChúng cũng được xác thực với thuộc tính
50, vì vậy biểu mẫu không gửi được khi các trường đó trống hoặc khi người dùng không nhập được các giá trị ở định dạng phù hợpSau 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 là xấu xí đó?
Đây là CSS
2Mã 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à
12 chiều rộng 100% để chúng đi hết cỡ. Các nhãn có chiều cao dòng tối thiểu là 1. 9rem [30. 4px], vì vậy chúng không ở quá gần với đầu vào tương ứng của chúngChú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
12, chúng tôi đặt lề trên bằng 0. 6rem để đẩy nó xuống một chútChú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 để tách đường viền mà nó tạo ra xung quanh các phần tử
3 mà nó được bao bọc trong đóCuối cùng ta được mẫu đẹp bên dưới
Sự kết luận
Tô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