Cách tạo biểu mẫu trong HTML và CSS

Chúng tôi phải tạo biểu mẫu đăng nhập và đăng ký trong tài liệu Html nhiều lần để hiển thị biểu mẫu trên trang web. Vì vậy, trang này sẽ mô tả cách tạo cả hai biểu mẫu trong tài liệu Html bằng các thẻ khác nhau

mẫu đăng nhập

Nếu chúng ta muốn tạo một form đăng nhập trong tài liệu Html để hiển thị form trên trang web thì chúng ta làm theo các bước hoặc sử dụng các thẻ sau. Sử dụng các thẻ hoặc các bước này, chúng tôi có thể dễ dàng tạo biểu mẫu

Bước 1. Đầu tiên, chúng tôi phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng tôi muốn tạo biểu mẫu đăng nhập

Bước 2. Bây giờ, chúng ta phải đặt con trỏ tại điểm mà chúng ta muốn tạo biểu mẫu giữa điểm bắt đầu và đóng thẻ trong tài liệu Html. Và, sau đó chúng ta phải nhập thẻ có tên là

Bước 3. Bây giờ, chúng ta phải sử dụng thẻ để xác định tên cho các phần tử. Vì vậy, chúng ta phải gõ thẻ thứ hai để hiển thị User Id. Sau khi gõ tên, chúng ta phải đóng thẻ

Bước 4. Bây giờ, chúng ta phải sử dụng thẻ, cho phép người dùng chèn các ký tự vào hộp. Vì vậy, chúng ta phải gõ thẻ này với thuộc tính của nó để chèn User-id. Không cần đóng thẻ đầu vào vì đó là thẻ không ghép nối

Bước 5. Một lần nữa, chúng ta phải nhập thẻ để hiển thị nhãn dưới dạng mật khẩu. Và, sau đó chúng ta phải nhập mật khẩu bằng cách sử dụng thẻ được hiển thị trong khối sau

Bước 6. Và sau đó, chúng ta phải cung cấp giá trị gửi trong thuộc tính loại để gửi biểu mẫu

Bước 6. Và, cuối cùng, chúng ta phải lưu tệp Html và sau đó chạy tệp này và sau đó chúng ta sẽ thấy biểu mẫu đăng nhập trên trang web trong trình duyệt

Đầu ra của mã Html ở trên được hiển thị trong ảnh chụp màn hình sau

Mẫu đăng ký

Nếu chúng ta muốn tạo form đăng ký trong tài liệu Html thì phải làm theo các bước hoặc sử dụng các thẻ sau. Sử dụng các thẻ hoặc các bước này, chúng tôi có thể dễ dàng tạo biểu mẫu

Bước 1. Đầu tiên, chúng tôi phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng tôi muốn tạo biểu mẫu đăng ký

Bước 2. Bây giờ, chúng ta phải đặt con trỏ tại điểm mà chúng ta muốn tạo biểu mẫu giữa điểm bắt đầu và đóng thẻ trong tài liệu Html

Và, sau đó chúng ta phải nhập thẻ có tên là. Đây là thẻ đầu tiên được sử dụng để tạo biểu mẫu Html

Bước 3. Nhãn. Bây giờ, chúng ta phải xác định nhãn, được sử dụng để biểu thị tên mà phần tử được tạo

Bước 4. Trường văn bản và mật khẩu. chúng ta cũng có thể dễ dàng tạo các trường văn bản và mật khẩu bằng cách sử dụng thẻ đầu vào với giá trị khác nhau của thuộc tính loại

Bước 5. Nút radio. Chúng tôi cũng có thể tạo nút radio để chọn một tùy chọn từ danh sách đã cho. Để tạo nút radio, chúng ta phải cung cấp giá trị "radio" trong thuộc tính type của thẻ đầu vào

Bước 6. hộp kiểm. Chúng tôi cũng có thể tạo các hộp kiểm để chọn một hoặc nhiều tùy chọn từ danh sách đã cho. Để tạo hộp kiểm trong biểu mẫu, chúng ta phải cung cấp giá trị "hộp kiểm" trong thuộc tính loại

Bước 7. Trình đơn thả xuống. Nếu chúng tôi muốn tạo menu thả xuống để chọn một tùy chọn. Vì vậy, để tạo nó, chúng ta phải nhập phần tử tùy chọn trong phần tử chọn

Nếu bạn thấy mình ở đây, có lẽ bạn đã gặp phải một số rào cản khi cố gắng tạo biểu mẫu đăng ký bằng HTML. Đừng lo. bạn không cô đơn. Mã hóa ngay cả biểu mẫu đăng ký đơn giản nhất trong HTML có thể là một quá trình tốn thời gian và thường gây khó chịu

HTML5 là mã tiêu chuẩn được sử dụng để làm cho hầu hết các trang web hoạt động. Đó là ngôn ngữ của internet. Nhưng giống như bất kỳ ngôn ngữ nào, bạn sẽ cần phải làm việc chăm chỉ (và bị lạc một vài lần) để trở nên thông thạo

Chúng tôi không thể giúp bạn thông thạo HTML trong 3.000 từ. Nhưng chúng tôi có thể cung cấp cho bạn thông tin cơ bản bạn cần để tạo một biểu mẫu đăng ký đơn giản cho trang web của mình. Trong bài đăng này, chúng tôi sẽ làm điều đó và cung cấp cho bạn một giải pháp không cần mã dễ dàng hơn, có thể tùy chỉnh hơn

Tạo biểu mẫu đăng ký HTML trong 6 bước

