Home / Kiến thức Hosting / tạo form đăng ký bằng javascript

Tạo form đăng ký bằng javascript

admin - 22/01/2023 54

Ứng dụng javascript trong form login hướng dẫn khóa nút đăng nhập khi chưa nhập user/pass ; Icon eye để ẩn hiện mật khẩu ; Focus userhostingvietnam.vn….

1.Tạo form đăng nhập

– Tạo 1 tag bao quanh, tag form có method là post, id hoặc class tùy ý để định dạng css

– Trong tag form có 2 input để nhập userhostingvietnam.vn, password và 1 button

– Mỗi tag input có tag label để giải thích ý nghĩa cho người dùng biết

– Mỗi tag input có thuộc tính hostingvietnam.vn (dùng cho submit lên server) và id (để định dạng css, lập trình js)

– Mỗi tag input có thuộc tính placeholder để giải thích/hướng dẫn nhập

– Tag button cũng có thuộc tính hostingvietnam.vn (dùng cho submit lên server) và id (để định dạng css, lập trình js)

Tên đăng nhập

Mật khẩu

Đăng nhập

2. Định dạng form đăng nhập

– Form: độ rộng, canh giữa, viền, padding

– Label: màu chữ, rộng , display

– Các tag input: gán cho các class và định dạng: width, padding, viền

Bạn đang xem: Tạo form đăng ký bằng javascript

– Button: width, height

#frm1 { width: 600px; margin: auto; border: 2px solid darkslategrey; padding: 10px }#frm1 label { color: darkslategray; width: 120px; display: inline-block; }#frm1 .txt { width: 450px; padding: 8px; border: 1px solid lightcoral; }#frm1 button { width: 120px; height: 40px; }

3.Cho con trỏ chớp sẵn trong userhostingvietnam.vn

Khi mới nạp trang, cho con trỏ chớp sẵn trong chỗ tên đăng nhập. Muốn thế thì thêm thuộc tính autofocus vào

autofocus/>

4.Tắt các gợi ý là các giá trị đã nhập trước đây

Trong trình duyệt, khi nhắp vào tên đăng nhập sẽ thấy các giá trị đã nhập trước đây.

Xem thêm: Chỉnh Font Chữ Trong Mail Outlook 2010, Hướng Dẫn Sử Dụng Outlook: Cài Đặt Font Chữ

Xem thêm: Giao Thức Ssh Là Gì? Hướng Dẫn Sử Dụng Ssh Key Đơn Giản Nhất

Muốn tắt các giá trị đó thì thêm thuộc tính autocomplete vào như sau:

autocomplete="off" autofocus/>

3.Khóa nút submit khi chưa nhập tên đăng nhập và mật khẩu

– Khi mới nạp trang web, bạn khóa ngay nút đăng nhập

– Gọi hàm daoNutDN() trong sự kiện onkeyup của userhostingvietnam.vn và passs

onkeyup="daoNutDN()" class="txt" id="un" hostingvietnam.vn="un" placeholder="Nhập 6-20 ký tự" autocomplete="off" autofocus />onkeyup="daoNutDN()" class="txt" id="mk" hostingvietnam.vn="mk" placeholder="Mật khẩu"/>– Định nghĩa hàm daoNutDN()

4.Hiện mật khẩu trong field password

Bây giờ thì ứng dụng javascript trong form login để hiện ra icon con mắt (xem hình ở đầu trang), khi nhắp vào icon sẽ hiện ra mật khẩu. Thực hiện như sau:

– Nhúng thư viện font awesome

– Chèn icon eye ở sau input password

– Định dạng icon mới chèn

#frm1 i.fas{position: relative; left:-30px;cursor: pointer;}– Gọi hàm daoTT() trong sự kiện click của icon mới chèn

– Định nghĩa hàm daoTT()