Home-theater-designers
Việc thu thập dữ liệu từ người dùng trang web có thể được thực hiện theo nhiều cách khác nhau. Các biểu mẫu trên các trang web có thể có một chức năng đơn giản như đăng ký người dùng nhận bản tin, hoặc một mục đích phức tạp hơn như đóng vai trò như một mẫu đơn xin việc.
Tuy nhiên, có một điểm chung mà tất cả các dạng từ đơn giản đến phức tạp này đều có điểm chung là HTML và cụ thể hơn là HTML nhãn.
Sử dụng thẻ biểu mẫu
Các thẻ là một phần tử HTML được sử dụng như một vùng chứa để bao bọc các phần tử khác có thể được coi là khối xây dựng cho biểu mẫu. Một số yếu tố cơ bản này bao gồm thẻ, thẻ, và nhãn.
Các thẻ có một thuộc tính quan trọng góp phần vào chức năng của nó. Thuộc tính này được gọi là hành động và được sử dụng để xác định tệp mà dữ liệu được nhập vào biểu mẫu sẽ được chuyển đến.
Sử dụng ví dụ về thẻ
Ví dụ trên cho thấy cách sử dụng thẻ biểu mẫu trong các dự án của bạn. Một trong những điều cần lưu ý chính là nếu bạn mở thẻ biểu mẫu, bạn nên nhớ đóng thẻ đó. Điều này sẽ tạo cấu trúc biểu mẫu và cũng đảm bảo rằng dữ liệu nhập vào biểu mẫu được xử lý chính xác.
Sử dụng thẻ
Các được sử dụng để mô tả dữ liệu trong mỗi trường đầu vào trong một biểu mẫu. Thẻ này có một vì , được sử dụng để nâng cao chức năng của biểu mẫu.
Có liên quan: Các trình chỉnh sửa HTML trực tuyến miễn phí tốt nhất để kiểm tra mã của bạn
Nếu id được gán cho trường đầu vào tương ứng khớp với vì giá trị trong thì trường nhập đó sẽ tự động được tô sáng khi bạn nhấp vào nhãn.
Sử dụng ví dụ về thẻ
First Name:
Trong ví dụ trên, bạn có thể thấy rằng vì thuộc tính được gán giá trị biệt danh . Do đó, nếu bạn tạo một trường đầu vào với biệt danh id, trường này sẽ được đánh dấu mỗi khi bạn nhấp vào Ngày thứ nhất Tên nhãn mác.
Sử dụng thẻ
Ở dạng cơ bản nhất, thẻ có thể được xem như một hộp văn bản. Các thẻ thu thập dữ liệu từ người dùng và một trong những tính năng quan trọng hơn của nó là kiểu thuộc tính. Các kiểu thuộc tính cho biết loại dữ liệu mà hộp văn bản này có thể thu thập.
Có liên quan: Cách tạo biểu mẫu xếp chồng trong CSS
Có một số giá trị khác nhau mà bạn có thể gán cho kiểu nhưng một số thuộc tính phổ biến hơn như sau.
- Chữ
- Con số
- Hình ảnh
- Ngày
- Hộp kiểm
- Đài
- Mật khẩu
Sử dụng thẻ Ví dụ
First Name:
Các trong đoạn mã trên có ba thuộc tính khác nhau mà mỗi thuộc tính có một chức năng riêng. Các kiểu thuộc tính được gán một giá trị văn bản có nghĩa là hộp văn bản sẽ chỉ chấp nhận các ký tự.
Các Tôi thuộc tính là số nhận dạng duy nhất cho hộp văn bản và điều này rất quan trọng vì nó cung cấp quyền truy cập vào phần tử này từ tệp CSS. Các Tên thuộc tính cũng là một định danh duy nhất; tuy nhiên, thuộc tính name được sử dụng để tương tác với một phần tử từ phía máy chủ của quá trình phát triển.
Các Tôi và Tên các thuộc tính thường được gán cùng một giá trị vì một thuộc tính cung cấp quyền truy cập vào một phần tử từ phía máy khách và phần tử kia từ phía máy chủ.
Sử dụng phần tử hộp kiểm
Phần tử hộp kiểm rất độc đáo so với các phần tử khác mà bạn có thể sử dụng với nhãn. Nó cho phép người dùng chọn một hoặc nhiều tùy chọn từ danh sách các lựa chọn liên quan. Hộp kiểm được dễ dàng xác định vì chúng được biểu thị bằng các hộp vuông nhỏ chứa dấu kiểm khi được chọn.
Sử dụng ví dụ về phần tử hộp kiểm
Programming Languages:
Java
JavaScript
Python
Trong ví dụ trên, mỗi phần tử hộp kiểm có một thuộc tính giá trị và điều này rất quan trọng vì nó giúp phân biệt từng tùy chọn hộp kiểm với bộ sưu tập. Do đó, nếu người dùng chọn 'Java' từ các tùy chọn ở trên, dữ liệu sẽ phản ánh điều đó.
Sử dụng thẻ và các phần tử radio
Các thẻ và các phần tử radio tương tự nhau theo nghĩa là chúng chỉ cho phép người dùng chọn một giá trị duy nhất tại một thời điểm; do đó, người ta có thể nói rằng chúng có cùng một chức năng. Tuy nhiên, chúng rất khác nhau về ngoại hình.
Tuy nhiên, phần tử radio gần giống với phần tử hộp kiểm hơn, với phần tử radio, bạn có hình tròn thay vì hình vuông.
Các thẻ tạo ra những gì về cơ bản là một hộp thả xuống, cho phép người dùng chọn một giá trị duy nhất.
Sử dụng ví dụ về thẻ và phần tử radio
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Sử dụng phần tử ngày
Yếu tố ngày tháng tạo ra một hộp văn bản nhỏ tạo lịch khi được nhấp vào. Sử dụng ngày như một loại đầu vào trong biểu mẫu của bạn bảo vệ chống lại người dùng có khả năng nhập ngày không chính xác, điều này có thể dẫn đến việc thu thập dữ liệu sai.
Sử dụng Ví dụ về Phần tử Ngày
Sử dụng phần tử email và mật khẩu
Khi một nhà phát triển chỉ định các giá trị email hoặc mật khẩu cho thuộc tính type của một , chúng tạo ra một hộp văn bản giống hệt nhau. Tuy nhiên, khi bạn bắt đầu sử dụng các hộp này, sự khác biệt trở nên rõ ràng.
Phần tử email giám sát dữ liệu được nhập vào hộp văn bản và đảm bảo rằng mỗi lần gửi đáp ứng yêu cầu tiêu chuẩn của một địa chỉ email; có nghĩa là có một phần cục bộ, theo sau là ký hiệu @ và kết thúc bằng miền.
Sử dụng ví dụ về phần tử email
Trong ví dụ trên, bạn được giới thiệu với một thuộc tính mới có tên là trình giữ chỗ và thuộc tính này nhận một giá trị văn bản được hiển thị trong hộp văn bản bằng màu xám mờ. Văn bản này được sử dụng để chỉ ra dữ liệu sẽ được đặt trong hộp văn bản như được thấy trong ví dụ trên.
Phần tử mật khẩu biến các ký tự thành dấu hoa thị khi chúng được nhập vào hộp văn bản. Do đó, nếu màn hình máy tính của bạn hiển thị cho người khác, họ sẽ không nhìn thấy mật khẩu bạn nhập.
Sử dụng ví dụ về phần tử mật khẩu
Sử dụng thẻ nút
Trong một biểu mẫu, thường có hai loại nút khác nhau. Đầu tiên là nút gửi, gửi dữ liệu đã nhập trong biểu mẫu đến giá trị được gán cho thuộc tính action (thuộc tính này nằm trong < hình thức> nhãn).
Ví dụ về nút gửi
Submit
Loại nút thứ hai thường được sử dụng trong biểu mẫu là nút đặt lại, xóa dữ liệu trong biểu mẫu để người dùng có thể nhập dữ liệu mới. Các thẻ có một kiểu thuộc tính, được sử dụng để chỉ ra chức năng của nút. Trong ví dụ trên, kiểu thuộc tính là gán giá trị Gửi đi do đó, một nút có kiểu giá trị của cài lại được sử dụng để đặt lại biểu mẫu.
Ví dụ về nút Reset
Reset
Tạo biểu mẫu
Để tạo một biểu mẫu đơn giản trong HTML, bạn sẽ cần bao gồm tất cả các phần tử được đề cập ở trên trong một nhãn.
Tạo một ví dụ về biểu mẫu
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
Đoạn mã trên sẽ tạo ra biểu mẫu sau:
ứng dụng âm nhạc ngoại tuyến miễn phí cho android
Bây giờ bạn có thể tạo một biểu mẫu đơn giản trong HTML
Bài viết này cung cấp cho bạn tất cả các công cụ để tạo một biểu mẫu HTML chức năng. Nó xác định các thẻ HTML khác nhau được sử dụng trong việc tạo biểu mẫu và khám phá các thuộc tính khác nhau có thể được sử dụng với các thẻ này.
Tuy nhiên, hầu hết các biểu mẫu mà bạn thấy trên các trang web đều có một thành phần bổ sung; CSS, được sử dụng để làm cho biểu mẫu trở nên sống động và làm cho nó đẹp hơn về mặt thẩm mỹ.
Đăng lại Đăng lại tiếng riu ríu E-mail Bảng gian lận thuộc tính CSS3 thiết yếuNắm vững cú pháp CSS cần thiết với bảng gian lận thuộc tính CSS3 của chúng tôi.
Đọc tiếp Chủ đề liên quan- Lập trình
- HTML
- Phát triển web
- Hướng dẫn viết mã
Kadeisha Kean là Nhà phát triển Phần mềm Full-Stack và Người viết Kỹ thuật / Công nghệ. Cô ấy có khả năng khác biệt để đơn giản hóa một số khái niệm công nghệ phức tạp nhất; sản xuất vật liệu có thể dễ dàng hiểu được bởi bất kỳ người mới làm quen với công nghệ. Cô ấy đam mê viết lách, phát triển phần mềm thú vị và đi du lịch thế giới (thông qua phim tài liệu).
Xem thêm từ Kadeisha KeanTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký