Hướng dẫn tạo form bằng javascript
|
Xin chào mọi người tiếp tục Series hướng dẫn tạo trang web bằng HTML và CSS. Hôm nay mình sẽ hướng dẫn bạn cách tạo form đăng ký bằng JavaScript để bắt lỗi form (validate form javascript). Giúp kiểm tra Form hợp lệ xem người dùng đã điền đầy đủ thông tin chưa, nếu chưa thì không thực hiện. Với đoạn code
JavaScript đăng ký thành viên sẽ kiểm tra Input bằng JavaScript khá đơn giản dễ hiểu mời bạn cùng theo dõi. JavaScript là ngôn ngữ lập trình Frond end chính vì thế bạn cần phải nghiên cứu nhiều về nó. Dưới đây là từng bước xây dựng Form và dùng lệnh Js để kiểm tra. Để cho dễ hiểu bạn sẽ phải tạo cho mình 3 file lần lượt là dangky.html, style.css và kiemtra.js. Ba tập tin này bạn sẽ đặt trong cùng một thư mục. Bước 1: Tạo Form đăng ký thành viên
dangky.html Bước 2: Tạo file style.css để trang trí Form trông bắt mắt hơn body {
font-family: Arial, sans-serif;
background-color: #cecece;
}
a {
color: #00bd00;
}
* {
box-sizing: border-box;
}
.register {
width: 500px;
padding: 16px;
margin: 0 auto;
background-color: white;
}
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.submit {
background-color: #0900bd;
color: white;
padding: 15px 18px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.submit:hover {
opacity: 1;
}
.login {
background-color: #ffffff;
text-align: center;
}
Bước 3: Tạo file kiemtra.js để bắt lỗi form và kiểm tra các giá trị người dùng đã nhập vào chưa function validate() {
var u = document.getElementById("username").value;
var p1 = document.getElementById("password").value;
var p2 = document.getElementById("password-repeat").value;
if(u== "") {
alert("Vui lòng nhập tên!");
return false;
}
if(p1 == "") {
alert("Vui lòng nhập mật khẩu!");
return false;
}
if(p2 == "") {
alert("Vui lòng xác minh mật khẩu!");
return false;
}
alert("Xin hãy điền đúng thông tin!")
return true;
}
Giải thích: Thuật toán sẽ thực hiện từng bước như sau: Nếu tài khoản Username trong Form đăng ký trống thì JavaScript dùng Alert để cảnh báo. Kết luận: Bài viết này đã hướng dẫn bạn cách tạo Form đăng ký bằng JavaScript cực kỳ đơn giản phải không nào. Ngay sau khi đọc xong bạn có thể bắt tay vào thực hành để kiểm tra kết quả như thế nào và đừng quên đọc thêm JavaScript là gì để hiểu rõ hơn cách thức hoạt động của ngôn ngữ lập trình web được nhiều người ưa chuộng này! Bạn cũng có thể kết hợp Form JavaScript cùng với PHP. Đọc bài Cách tạo Form đăng ký bằng PHP và MySQL để được hướng dẫn chi tiết. Nội dung bài viết Video học lập trình mỗi ngàyChỉ với những dòng code css và javascript đã tạo nên một form đăng ký và đăng nhập vô cùng độc đáo và tôi
nghĩ các bạn cũng nên tham khảo và biết đâu một ngày gần đây các bạn lại sử dụng chúng... Các bạn theo dõi các file ở dưới. See demo: Hereindex.html
See demo: Here@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
* {
box-sizing: border-box;
}
body {
background: #f6f5f7;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100vh;
margin: -20px 0 50px;
}
h2 {
font-weight: bold;
margin: 0;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid #FF4B2B;
background-color: #FF4B2B;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
@keyframes show {
0%,
49.99% {
opacity: 0;
z-index: 1;
}
50%,
100% {
opacity: 1;
z-index: 5;
}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container {
transform: translateX(-100%);
}
.overlay {
background: #FF416C;
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
background: linear-gradient(to right, #FF4B2B, #FF416C);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
}
footer i {
color: red;
}
footer a {
color: #3c97bf;
text-decoration: none;
}javascriptSee demo: HereKết luận: Dù bạn là một lập trình thiên về cái nào đi chăng nữa thì đây cũng là một ví dụ rất đáng để xem và tham khảo.
Ref-Source: Originally published at www.florin-pop.com. |
