Cách Tạo Form Đăng Nhập Bằng Html / TOP 12 # Xem Nhiều Nhất & Mới Nhất 5/2023 # Top View

5

/

5

(

1

bình chọn

)

HTML Form là gì?

HTML Form là tài liệu lưu trữ thông tin của người dùng trên máy chủ web bằng cách người dùng nhập liệu vào form. HTML Form chứa các loại thông tin khác nhau như tên người dùng, mật khẩu, số liên lạc, id email, v.v.

Các phần tử được sử dụng trong biểu mẫu HTML là hộp kiểm, hộp nhập, các nút radio, nút gửi, v.v. Sử dụng các phần tử này là thông tin của người dùng được gửi trên một máy chủ web.

Các hình thức thẻ được sử dụng để tạo ra một hình thức HTML.

Ví dụ tạo form đăng nhập HTML

Cách tạo form đăng nhập HTML cho các phần tử đầu vào

Tạo trường văn bản trong form đăng nhập HTML

Trường văn bản là trường nhập một dòng cho phép người dùng nhập văn bản. Các điều khiển nhập Trường văn bản được tạo bằng cách sử dụng phần tử “đầu vào” với thuộc tính kiểu có giá trị là “văn bản”.

Tạo trường mật khẩu cho Form  HTML

Mật khẩu là một loại trường văn bản trong đó văn bản được nhập được che bằng dấu hoa thị hoặc dấu chấm để ngăn chặn nhận dạng người dùng từ một người khác đang nhìn vào màn hình. Các điều khiển nhập Trường mật khẩu được tạo bằng cách sử dụng phần tử “đầu vào” với thuộc tính kiểu có giá trị là “mật khẩu”.

        <input type="password" name="user-pwd"

Tạo các nút Radio trong Form  HTML

Các Nút Radio được sử dụng để cho phép người dùng chọn chính xác một tùy chọn từ danh sách các tùy chọn được xác định trước. Các điều khiển đầu vào của Nút radio được tạo bằng cách sử dụng phần tử “input” với thuộc tính type có giá trị là “radio”.

        SELECT GENDER

 Tạo hộp kiểm trong Form HTML

Hộp kiểm được sử dụng để cho phép người dùng chọn một hoặc nhiều tùy chọn từ một nhóm tùy chọn được xác định trước. Các điều khiển đầu vào hộp kiểm được tạo bằng cách sử dụng phần tử “đầu vào” có thuộc tính loại có giá trị là “hộp kiểm”.

Các hộp chọn tệp trong form HTML

Các hộp chọn tệp được sử dụng để cho phép người dùng chọn một tệp cục bộ và gửi nó dưới dạng tệp đính kèm tới máy chủ web. Nó tương tự như một hộp văn bản có nút cho phép người dùng duyệt tìm tệp. Thay vì duyệt tìm tệp tệp, đường dẫn và tên của tệp cũng có thể được viết. Các hộp chọn tệp được tạo bằng phần tử “input” với thuộc tính type có giá trị là “tệp”.

Vùng văn bản trong Form HTML

Vùng Văn bản là một điều khiển nhập văn bản nhiều dòng cho phép người dùng cung cấp mô tả hoặc văn bản trong nhiều dòng. Điều khiển đầu vào Vùng văn bản được tạo bằng phần tử “vùng văn bản”.

        <textarea rows="5" cols="50" name="Description"

Chọn hộp trong form HTML

Hộp chọn được sử dụng để cho phép người dùng chọn một hoặc nhiều tùy chọn từ danh sách tùy chọn kéo xuống. Các hộp chọn được tạo bằng hai phần tử là “select” và “option”. Các mục trong danh sách được xác định trong phần tử select.

Đặt lại và gửi các nút

Nút gửi cho phép người dùng gửi dữ liệu biểu mẫu đến máy chủ. Nút dặt lại được sử dụng để đặt lại dữ liệu biểu mẫu và sử dụng các giá trị mặc định.

Các thuộc tính được trong Form HTML

Thuộc tính hành động

