{"id":5778,"date":"2024-01-01T00:55:26","date_gmt":"2024-01-01T00:55:26","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=5778"},"modified":"2024-02-13T06:39:41","modified_gmt":"2024-02-13T06:39:41","slug":"otp-input-fields-using-html-css-and-js","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/otp-input-fields-using-html-css-and-js\/","title":{"rendered":"30 OTP input fields using HTML, CSS, and JS"},"content":{"rendered":"\n<p>Another blog, another step of learning&#8230; Hey, my coding enthusiasts welcome to our new blog of the amazing and latest collection of 30+ OTP input fields using HTML, CSS, and Javascript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">OTP input fields<\/h2>\n\n\n\n<p>OTP stands for One-time-password, which has now become very useful for security purposes. This password as the name suggests is for one time only and limited to a particular time like a few seconds or minutes.<\/p>\n\n\n\n<p><a href=\"https:\/\/foolishdeveloper.com\/html-css-and-javascript-projects\/\" data-type=\"post\" data-id=\"5545\">30+ HTML CSS and Javascript Projects<\/a><\/p>\n\n\n\n<p>OTP input fields are useful when we are making any bank payment, changing passwords for a website or application, making an online purchase, and many more platforms where authorization is needed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/Green-and-White-Photographic-Blogger-Bio-Link-Website-1024x576.png\" alt=\"OTP input fields using HTML, CSS, and JS\" class=\"wp-image-5784\" style=\"width:840px;height:auto\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/Green-and-White-Photographic-Blogger-Bio-Link-Website-1024x576.png 1024w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/Green-and-White-Photographic-Blogger-Bio-Link-Website-300x169.png 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/Green-and-White-Photographic-Blogger-Bio-Link-Website-768x432.png 768w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/Green-and-White-Photographic-Blogger-Bio-Link-Website-800x450.png 800w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/Green-and-White-Photographic-Blogger-Bio-Link-Website-150x84.png 150w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/12\/Green-and-White-Photographic-Blogger-Bio-Link-Website.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Let us start with our best-handpicked collection of OTP input templates to understand the concept well.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. OTP UI<\/h3>\n\n\n\n<p>Below the given codepen refers to a section where the user is asked to &#8220;Enter OTP&#8221;, which is of 5 numerical digits, and then a button for verification is also available.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP UI\" src=\"https:\/\/codepen.io\/Web_Cifar\/embed\/BarOKgO?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/Web_Cifar\/pen\/BarOKgO\" target=\"_blank\" rel=\"noopener\">\n  OTP UI<\/a> by Web Cifar (<a href=\"https:\/\/codepen.io\/Web_Cifar\" target=\"_blank\" rel=\"noopener\">@Web_Cifar<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">2. OTP Input Field using JavaScript<\/h3>\n\n\n\n<p>In this code 4-digit OTP is asked from the user, once the OTP space is filled then a submit button prompts.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Input Field using JavaScript\" src=\"https:\/\/codepen.io\/groundtutorial\/embed\/OJwpXvW?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/groundtutorial\/pen\/OJwpXvW\" target=\"_blank\" rel=\"noopener\">\n  OTP Input Field using JavaScript<\/a> by Ground Tutorial (<a href=\"https:\/\/codepen.io\/groundtutorial\" target=\"_blank\" rel=\"noopener\">@groundtutorial<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">3. OTP Field<\/h3>\n\n\n\n<p>This code shows an OTP input field of 6 digits, when the user enters the number the border of that box glows with a neon-like effect and once the user enters after entering the complete OTP then the field can&#8217;t be changed.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Field\" src=\"https:\/\/codepen.io\/hicoders\/embed\/oNEqJGO?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/hicoders\/pen\/oNEqJGO\" target=\"_blank\" rel=\"noopener\">\n  OTP Field<\/a> by HiCoders (<a href=\"https:\/\/codepen.io\/hicoders\" target=\"_blank\" rel=\"noopener\">@hicoders<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">4. OTP Verification Form<\/h3>\n\n\n\n<p>Below the given codepen refers to a section where the user is asked to &#8220;Enter OTP&#8221;, which is of 4 numerical digits, and then a button for verification is also available.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Verification Form\" src=\"https:\/\/codepen.io\/muskkkannnn\/embed\/qBLbNQO?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/muskkkannnn\/pen\/qBLbNQO\" target=\"_blank\" rel=\"noopener\">\n  OTP Verification Form<\/a> by muskkkannnn (<a href=\"https:\/\/codepen.io\/muskkkannnn\" target=\"_blank\" rel=\"noopener\">@muskkkannnn<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">5. OTP Input<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 6-digit OTP.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Input\" src=\"https:\/\/codepen.io\/johnhoulder\/embed\/VOKJPo?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/johnhoulder\/pen\/VOKJPo\" target=\"_blank\" rel=\"noopener\">\n  OTP Input<\/a> by John Houlder (<a href=\"https:\/\/codepen.io\/johnhoulder\" target=\"_blank\" rel=\"noopener\">@johnhoulder<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. SMS OTP input<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 6-digit OTP  and a send button is also given.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\" SMS OTP input\" src=\"https:\/\/codepen.io\/tonoarnau\/embed\/XVVVbd?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/tonoarnau\/pen\/XVVVbd\" target=\"_blank\" rel=\"noopener\">\n   SMS OTP input<\/a> by Tono Arnau Forner (<a href=\"https:\/\/codepen.io\/tonoarnau\" target=\"_blank\" rel=\"noopener\">@tonoarnau<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. OTP Verification Example<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 6-digit OTP.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Verification Example\" src=\"https:\/\/codepen.io\/Rajesh-Pal-the-scripter\/embed\/gOZrbzK?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/Rajesh-Pal-the-scripter\/pen\/gOZrbzK\" target=\"_blank\" rel=\"noopener\">\n  OTP Verification Example<\/a> by Rajesh Pal (<a href=\"https:\/\/codepen.io\/Rajesh-Pal-the-scripter\" target=\"_blank\" rel=\"noopener\">@Rajesh-Pal-the-scripter<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8. Custom OTP Field<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 6-digit OTP.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Custom OTP Field\" src=\"https:\/\/codepen.io\/ksrahul\/embed\/rPPrQv?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/ksrahul\/pen\/rPPrQv\" target=\"_blank\" rel=\"noopener\">\n  Custom OTP Field<\/a> by Rahul.alam (<a href=\"https:\/\/codepen.io\/ksrahul\" target=\"_blank\" rel=\"noopener\">@ksrahul<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9. OTP Section HTML<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 6-digit OTP<strong>.<\/strong><\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Section HTML\" src=\"https:\/\/codepen.io\/piyushpd139\/embed\/MWewXBG?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/piyushpd139\/pen\/MWewXBG\" target=\"_blank\" rel=\"noopener\">\n  OTP Section HTML<\/a> by Piyush (<a href=\"https:\/\/codepen.io\/piyushpd139\" target=\"_blank\" rel=\"noopener\">@piyushpd139<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><a href=\"https:\/\/foolishdeveloper.com\/signup-form-using-html-css\/\" data-type=\"post\" data-id=\"6141\">Signup form Using HTML and CSS<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">10. Otp Input<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 6-digit OTP.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"otp input\" src=\"https:\/\/codepen.io\/marcinzajac\/embed\/OJxRbxw?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/marcinzajac\/pen\/OJxRbxw\" target=\"_blank\" rel=\"noopener\">\n  otp input<\/a> by Marcin (<a href=\"https:\/\/codepen.io\/marcinzajac\" target=\"_blank\" rel=\"noopener\">@marcinzajac<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">11. OTP Generator<\/h3>\n\n\n\n<p>Here we have an OTP generator.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP-Genrator\" src=\"https:\/\/codepen.io\/adhokshaj-01\/embed\/MWOqgbB?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/adhokshaj-01\/pen\/MWOqgbB\" target=\"_blank\" rel=\"noopener\">\n  OTP-Genrator<\/a> by Adhokshaj-01 (<a href=\"https:\/\/codepen.io\/adhokshaj-01\" target=\"_blank\" rel=\"noopener\">@adhokshaj-01<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">12. Custom OTP Input Form<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 6-digit OTP which has been sent in the mail.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Custom OTP  Input Form\" src=\"https:\/\/codepen.io\/rahulbksharma\/embed\/PoeNKej?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/rahulbksharma\/pen\/PoeNKej\" target=\"_blank\" rel=\"noopener\">\n  Custom OTP  Input Form<\/a> by Rahul Sharma (<a href=\"https:\/\/codepen.io\/rahulbksharma\" target=\"_blank\" rel=\"noopener\">@rahulbksharma<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">13. OTP Inputs<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 6-digit OTP.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Inputs\" src=\"https:\/\/codepen.io\/gearmobile\/embed\/VwPrWVL?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/gearmobile\/pen\/VwPrWVL\" target=\"_blank\" rel=\"noopener\">\n  OTP Inputs<\/a> by gearmobile (<a href=\"https:\/\/codepen.io\/gearmobile\" target=\"_blank\" rel=\"noopener\">@gearmobile<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">14. OTP Digits<\/h3>\n\n\n\n<p>Below the given codepen refers to a section where the user is asked to &#8220;Enter OTP&#8221;, which is of 6 numerical digits, and then a button for verification is also available.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP digits\" src=\"https:\/\/codepen.io\/sipher69\/embed\/zYpQmgW?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/sipher69\/pen\/zYpQmgW\" target=\"_blank\" rel=\"noopener\">\n  OTP digits<\/a> by sipher69 (<a href=\"https:\/\/codepen.io\/sipher69\" target=\"_blank\" rel=\"noopener\">@sipher69<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">15. Bootstrap 5 verifies OTP with validation form inputs<\/h3>\n\n\n\n<p>Below the given codepen refers to a section where the user is asked to Enter OTP that is sent to a particular given number which is of 6 numerical digits, and then a button for validation is also available.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Bootstrap 5 verify OTP with validation form inputs\" src=\"https:\/\/codepen.io\/teguig-med\/embed\/OJgRqVP?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/teguig-med\/pen\/OJgRqVP\" target=\"_blank\" rel=\"noopener\">\n  Bootstrap 5 verify OTP with validation form inputs<\/a> by TEGUIG-MED (<a href=\"https:\/\/codepen.io\/teguig-med\" target=\"_blank\" rel=\"noopener\">@teguig-med<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">16. OTP &#8211; Input type number<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 4-digit OTP.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP - Input type number\" src=\"https:\/\/codepen.io\/rajgorrjn\/embed\/rNNPVNZ?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/rajgorrjn\/pen\/rNNPVNZ\" target=\"_blank\" rel=\"noopener\">\n  OTP &#8211; Input type number<\/a> by Rajan Rajgor (<a href=\"https:\/\/codepen.io\/rajgorrjn\" target=\"_blank\" rel=\"noopener\">@rajgorrjn<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">17. OTP Verification AngularJs<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 6-digit OTP.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Verification AngularJs\" src=\"https:\/\/codepen.io\/hryer\/embed\/OZQwZQ?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/hryer\/pen\/OZQwZQ\" target=\"_blank\" rel=\"noopener\">\n  OTP Verification AngularJs<\/a> by Harry Ermawan (<a href=\"https:\/\/codepen.io\/hryer\" target=\"_blank\" rel=\"noopener\">@hryer<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">18. OTP Page<\/h3>\n\n\n\n<p>Below the given codepen refers to a section where the user is asked to &#8220;Enter OTP&#8221;, which is of 5 numerical digits, and then a button for confirmation is also available.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Page\" src=\"https:\/\/codepen.io\/Aixoxa\/embed\/wvGYjbe?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/Aixoxa\/pen\/wvGYjbe\" target=\"_blank\" rel=\"noopener\">\n  OTP Page<\/a> by Aixoxa (<a href=\"https:\/\/codepen.io\/Aixoxa\" target=\"_blank\" rel=\"noopener\">@Aixoxa<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">19. OTP verification page Mobile view<\/h3>\n\n\n\n<p>Below the given codepen refers to a section where the user is asked to &#8220;Enter OTP&#8221;, which is of 6 numerical digits, and then an option for verification and the changing number is also available.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP verification page Mobile view\" src=\"https:\/\/codepen.io\/ER_YAMINI_PAL\/embed\/JjGppwp?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/ER_YAMINI_PAL\/pen\/JjGppwp\" target=\"_blank\" rel=\"noopener\">\n  OTP verification page Mobile view<\/a> by Yamini (<a href=\"https:\/\/codepen.io\/ER_YAMINI_PAL\" target=\"_blank\" rel=\"noopener\">@ER_YAMINI_PAL<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">20. Dynamic focus on the next input<\/h3>\n\n\n\n<p>Below the given codepen refers to a section where the user is asked to &#8220;Enter OTP&#8221;, which is of 4 numerical digits, and then a button for submission is also available.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Dynamic focus on next input \" src=\"https:\/\/codepen.io\/prashanthnayak\/embed\/OmLOzQ?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/prashanthnayak\/pen\/OmLOzQ\" target=\"_blank\" rel=\"noopener\">\n  Dynamic focus on next input <\/a> by Prashanth Nayak (<a href=\"https:\/\/codepen.io\/prashanthnayak\" target=\"_blank\" rel=\"noopener\">@prashanthnayak<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">21. OTP<\/h3>\n\n\n\n<p>Below the given codepen refers to a section where the user has to enter OTP, which is of 4 numerical digits, and then a button for verification is also available.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"otp\" src=\"https:\/\/codepen.io\/akbarshaikh1234\/embed\/zXgNPe?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/akbarshaikh1234\/pen\/zXgNPe\" target=\"_blank\" rel=\"noopener\">\n  otp<\/a> by Shaikh Akbar (<a href=\"https:\/\/codepen.io\/akbarshaikh1234\" target=\"_blank\" rel=\"noopener\">@akbarshaikh1234<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">22. Phone verification with Otp<\/h3>\n\n\n\n<p>Below the given codepen refers to a section where the user is asked to &#8220;Enter OTP&#8221;, which is of 4 numerical digits, and then an option for resending OTP is also available.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Phone Verification with OTP\" src=\"https:\/\/codepen.io\/abdelrhmansaid\/embed\/JjJpxXb?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/abdelrhmansaid\/pen\/JjJpxXb\" target=\"_blank\" rel=\"noopener\">\n  Phone Verification with OTP<\/a> by Abdelrhman Said (<a href=\"https:\/\/codepen.io\/abdelrhmansaid\" target=\"_blank\" rel=\"noopener\">@abdelrhmansaid<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">23. OTP (One-Time Password) Input<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 6-digit OTP.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP (One-Time Password) Input\" src=\"https:\/\/codepen.io\/jeremywagemans\/embed\/ZEEEeVy?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/jeremywagemans\/pen\/ZEEEeVy\" target=\"_blank\" rel=\"noopener\">\n  OTP (One-Time Password) Input<\/a> by Jeremy Wagemans (<a href=\"https:\/\/codepen.io\/jeremywagemans\" target=\"_blank\" rel=\"noopener\">@jeremywagemans<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">24. OTP Verify Mockup<\/h3>\n\n\n\n<p>Below the given codepen refers to a section where the user is asked to &#8220;Enter OTP&#8221;, which is of 6 numerical digits, and then a button for verification is also available. If the OTP is not received then the user can request it again.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Verify Mockup\" src=\"https:\/\/codepen.io\/marcus-nightingale\/embed\/KKrBBPz?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/marcus-nightingale\/pen\/KKrBBPz\" target=\"_blank\" rel=\"noopener\">\n  OTP Verify Mockup<\/a> by Marcus (<a href=\"https:\/\/codepen.io\/marcus-nightingale\" target=\"_blank\" rel=\"noopener\">@marcus-nightingale<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">25. OTP section HTML<\/h3>\n\n\n\n<p>In the shown codepen of OTP user is supposed to enter a 6-digit OTP.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Section HTML\" src=\"https:\/\/codepen.io\/piyushpd139\/embed\/MWewXBG?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/piyushpd139\/pen\/MWewXBG\" target=\"_blank\" rel=\"noopener\">\n  OTP Section HTML<\/a> by Piyush (<a href=\"https:\/\/codepen.io\/piyushpd139\" target=\"_blank\" rel=\"noopener\">@piyushpd139<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">26. Random OTP Generator<\/h3>\n\n\n\n<p>Here we have a random OTP generator.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"Random OTP Genaration using Js\" src=\"https:\/\/codepen.io\/Karthiksamraat\/embed\/eYrrwQw?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/Karthiksamraat\/pen\/eYrrwQw\" target=\"_blank\" rel=\"noopener\">\n  Random OTP Genaration using Js<\/a> by Karthik  (<a href=\"https:\/\/codepen.io\/Karthiksamraat\" target=\"_blank\" rel=\"noopener\">@Karthiksamraat<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">27. OTP Authentication UI<\/h3>\n\n\n\n<p>Below the given codepen refers to a section where the user is asked for OTP Authentication, which is of 6 numerical digits, and then a button for Login is also available.<\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP Authentication UI\" src=\"https:\/\/codepen.io\/miki_gautam\/embed\/LYgLNXZ?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/miki_gautam\/pen\/LYgLNXZ\" target=\"_blank\" rel=\"noopener\">\n  OTP Authentication UI<\/a> by Mukesh Gautam (<a href=\"https:\/\/codepen.io\/miki_gautam\" target=\"_blank\" rel=\"noopener\">@miki_gautam<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">28. Javascript- OTP input field<\/h3>\n\n\n\n<p>In this OTP input field user have to enter that OTP which is shown in case he is entering a wrong one then it won&#8217;t accept it and he has to enter it again . <\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"React - OTP\" src=\"https:\/\/codepen.io\/vihanga\/embed\/NWBxjRM?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/vihanga\/pen\/NWBxjRM\" target=\"_blank\" rel=\"noopener\">\n  React &#8211; OTP<\/a> by Vihanga nivarthana (<a href=\"https:\/\/codepen.io\/vihanga\" target=\"_blank\" rel=\"noopener\">@vihanga<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">29. OTP VERIFICATION<\/h3>\n\n\n\n<p>In the below codepen first, we have to enter the number and then the OTP will be generated, then OTP is entered and a verifying button is available to verify it. <\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP VERIFICATION\" src=\"https:\/\/codepen.io\/sanchitdua139\/embed\/BaRaNYZ?default-tab=&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/sanchitdua139\/pen\/BaRaNYZ\" target=\"_blank\" rel=\"noopener\">\n  OTP VERIFICATION<\/a> by sanchit (<a href=\"https:\/\/codepen.io\/sanchitdua139\" target=\"_blank\" rel=\"noopener\">@sanchitdua139<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">30. OTP Generator<\/h3>\n\n\n\n<p>Here we are provided with an OTP generator. Three options are there for generating OTP first is of only numbers then only letters and third is of mixed one . <\/p>\n\n\n\n<iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"OTP generator\" src=\"https:\/\/codepen.io\/vimal211\/embed\/JjNZXVV?default-tab=result&#038;theme-id=light\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/vimal211\/pen\/JjNZXVV\" target=\"_blank\" rel=\"noopener\">\n  OTP generator<\/a> by Vimal M (<a href=\"https:\/\/codepen.io\/vimal211\" target=\"_blank\" rel=\"noopener\">@vimal211<\/a>)\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion:<\/h2>\n\n\n\n<p>So, you saw many different varieties of OTP Input field templates which are very beneficial for web development learners whether you are a beginner or a professional one. You can add them whenever you are proceeding with a website related to authorization where OTP input is required. It would be very useful for you.<\/p>\n\n\n\n<p>For more such collections stay connected with&nbsp;<a href=\"https:\/\/foolishdeveloper.com\/foolishdeveloperhome\/\">Foolish Developer<\/a>&nbsp;and become an expert in coding. If you have any queries feel free to ask in the comment section.<\/p>\n\n\n\n<p>Thank you!!<\/p>\n\n\n\n<p><strong>READ ALSO:<\/strong> <a href=\"https:\/\/foolishdeveloper.com\/shopping-cart-template-using-html-css-js\/\" data-type=\"post\" data-id=\"5510\">20+ Shopping Cart Template using HTML, CSS &amp; Javascript<\/a><\/p>\n\n\n\n<p>                      <a href=\"https:\/\/foolishdeveloper.com\/otp-input-field-javascript\/\" data-type=\"post\" data-id=\"1533\">Create OTP Input Field using JavaScript &amp; HTML (Free Code)<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1707806239831\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What is an OTP?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>OTP : One time password is unique password security system which helps user to get access into the account only once using a password.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1707806296683\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do you create an OTP field?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To Create a simple OTP fields, you need to know the form concept of HTML.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Another blog, another step of learning&#8230; Hey, my coding enthusiasts welcome to our new blog of the amazing and latest collection of 30+ OTP input fields using HTML, CSS, and Javascript. OTP input fields OTP stands for One-time-password, which has now become very useful for security purposes. This password as the name suggests is for [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":5821,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[12,13],"tags":[470],"class_list":["post-5778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-javascript","tag-otp-input-fields","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/5778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=5778"}],"version-history":[{"count":7,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/5778\/revisions"}],"predecessor-version":[{"id":6715,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/5778\/revisions\/6715"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/5821"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=5778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=5778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=5778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}