Hướng dẫn create a register page in html - tạo trang đăng ký bằng html
Tìm hiểu làm thế nào để tạo một biểu mẫu đăng ký với CSS. Show
Đăng kýVui lòng điền vào biểu mẫu này để tạo tài khoản. Mật khẩu Bạn co săn san để tạo một tai khoản? Đăng nhập Hãy tự mình thử » Cách tạo biểu mẫu đăng kýBước 1) Thêm HTML:Sử dụng một phần tử để xử lý đầu vào. Bạn có thể tìm hiểu thêm về điều này trong hướng dẫn PHP của chúng tôi. Sau đó thêm các đầu vào (với nhãn phù hợp) cho mỗi trường: Thí dụ& nbsp; & nbsp; & nbsp; & nbsp; Đăng ký & nbsp; & nbsp; & nbsp; Vui lòng điền vào biểu mẫu này để tạo tài khoản. & NBSP; & nbsp; & nbsp; RegisterPlease fill in this form to create an account. & nbsp; & nbsp; & nbsp; Email & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Mật khẩu & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Lặp lại mật khẩu & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Bằng cách tạo một tài khoản, bạn đồng ý với Điều khoản & Quyền riêng tư của chúng tôi. & nbsp; & nbsp; & nbsp; & nbsp; Bạn co săn san để tạo một tai khoản? Đăng nhập. & NBSP; Already have an account? Sign in. Bước 2) Thêm CSS:Thí dụ& nbsp; & nbsp; & nbsp; & nbsp; Đăng ký & nbsp; & nbsp; & nbsp; Vui lòng điền vào biểu mẫu này để tạo tài khoản. & NBSP; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Email & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Mật khẩu & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Lặp lại mật khẩu & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Bằng cách tạo một tài khoản, bạn đồng ý với Điều khoản & Quyền riêng tư của chúng tôi. & nbsp; & nbsp; & nbsp; & nbsp; Bạn co săn san để tạo một tai khoản? Đăng nhập. & NBSP; Bước 2) Thêm CSS: * {Box-Sizing: Border-Box} / * Thêm phần đệm vào container */. Container {& nbsp; Đệm: 16px;} / * Các trường đầu vào toàn chiều rộng */đầu vào [type = text], input [type = password] {& nbsp; chiều rộng: 100%; & nbsp; Đệm: 15px; & nbsp; Biên độ: 5px 0 22px 0; & nbsp; Hiển thị: Inline-Block; & nbsp; Biên giới: Không có; & nbsp; Bối cảnh: #f1f1f1;} đầu vào [type = text]: Focus, input [type = password]: focus {& nbsp; màu nền: #DDD; & nbsp; Đề cương: Không;} Go to our HTML Form Tutorial to learn more about HTML Forms. / * Ghi đè các kiểu mặc định của HR */HR {& nbsp; biên giới: 1px rắn #f1f1f1; & nbsp; Biên độ bottom: 25px;} Go to our CSS Form Tutorial to learn more about how to style form elements. Nếu bạn đã tìm thấy chính mình ở đây, bạn có thể đã đạt được một số rào cản trong khi cố gắng tạo một mẫu đăng ký trong HTML. Đừng lo lắng: Bạn không đơn độc. Mã hóa ngay cả các hình thức đăng ký đơn giản nhất trong HTML có thể là một quá trình tốn thời gian, thường là bực bội. 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ị mất một vài lần) để trở nên thông thạo. Chúng tôi có thể giúp bạn phát hành 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 mẫu đăng ký đơn giản cho trang web của bạn. 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ó mã dễ dàng, dễ tùy chỉnh hơn. Tạo biểu mẫu đăng ký HTML trong 6 bướcỞ đây, cách tạo ra một biểu mẫu HTML đơn giản trong sáu bước bao gồm mã. Bước 1. Chọn Trình chỉnh sửa 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. Các 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 mẫu đăng ký. Nếu bạn đ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 đã giành được cho bạn bất kỳ rườm rà hoặc các tính năng bổ sung, nhưng nó sẽ hoàn thành công việc. Chuyển đến Định dạng> Văn bản đơn giản để đảm bảo Textedit không thay đổi các biểu tượng của bạn. Nếu bạn muốn một công cụ chỉnh sửa HTML được chỉ định, có hàng tá (nếu không phải hàng trăm) để lựa chọn. Không có tùy chọn nào tốt nhất, nhưng có một vài tính năng chính để tìm kiếm nếu bạn sẽ tải xuống một công cụ mới. 1. Phát hiện biểu thị: Tự động làm nổi bật các lỗi cú pháp để giúp sửa chữa dễ dàng hơn.2. Auto-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 một loạt thời gian với mã dài) .3. Syntax Điểm nổi bật: Áp dụng màu sắc cho các thẻ HTML khác nhau dựa trên các danh mục nhất định để giúp đọc và sắp xếp mã của bạn dễ dàng hơn. Nghiên cứu và thay thế: Xác định vị trí và ghi đè tất cả các phiên bản của một mã cụ thể thay vì chỉnh sửa từng bản riêng lẻ. Error detection: Automatically highlight syntax errors to make fixes easier. Nếu bạn thực sự tham gia vào mã hóa, có một vài tính năng nữa để tìm kiếm, nhưng để tạo một mẫu đăng ký cơ bản, 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 mình? Hãy thử Codepen. Barebones? Notepad ++. Một giao diện người dùng tối giản và trường đầu vào trực quan? Văn bản siêu phàm tất cả các cách. Người đồng sáng lập và Code-GEEK, Dean, đồng sáng lập của chúng tôi bằng mã vs. "Từ một quan điểm kỳ lạ so với mã phù hợp với Snuggly vào Stack PaperForm's Tech và có các plugin phát triển từ xa tuyệt vời mà tôi yêu thích. Thật tuyệt vời cho các công cụ HTML, và siêu tùy chỉnh nếu bạn thích công cụ của mình trông đẹp 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 tùy chọn tương đối thân thiện với người dùng và miễn phí như văn bản và học hỏi tuyệt vời khi bạn đi. Điều đáng chú ý là hầu hết các biên tập viên HTML đã giành được bất kỳ mẫu nào mà họ chỉ cung cấp cho bạn trang trống. Khi nói đến việc tạo ra hình thức, nghệ thuật là tất cả trên bạn. Bước 2. Tạo tệp HTML của bạnThời gian để xuống kinh doanh. Mở trình soạn thảo văn bản của bạ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ể dán nhãn biểu mẫu của mình theo cách bạn thích, như bestformever.html. Khi bạn đã đăng ký vào trình soạn thảo rằng bạn đang tạo mã HTML, nó sẽ tự động tạo mã sau cho bạn:
Một số biên tập viên đã giành được tự động. 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Được rồi. Đã đến lúc bắt đầu thêm mã có liên quan và biến tệp HTML Barebones thành một mẫu đăng ký. Đây là mã mà chúng tôi sẽ sử dụng.
Nếu bạn mới sử dụng HTML, điều đó 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ố khá dễ dàng hơn một chút nếu bạn có khả năng xử lý những điều cơ bản. Chúng tôi sẽ phá vỡ chúng bên dưới nếu bạn quan tâm. Hãy thoải mái bỏ qua trước nếu không. Một biểu mẫu HTML được tạo thành từ các yếu 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. Mỗi phần tử có thẻ cụ thể của riêng mình, từ đó, từ giữa các chevron. Ví dụ: thẻ HTML xác định mã của bạn là một biểu mẫu, trong khi có thể được sử dụng để thu thập đầu vào của người dùng. Những yếu tố này giống như giày: chúng luôn đi theo cặp. Tất cả các thẻ bạn muốn đưa vào biểu mẫu của bạn phải được chèn giữa các thẻ mở và đóng. Đó là những chú thích lấp lánh. Mã HTML cơ bản (ở trên) sẽ xuất ra một cái gì đó trông giống như thế này: Vậy làm thế nào mà phép thuật xảy ra? Thẻ cho biết biểu mẫu của bạn sắp xếp các câu trả lời liên tiếp, trong khi (viết tắt của dữ liệu bảng) biển chỉ dẫn mà bạn muốn ghi lại bất kỳ loại người trả lời nào. Trong trường hợp này, chúng tôi đã thêm hai trường vì sự đơn giản của lợi ích:
Về mặt hình thức, hãy để trung thực. Nó không giành được bất kỳ giải thưởng thiết kế nào. Trừ khi bạn dành thời gian để học các trong và ngoài của HTML, mẫu đăng ký của bạn sẽ trông khá buồn tẻ. Đừng bắn người đưa tin. Bước 4. Thêm các trường bổ sungEmail và mật khẩu là một khởi đầu tốt, nhưng hầu hết các doanh nghiệp cần thêm một chút từ mẫu đăng ký của họ. May mắn thay, một khi bạn biết cách thêm một trường, thêm một trường khác là quá khó. Các lựa chọn của bạn rất đa dạng. Bạn có thể thêm một hình ảnh, nút radio hoặc trường văn bản mở dựa trên những gì bạn chọn. Chỉ cần sao chép mã bên dưới và chèn loại đầu vào bạn muốn giữa Chevrons.
|