\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Create a responsive website with login and registration forms using HTML, CSS and vanilla JavaScript, follow these simple step-by-step instructions:<\/p>
The code includes a click event listener that can toggle classes on different HTML elements. Although the code is simple and easy to understand, it is recommended that you watch the video instructions above, read the code comments, and experiment with it to gain a better understanding.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Website with Login and Registration Form | CodingTutorials<\/title>\r\n    <!-- Google Fonts Link For Icons -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0\">\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n    <script src=\"script.js\" defer><\/script>\r\n<\/head>\r\n<body>\r\n    <header>\r\n        <nav class=\"navbar\">\r\n            <span class=\"hamburger-btn material-symbols-rounded\">menu<\/span>\r\n            <a href=\"#\" class=\"logo\">\r\n                <img decoding=\"async\" src=\"images\/cropped-Your-paragraph-text-1-2.png\" alt=\"logo\">\r\n                <h2>CodingTutorials<\/h2>\r\n            <\/a>\r\n            <ul class=\"links\">\r\n                <span class=\"close-btn material-symbols-rounded\">close<\/span>\r\n                <li><a href=\"#\">Home<\/a><\/li>\r\n                <li><a href=\"#\">Portfolio<\/a><\/li>\r\n                <li><a href=\"#\">Courses<\/a><\/li>\r\n                <li><a href=\"#\">About us<\/a><\/li>\r\n                <li><a href=\"#\">Contact us<\/a><\/li>\r\n            <\/ul>\r\n            <button class=\"login-btn\">LOG IN<\/button>\r\n        <\/nav>\r\n    <\/header>\r\n\r\n    <div class=\"blur-bg-overlay\"><\/div>\r\n    <div class=\"form-popup\">\r\n        <span class=\"close-btn material-symbols-rounded\">close<\/span>\r\n        <div class=\"form-box login\">\r\n            <div class=\"form-details\">\r\n                <h2>Welcome Back<\/h2>\r\n                <p>Please log in using your personal information to stay connected with us.<\/p>\r\n            <\/div>\r\n            <div class=\"form-content\">\r\n                <h2>LOGIN<\/h2>\r\n                <form action=\"#\">\r\n                    <div class=\"input-field\">\r\n                        <input type=\"text\" required>\r\n                        <label>Email<\/label>\r\n                    <\/div>\r\n                    <div class=\"input-field\">\r\n                        <input type=\"password\" required>\r\n                        <label>Password<\/label>\r\n                    <\/div>\r\n                    <a href=\"#\" class=\"forgot-pass-link\">Forgot password?<\/a>\r\n                    <button type=\"submit\">Log In<\/button>\r\n                <\/form>\r\n                <div class=\"bottom-link\">\r\n                    Don't have an account?\r\n                    <a href=\"#\" id=\"signup-link\">Signup<\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"form-box signup\">\r\n            <div class=\"form-details\">\r\n                <h2>Create Account<\/h2>\r\n                <p>To become a part of our community, please sign up using your personal information.<\/p>\r\n            <\/div>\r\n            <div class=\"form-content\">\r\n                <h2>SIGNUP<\/h2>\r\n                <form action=\"#\">\r\n                    <div class=\"input-field\">\r\n                        <input type=\"text\" required>\r\n                        <label>Enter your email<\/label>\r\n                    <\/div>\r\n                    <div class=\"input-field\">\r\n                        <input type=\"password\" required>\r\n                        <label>Create password<\/label>\r\n                    <\/div>\r\n                    <div class=\"policy-text\">\r\n                        <input type=\"checkbox\" id=\"policy\">\r\n                        <label for=\"policy\">\r\n                            I agree the\r\n                            <a href=\"#\" class=\"option\">Terms & Conditions<\/a>\r\n                        <\/label>\r\n                    <\/div>\r\n                    <button type=\"submit\">Sign Up<\/button>\r\n                <\/form>\r\n                <div class=\"bottom-link\">\r\n                    Already have an account? \r\n                    <a href=\"#\" id=\"login-link\">Login<\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <!-- Coding By CodingTutorials - www.codingtutorials.in -->\r\n<\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-229f51a elementor-widget elementor-widget-text-editor\" data-id=\"229f51a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ol><li>First, create a folder with your preferred name and then, create the required files inside it.<\/li><li>Create a file called Index.html to serve as the main file.<\/li><li>Create style.css file under this folder or create new folder and add style.css file.<\/li><li>Create a file called script.js to hold the JavaScript code.<\/li><li>Finally, download the Images folder and save it in your project directory. This folder contains all the images you will need for this project.<br \/>To get started, add the following HTML code to your Index.html file. These codes contain all the necessary HTML elements for the project, like header, nav, ul, form and more.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-994472d elementor-widget elementor-widget-text-editor\" data-id=\"994472d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, add the following CSS code to your style.css file to apply the visual style to your website and form. You can experiment with different CSS properties like color, font and background to give a unique touch to your website.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9930c7b elementor-widget elementor-widget-code-highlight\" data-id=\"9930c7b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@400;500;600;700&display=swap\");\r\n\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    font-family: \"Open Sans\", sans-serif;\r\n}\r\n\r\nbody {\r\n    height: 100vh;\r\n    width: 100%;\r\n    background: url(\"images\/nature-3082832_1280.jpg\") center\/cover no-repeat;\r\n}\r\n\r\nheader {\r\n    position: fixed;\r\n    width: 100%;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: 10;\r\n    padding: 0 10px;\r\n}\r\n\r\n.navbar {\r\n    display: flex;\r\n    padding: 22px 0;\r\n    align-items: center;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    justify-content: space-between;\r\n}\r\n\r\n.navbar .hamburger-btn {\r\n    display: none;\r\n    color: #fff;\r\n    cursor: pointer;\r\n    font-size: 1.5rem;\r\n}\r\n\r\n.navbar .logo {\r\n    gap: 10px;\r\n    display: flex;\r\n    align-items: center;\r\n    text-decoration: none;\r\n}\r\n\r\n.navbar .logo img {\r\n    width: 40px;\r\n    border-radius: 50%;\r\n}\r\n\r\n.navbar .logo h2 {\r\n    color: #fff;\r\n    font-weight: 600;\r\n    font-size: 1.7rem;\r\n}\r\n\r\n.navbar .links {\r\n    display: flex;\r\n    gap: 35px;\r\n    list-style: none;\r\n    align-items: center;\r\n}\r\n\r\n.navbar .close-btn {\r\n    position: absolute;\r\n    right: 20px;\r\n    top: 20px;\r\n    display: none;\r\n    color: #000;\r\n    cursor: pointer;\r\n}\r\n\r\n.navbar .links a {\r\n    color: #fff;\r\n    font-size: 1.1rem;\r\n    font-weight: 500;\r\n    text-decoration: none;\r\n    transition: 0.1s ease;\r\n}\r\n\r\n.navbar .links a:hover {\r\n    color: #19e8ff;\r\n}\r\n\r\n.navbar .login-btn {\r\n    border: none;\r\n    outline: none;\r\n    background: #fff;\r\n    color: #275360;\r\n    font-size: 1rem;\r\n    font-weight: 600;\r\n    padding: 10px 18px;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    transition: 0.15s ease;\r\n}\r\n\r\n.navbar .login-btn:hover {\r\n    background: #ddd;\r\n}\r\n\r\n.form-popup {\r\n    position: fixed;\r\n    top: 50%;\r\n    left: 50%;\r\n    z-index: 10;\r\n    width: 100%;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    max-width: 720px;\r\n    background: #fff;\r\n    border: 2px solid #fff;\r\n    transform: translate(-50%, -70%);\r\n}\r\n\r\n.show-popup .form-popup {\r\n    opacity: 1;\r\n    pointer-events: auto;\r\n    transform: translate(-50%, -50%);\r\n    transition: transform 0.3s ease, opacity 0.1s;\r\n}\r\n\r\n.form-popup .close-btn {\r\n    position: absolute;\r\n    top: 12px;\r\n    right: 12px;\r\n    color: #878484;\r\n    cursor: pointer;\r\n}\r\n\r\n.blur-bg-overlay {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: 10;\r\n    height: 100%;\r\n    width: 100%;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    backdrop-filter: blur(5px);\r\n    -webkit-backdrop-filter: blur(5px);\r\n    transition: 0.1s ease;\r\n}\r\n\r\n.show-popup .blur-bg-overlay {\r\n    opacity: 1;\r\n    pointer-events: auto;\r\n}\r\n\r\n.form-popup .form-box {\r\n    display: flex;\r\n}\r\n\r\n.form-box .form-details {\r\n    width: 100%;\r\n    color: #fff;\r\n    max-width: 330px;\r\n    text-align: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.login .form-details {\r\n    padding: 0 40px;\r\n    background: url(\"https:\/\/media.istockphoto.com\/id\/1356364287\/photo\/close-up-focus-on-persons-hands-typing-on-the-desktop-computer-backlit-keyboard-screens-show.jpg?s=612x612&w=0&k=20&c=ijjq-DLNxIaPuGvIX8k06IZxMAjGpyJeboaV_byCX9k=\");\r\n    background-position: center;\r\n    background-size: cover;\r\n}\r\n\r\n.signup .form-details {\r\n    padding: 0 20px;\r\n    background: url(\"images\/signup-img.jpg\");\r\n    background-position: center;\r\n    background-size: cover;\r\n}\r\n\r\n.form-box .form-content {\r\n    width: 100%;\r\n    padding: 35px;\r\n}\r\n\r\n.form-box h2 {\r\n    text-align: center;\r\n    margin-bottom: 29px;\r\n}\r\n\r\nform .input-field {\r\n    position: relative;\r\n    height: 50px;\r\n    width: 100%;\r\n    margin-top: 20px;\r\n}\r\n\r\n.input-field input {\r\n    height: 100%;\r\n    width: 100%;\r\n    background: none;\r\n    outline: none;\r\n    font-size: 0.95rem;\r\n    padding: 0 15px;\r\n    border: 1px solid #717171;\r\n    border-radius: 3px;\r\n}\r\n\r\n.input-field input:focus {\r\n    border: 1px solid #00bcd4;\r\n}\r\n\r\n.input-field label {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 15px;\r\n    transform: translateY(-50%);\r\n    color: #4a4646;\r\n    pointer-events: none;\r\n    transition: 0.2s ease;\r\n}\r\n\r\n.input-field input:is(:focus, :valid) {\r\n    padding: 16px 15px 0;\r\n}\r\n\r\n.input-field input:is(:focus, :valid)~label {\r\n    transform: translateY(-120%);\r\n    color: #00bcd4;\r\n    font-size: 0.75rem;\r\n}\r\n\r\n.form-box a {\r\n    color: #00bcd4;\r\n    text-decoration: none;\r\n}\r\n\r\n.form-box a:hover {\r\n    text-decoration: underline;\r\n}\r\n\r\nform :where(.forgot-pass-link, .policy-text) {\r\n    display: inline-flex;\r\n    margin-top: 13px;\r\n    font-size: 0.95rem;\r\n}\r\n\r\nform button {\r\n    width: 100%;\r\n    color: #fff;\r\n    border: none;\r\n    outline: none;\r\n    padding: 14px 0;\r\n    font-size: 1rem;\r\n    font-weight: 500;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    margin: 25px 0;\r\n    background: #00bcd4;\r\n    transition: 0.2s ease;\r\n}\r\n\r\nform button:hover {\r\n    background: #0097a7;\r\n}\r\n\r\n.form-content .bottom-link {\r\n    text-align: center;\r\n}\r\n\r\n.form-popup .signup,\r\n.form-popup.show-signup .login {\r\n    display: none;\r\n}\r\n\r\n.form-popup.show-signup .signup {\r\n    display: flex;\r\n}\r\n\r\n.signup .policy-text {\r\n    display: flex;\r\n    margin-top: 14px;\r\n    align-items: center;\r\n}\r\n\r\n.signup .policy-text input {\r\n    width: 14px;\r\n    height: 14px;\r\n    margin-right: 7px;\r\n}\r\n\r\n@media (max-width: 950px) {\r\n    .navbar :is(.hamburger-btn, .close-btn) {\r\n        display: block;\r\n    }\r\n\r\n    .navbar {\r\n        padding: 15px 0;\r\n    }\r\n\r\n    .navbar .logo img {\r\n        display: none;\r\n    }\r\n\r\n    .navbar .logo h2 {\r\n        font-size: 1.4rem;\r\n    }\r\n\r\n    .navbar .links {\r\n        position: fixed;\r\n        top: 0;\r\n        z-index: 10;\r\n        left: -100%;\r\n        display: block;\r\n        height: 100vh;\r\n        width: 100%;\r\n        padding-top: 60px;\r\n        text-align: center;\r\n        background: #fff;\r\n        transition: 0.2s ease;\r\n    }\r\n\r\n    .navbar .links.show-menu {\r\n        left: 0;\r\n    }\r\n\r\n    .navbar .links a {\r\n        display: inline-flex;\r\n        margin: 20px 0;\r\n        font-size: 1.2rem;\r\n        color: #000;\r\n    }\r\n\r\n    .navbar .links a:hover {\r\n        color: #00BCD4;\r\n    }\r\n\r\n    .navbar .login-btn {\r\n        font-size: 0.9rem;\r\n        padding: 7px 10px;\r\n    }\r\n}\r\n\r\n@media (max-width: 760px) {\r\n    .form-popup {\r\n        width: 95%;\r\n    }\r\n\r\n    .form-box .form-details {\r\n        display: none;\r\n    }\r\n\r\n    .form-box .form-content {\r\n        padding: 30px 20px;\r\n    }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28fadbe elementor-widget elementor-widget-text-editor\" data-id=\"28fadbe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After applying the styles, load webpage in your browser to view your website. The forms are hidden for now and will only be visible later using JavaScript. Now, you will see the website with only the navigation bar and hero image.<\/p><p>The code includes click event listeners that can toggle classes on various HTML elements. Although the code is simple and easy to comprehend, it is recommended that you watch the video instruction above, read the code comments, and experiment with it to gain a better understanding.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85c2355 elementor-widget elementor-widget-code-highlight\" data-id=\"85c2355\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const navbarMenu = document.querySelector(\".navbar .links\");\r\nconst hamburgerBtn = document.querySelector(\".hamburger-btn\");\r\nconst hideMenuBtn = navbarMenu.querySelector(\".close-btn\");\r\nconst showPopupBtn = document.querySelector(\".login-btn\");\r\nconst formPopup = document.querySelector(\".form-popup\");\r\nconst hidePopupBtn = formPopup.querySelector(\".close-btn\");\r\nconst signupLoginLink = formPopup.querySelectorAll(\".bottom-link a\");\r\n\r\n\/\/ Show mobile menu\r\nhamburgerBtn.addEventListener(\"click\", () => {\r\n    navbarMenu.classList.toggle(\"show-menu\");\r\n});\r\n\r\n\/\/ Hide mobile menu\r\nhideMenuBtn.addEventListener(\"click\", () =>  hamburgerBtn.click());\r\n\r\n\/\/ Show login popup\r\nshowPopupBtn.addEventListener(\"click\", () => {\r\n    document.body.classList.toggle(\"show-popup\");\r\n});\r\n\r\n\/\/ Hide login popup\r\nhidePopupBtn.addEventListener(\"click\", () => showPopupBtn.click());\r\n\r\n\/\/ Show or hide signup form\r\nsignupLoginLink.forEach(link => {\r\n    link.addEventListener(\"click\", (e) => {\r\n        e.preventDefault();\r\n        formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove'](\"show-signup\");\r\n    });\r\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4adcf7f elementor-widget elementor-widget-heading\" data-id=\"4adcf7f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion and Final words<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e5cb73 elementor-widget elementor-widget-text-editor\" data-id=\"9e5cb73\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ultimately, creating a website homepage that includes forms is a hands-on experience in learning various website components and fundamental web development concepts.I believe that by following the steps mentioned in this blog post, you have successfully created your website with <a href=\"https:\/\/codingtutorials.in\/complete-registration-form-validation-using-html-css-javascript\/\"><strong>login and registration forms using HTML, CSS and JavaScript<\/strong><\/a>.<\/p><p>To further improve your web development skills, I suggest you try to recreate other websites and login form projects available on this website. This will give you a better understanding of how HTML, CSS, and JavaScript are used to create unique website components.<\/p><p>If you encounter any problems while building your website with forms, you can download the source code files for this project for free by clicking the download button. You can also watch its live demo by clicking on the View Live button.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ca353ca e-flex e-con-boxed e-con e-parent\" data-id=\"ca353ca\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26134d1 elementor-widget elementor-widget-shortcode\" data-id=\"26134d1\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style type=\"text\/css\">\r\n\t\t#dae-shortcode181-download-wrapper {\r\n\t\t\tbackground: #f1f1f1 !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 20% !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #052154 !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #052154 !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t\tbackground: none !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px 0 0 10px !important;\r\n\t\t\t-moz-border-radius: 10px 0 0 10px !important;\r\n\t\t\t-webkit-border-radius: 10px 0 0 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tbackground: #f9f9f9 !important;\r\n\t\t\tborder-radius: 0 10px 10px 0 !important;\r\n\t\t\t-moz-border-radius: 0 10px 10px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 10px 10px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #0081c1 !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0081c1 !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode181-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode181-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode181-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode181-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode181-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode181-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode181-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode181-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode181-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\">Download Source Code<\/h2>\r\n\t\t\t\t<div class=\"dae-shortcode-download-text\">Login Signup Design in Javascript<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">FREE DOWNLOAD<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Send download link to:<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"loginform.zip\" \/>\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Send link\" \/>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>If you are web developer and want to create login and registration forms but you don&#8217;t know and<\/p>\n","protected":false},"author":1,"featured_media":155,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,4],"tags":[23,26,22,25],"class_list":["post-154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-htmlcss","category-javascript","tag-javascript-login-form","tag-javascript-signup-form","tag-login-form","tag-signup"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create login and registration forms in HTML and JavaScript<\/title>\n<meta name=\"description\" content=\"Here in this tutorial I am going to show you the complete sign up form with simple email. Email will work on your server.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create login and registration forms in HTML and JavaScript\" \/>\n<meta property=\"og:description\" content=\"Here in this tutorial I am going to show you the complete sign up form with simple email. Email will work on your server.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-22T06:19:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-05T10:49:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/loginform.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1216\" \/>\n\t<meta property=\"og:image:height\" content=\"562\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create login and registration forms in HTML and JavaScript","description":"Here in this tutorial I am going to show you the complete sign up form with simple email. Email will work on your server.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Create login and registration forms in HTML and JavaScript","og_description":"Here in this tutorial I am going to show you the complete sign up form with simple email. Email will work on your server.","og_url":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2024-10-22T06:19:58+00:00","article_modified_time":"2025-04-05T10:49:54+00:00","og_image":[{"width":1216,"height":562,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/loginform.png","type":"image\/png"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"Create login and registration forms in HTML and JavaScript","datePublished":"2024-10-22T06:19:58+00:00","dateModified":"2025-04-05T10:49:54+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/"},"wordCount":617,"commentCount":0,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/loginform.png","keywords":["Javascript Login form","javascript signup form","Login Form","signup"],"articleSection":["HTML&amp;CSS","Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/","url":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/","name":"Create login and registration forms in HTML and JavaScript","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/loginform.png","datePublished":"2024-10-22T06:19:58+00:00","dateModified":"2025-04-05T10:49:54+00:00","description":"Here in this tutorial I am going to show you the complete sign up form with simple email. Email will work on your server.","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/loginform.png","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/loginform.png","width":1216,"height":562,"caption":"login and registration forms"},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/how-to-create-login-registration-forms-in-html-css-and-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"Create login and registration forms in HTML and JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":50,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":2851,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/154\/revisions\/2851"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/155"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}