Hành động được thực hiện sau khi gửi biểu mẫu được quyết định bởi thuộc tính hành động. Nói chung, dữ liệu biểu mẫu được gửi đến một trang web trên máy chủ web sau khi người dùng nhấp vào nút gửi.

Ví dụ

Thuộc tính target trong HTML Forms

Thuộc tính Target được sử dụng để chỉ định xem kết quả đã gửi sẽ mở trong cửa sổ hiện tại, tab mới hay trên khung mới. Giá trị mặc định được sử dụng là “self” dẫn đến việc gửi biểu mẫu trong cùng một cửa sổ. Để mở kết quả biểu mẫu trong tab trình duyệt mới, giá trị phải được đặt thành “trống”.

Thuộc tính tên trong Form Html

Thuộc tính tên là bắt buộc cho mỗi trường đầu vào. Nếu thuộc tính name không được chỉ định trong trường đầu vào thì dữ liệu của trường đó sẽ không được gửi đi.

Trong một website để thu thập thông tin cũng như dễ dàng quản lý người dùng, việc tạo một form đăng ký là điều cần thiết đặc biệt là các website bán hàng hay forum. Bài hôm nay chúng ta sẽ cùng tìm hiểu cách tạo form đăng ký bằng ngôn ngữ HTML. Bài học nằm trong Serie học HTML căn bản.

Tạo form đăng ký bằng ngôn ngữ HTML như thế nào?

Tương tự như bài tạo form đăng nhập bằng HTML chúng ta tiếp tục tạo form đăng ký dựa trên bố cục của 1 Table gồm 11 dòng và 2 cột. Sử dụng thuộc tính colspan trong Table.

Bạn nên xem

: Các thẻ HTML định dạng Table

Code xử lý:

Code từ đoạn đầu đến nhập lại password

Code từ nhập lại password đến ngày sinh

Code từ ngày sinh đến sở thích

Code từ sở thích đến phần còn lại

Lời kết : Kết thúc bài hôm nay bạn đã có thể nắm rõ cách tạo form đăng ký bằng ngôn ngữ HTML là như thế nào, việc nắm được những cú pháp cũng như các tag HTML tạo form như trên giúp bạn khi gặp những form phức tạp cũng cảm thấy nhẹ nhàng hơn.

Những bài bạn nên xem:

3.8

/

5

(

9

bình chọn

)

Ngay sau đây, chúng ta sẽ đi vào chi tiết bài thực hành hôm nay. Mình xin phân tích về các thành phần cơ bản của form đăng ký mà chúng ta sẽ làm gồm:

Tiêu đề form đăng ký

Ô nhập dữ liệu cho tài khoản đăng nhập, mật khẩu, giới tính, ngày sinh, sở thích, giới thiệu bản thân

Nút nhấn gửi dữ liệu, nút nhấn reset form.

Kết quả và yêu cầu cho form đăng ký bằng html và css

(Ảnh chụp màn hình sau khi form đăng ký hoàn thiện.)

Yêu cầu: form đăng ký có khả năng cho phép người dùng nhập dữ liệu, có thể hiển thị tốt trên nhiều thiết bị, bao gồm điện thoại di động, laptop, máy tính bảng.

Cấu trúc file và thư mục

Bắt đầu viết mã html cho form đăng ký

Các bạn mở file chúng tôi bằng phần mềm soạn thảo mã nguồn bất kỳ, và dán nội dung như sau, sau đó các bạn lưu file.

Định dạng form đăng ký bằng css

Các bạn mở file chúng tôi bằng phần mềm soạn thảo mã nguồn bất kỳ, và dán nội dung như sau, sau đó các bạn lưu file.