Dưới đây là cách tạo một biểu mẫu HTML đơn giản trong sáu bước—bao gồm mã. Đọc tiếp để biết hướng dẫn từng bước hoặc xem video bên dưới

Bước 1. Chọn trình soạn thảo HTML

Giống như bạn cần một trình xử lý văn bản để tạo tài liệu văn bản, bạn cần một trình soạn thảo văn bản để tạo mã HTML. Những công cụ phát triển này chuyển đổi mã kỳ lạ và tuyệt vời mà bạn nhập vào biểu mẫu đăng ký

Nếu đang tìm kiếm giải pháp đơn giản nhất, bạn luôn có thể viết mã của mình trong TextEdit trên máy Mac và lưu tệp dưới dạng trang web. Điều này sẽ không cung cấp cho bạn bất kỳ kiểu cách hoặc tính năng bổ sung nào, nhưng nó sẽ hoàn thành công việc. Chuyển đến Định dạng > Văn bản thuần túy để đảm bảo rằng TextEdit không làm thay đổi ký hiệu của bạn

Nếu bạn muốn có một công cụ chỉnh sửa HTML được chỉ định, có hàng tá (nếu không muốn nói là hàng trăm) để lựa chọn. Không có tùy chọn “tốt nhất”, nhưng có một số tính năng chính cần tìm nếu bạn định tải xuống một công cụ mới

1. Phát hiện lỗi. Tự động đánh dấu các lỗi cú pháp để sửa dễ dàng hơn. ‌
2. ‌Tự động hoàn thành. Đề xuất các phần tử HTML có liên quan dựa trên các thay đổi trước đó (giúp bạn tiết kiệm rất nhiều thời gian với mã dài). ‌
3. ‌‌Cú pháp nổi bật. Áp dụng màu cho các thẻ HTML khác nhau dựa trên các danh mục nhất định để giúp bạn đọc và sắp xếp mã dễ dàng hơn. ‌
4. ‌Tìm kiếm và thay thế. Xác định vị trí và ghi đè lên tất cả các phiên bản của một mã cụ thể thay vì chỉnh sửa từng mã riêng lẻ.

Nếu bạn thực sự bắt đầu viết mã thì có một số tính năng khác cần chú ý, nhưng để tạo một biểu mẫu đăng ký cơ bản thì bốn tính năng này là quá đủ

Bây giờ khi nói đến việc chọn một ứng dụng, sự lựa chọn là của bạn. Không có câu trả lời đúng. Muốn một cái gì đó mà bạn có thể sử dụng trong trình duyệt của bạn? . Xương trần? . Giao diện người dùng tối giản và trường nhập liệu trực quan?

Người đồng sáng lập và người đam mê mã thường trú của chúng tôi, Dean, thề với VS Code

"Từ một quan điểm kỳ lạ, Mã VS vừa khít với ngăn xếp công nghệ của Paperform và có các plugin phát triển từ xa tuyệt vời mà tôi yêu thích. Nó cũng tuyệt vời cho nội dung HTML và siêu tùy biến nếu bạn muốn các công cụ của mình trông đẹp mắt trong khi vẫn có tất cả các chức năng bạn cần

Nếu bạn bị choáng ngợp bởi các tùy chọn, chúng tôi khuyên bạn nên tải xuống một tùy chọn tương đối thân thiện với người dùng và miễn phí như Sublime Text và tìm hiểu khi bạn tiếp tục

Cần lưu ý rằng hầu hết các trình soạn thảo HTML sẽ không đi kèm với bất kỳ mẫu biểu mẫu nào—chúng chỉ cung cấp cho bạn trang trống. Khi nói đến việc tự tạo biểu mẫu, nghệ thuật là tất cả ở bạn

Bước 2. Tạo tệp HTML của bạn

Đã đến lúc bắt tay vào công việc. Mở trình soạn thảo văn bản bạn chọn, tạo một tệp mới và lưu nó với. phần mở rộng html. Bạn có thể gắn nhãn biểu mẫu của mình theo cách bạn muốn, như bestformever. html

Sau khi bạn đăng nhập vào trình chỉnh sửa rằng bạn đang tạo mã HTML, nó sẽ tự động tạo mã sau cho bạn

Một số trình chỉnh sửa sẽ không tự động điền. Không sao đâu. Chỉ cần sao chép và dán mã ở trên và bạn sẽ nhận được hiệu ứng tương tự

Bước 3. Thêm các trường văn bản cơ bản

Ổn thỏa. Đã đến lúc bắt đầu thêm mã có liên quan và biến tệp HTML cơ bản đó thành biểu mẫu đăng ký. Đây là mã chúng tôi sẽ sử dụng

   Company Registration Form 
 
 
 
   Email Address:        Password:       
 
 

Nếu bạn chưa quen với HTML, nó có thể trông giống như một đống chữ cái và biểu tượng. Bạn không cần phải hiểu ý nghĩa của chúng, nhưng việc khắc phục sự cố sẽ dễ dàng hơn một chút nếu bạn nắm được những điều cơ bản

Chúng tôi sẽ chia nhỏ chúng bên dưới nếu bạn quan tâm. Hãy bỏ qua phía trước nếu không

Biểu mẫu HTML được tạo thành từ các phần tử biểu mẫu. Đây là những thứ như hộp văn bản, nút radio, hộp kiểm và menu thả xuống giúp mọi người có thể tương tác với biểu mẫu trực tiếp của bạn

Làm cách nào để tạo biểu mẫu đăng ký trong HTML và CSS?

Làm cách nào để tạo biểu mẫu bằng HTML CSS và JavaScript?