*{ padding: 0px; margin: 0px; font-family: sans-serif; box-sizing: border-box; } .container{ width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } .col-6{ float: left; width: 50%; } .margin_b{ margin-bottom: 7.5px; } .clear{ clear: both; } header{ background-color: #cccccc; min-height: 70px; padding: 15px; } main{ background-color: #dddddd; min-height: 300px; padding: 7.5px 15px; } footer{ background-color: #cccccc; min-height: 70px; padding: 15px; } h1{ color: #009999; font-size: 20px; margin-bottom: 30px; } .register-form{ width: 100%; max-width: 400px; margin: 20px auto; background-color: #ffffff; padding: 15px; border: 2px dotted #cccccc; border-radius: 10px; } .input-box{ margin-bottom: 10px; } .input-box input[type='text'], .input-box input[type='password'], .input-box input[type='date']{ padding: 7.5px 15px; width: 100%; border: 1px solid #cccccc; outline: none; font-size: 16px; display: inline-block; height: 40px; color: #666666; } .input-box select{ padding: 7.5px 15px; width: 100%; border: 1px solid #cccccc; outline: none; font-size: 16px; display: inline-block; height: 40px; color: #666666; } .input-box option{ font-size: 16px; } .input-box input[type='checkbox']{ height: 1.5em; width: 1.5em; vertical-align: middle; line-height: 2em; } .input-box textarea{ padding: 7.5px 15px; width: 100%; border: 1px solid #cccccc; outline: none; font-size: 16px; min-height: 120px; color: #666666; } .btn-box{ text-align: right; margin-top: 30px; } .btn-box button{ padding: 7.5px 15px; border-radius: 2px; background-color: #009999; color: #ffffff; border: none; outline: none; }

Xem kết quả form đăng ký trên trình duyệt

Như vậy là đã hoàn tất, các bạn có thể xem trực tiếp kết quả trên trình duyệt bằng cách nhấn chuột phải vào file chúng tôi và chọn “open with”, tiếp đến chọn trình duyệt mà bạn muốn xem kết quả.

Lưu ý khi thực hành viết html và css

Trước tiên, chúng ta sẽ tiến hành viết html đơn giản, sau đó tiến hành thêm các thuộc tính nhận dạng cho các thẻ html. Tiếp đến, tạo và liên kết file css. Viết mã nguồn css theo nguyên tắc định dạng cho cái tổng quát trước, cái chi tiết sau.

Tải code tạo form đăng ký bằng html và css

5

/

5

(

2

bình chọn

)

Hướng dẫn cách tạo FORM trong HTML

Thẻ form và các thuộc tính

Trong ví dụ trên bạn cũng thấy, trong thẻ form chúng ta sẽ có các thuộc tính như sau:

action: Khai báo đường dẫn đến 1 trang xử lý dữ liệu sau khi người gửi dữ liệu.

method: Khai báo phương thức gửi dữ liệu. Có 2 tùy chọn là get và post.

name: Đặt tên cho form.

Các thuộc tính trên sẽ cần các ngôn ngữ lập trình khác để xử lý còn với HTML thì bạn không cần quan tâm đến các thuộc tính đó nhưng khi tạo form thì bạn nhớ là vẫn phải khai báo các thuộc tính đó.

Thẻ input và các thuộc tính

Thẻ input dùng để cho người dùng có thể nhập hoặc chọn các thông tin. Thẻ input trong HTML hiện tại có 23 kiểu nhập dữ liệu khác nhau. Để lựa chọn kiểu nhập dữ liệu bạn sẽ phải khai báo trong thuộc tính type.

23 giá trị của thuộc tính type:

button: Hiển thị dạng nút nhấn.

checkbox: Hiển thị dạng hộp kiểm.

file: Hiển thị dạng chọn file.

hidden: Hiển thị dạng ẩn.

image: Hiển thị dạng hình.

password: Hiển thị dạng password.

radio: Hiển thị dạng chọn lựa.

reset: Hiển thị dạng phục hồi.

submit: Hiển thị dạng submit.

text: Hiển thị dạng text.

color: Hiển thị dạng màu.

date: Hiển thị dạng ngày.

datetime: Hiển thị dạng ngày và thời gian.

datetime-local: Hiển thị dạng ngày và thời gian của vùng.

email: Hiển thị dạng email.

month: Hiển thị dạng tháng.

number: Hiển thị dạng số.

range: Hiển thị dạng dãy.

search: Hiển thị dạng tìm kiếm.

tel: Hiển thị dạng số điện thoại.

time: Hiển thị dạng thời gian.

url: Hiển thị dạng đường dẫn.

week: Hiển thị dạng tuần.