{"id":8472,"date":"2022-09-28T11:39:15","date_gmt":"2022-09-28T11:39:15","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=8472"},"modified":"2022-09-28T11:39:15","modified_gmt":"2022-09-28T11:39:15","slug":"html-form-templates","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/09\/28\/html-form-templates\/","title":{"rendered":"HTML Form Templates"},"content":{"rendered":"\n<p>An HTML form is a section of a document containing form elements. Form elements are various types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, labels and so on.<\/p>\n\n\n\n<p>The HTML\u00a0&lt;form>\u00a0tag is used for declaring a form. This tag comes in pairs. The special elements which are called controls are written between opening (&lt;form>) and closing (&lt;\/form>) tags.<\/p>\n\n\n\n<p>The following form elements are used to create a form:<\/p>\n\n\n\n<ul><li>&lt;input><\/li><li>&lt;textarea><\/li><li>&lt;button><\/li><li>&lt;select><\/li><li>&lt;option><\/li><li>&lt;fieldset><\/li><li>&lt;label><\/li><\/ul>\n\n\n\n<p>Here you can find a collection of various kinds of forms which are created using only HTML and\u00a0CSS. The forms are classified and you can choose the type you would like to use.<\/p>\n\n\n\n<p>The below-mentioned forms are free to copy and use. You just need to click on the form name or image, then you will see the editor&#8217;s page with the code and the result.<\/p>\n\n\n\n<p>Registration forms\u00a0|\u00a0Contact forms\u00a0|\u00a0Feedback forms\u00a0|\u00a0Evaluation forms\u00a0|\u00a0Application forms\u00a0|\u00a0Booking forms\u00a0|\u00a0Career forms\u00a0|\u00a0Complaint forms\u00a0|\u00a0Surveys<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"registration-forms\">Registration Forms<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.w3docs.com\/uploads\/media\/default\/0001\/02\/65e6d26250a3a01afb555c9e91e27dfcd9318723.png\" alt=\"Simple registration form\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Simple registration form&lt;\/title&gt;\n    &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500,700\" rel=\"stylesheet\"&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.4.1\/css\/all.css\" integrity=\"sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz\" crossorigin=\"anonymous\"&gt;\n    &lt;style&gt;\n      html, body {\n      display: flex;\n      justify-content: center;\n      height: 100%;\n      }\n      body, div, h1, form, input, p { \n      padding: 0;\n      margin: 0;\n      outline: none;\n      font-family: Roboto, Arial, sans-serif;\n      font-size: 16px;\n      color: #666;\n      }\n      h1 {\n      padding: 10px 0;\n      font-size: 32px;\n      font-weight: 300;\n      text-align: center;\n      }\n      p {\n      font-size: 12px;\n      }\n      hr {\n      color: #a9a9a9;\n      opacity: 0.3;\n      }\n      .main-block {\n      max-width: 340px; \n      min-height: 460px; \n      padding: 10px 0;\n      margin: auto;\n      border-radius: 5px; \n      border: solid 1px #ccc;\n      box-shadow: 1px 2px 5px rgba(0,0,0,.31); \n      background: #ebebeb; \n      }\n      form {\n      margin: 0 30px;\n      }\n      .account-type, .gender {\n      margin: 15px 0;\n      }\n      input&#91;type=radio] {\n      display: none;\n      }\n      label#icon {\n      margin: 0;\n      border-radius: 5px 0 0 5px;\n      }\n      label.radio {\n      position: relative;\n      display: inline-block;\n      padding-top: 4px;\n      margin-right: 20px;\n      text-indent: 30px;\n      overflow: visible;\n      cursor: pointer;\n      }\n      label.radio:before {\n      content: \"\";\n      position: absolute;\n      top: 2px;\n      left: 0;\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      background: #1c87c9;\n      }\n      label.radio:after {\n      content: \"\";\n      position: absolute;\n      width: 9px;\n      height: 4px;\n      top: 8px;\n      left: 4px;\n      border: 3px solid #fff;\n      border-top: none;\n      border-right: none;\n      transform: rotate(-45deg);\n      opacity: 0;\n      }\n      input&#91;type=radio]:checked + label:after {\n      opacity: 1;\n      }\n      input&#91;type=text], input&#91;type=password] {\n      width: calc(100% - 57px);\n      height: 36px;\n      margin: 13px 0 0 -5px;\n      padding-left: 10px; \n      border-radius: 0 5px 5px 0;\n      border: solid 1px #cbc9c9; \n      box-shadow: 1px 2px 5px rgba(0,0,0,.09); \n      background: #fff; \n      }\n      input&#91;type=password] {\n      margin-bottom: 15px;\n      }\n      #icon {\n      display: inline-block;\n      padding: 9.3px 15px;\n      box-shadow: 1px 2px 5px rgba(0,0,0,.09); \n      background: #1c87c9;\n      color: #fff;\n      text-align: center;\n      }\n      .btn-block {\n      margin-top: 10px;\n      text-align: center;\n      }\n      button {\n      width: 100%;\n      padding: 10px 0;\n      margin: 10px auto;\n      border-radius: 5px; \n      border: none;\n      background: #1c87c9; \n      font-size: 14px;\n      font-weight: 600;\n      color: #fff;\n      }\n      button:hover {\n      background: #26a9e0;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"main-block\"&gt;\n      &lt;h1&gt;Registration&lt;\/h1&gt;\n      &lt;form action=\"\/\"&gt;\n        &lt;hr&gt;\n        &lt;div class=\"account-type\"&gt;\n          &lt;input type=\"radio\" value=\"none\" id=\"radioOne\" name=\"account\" checked\/&gt;\n          &lt;label for=\"radioOne\" class=\"radio\"&gt;Personal&lt;\/label&gt;\n          &lt;input type=\"radio\" value=\"none\" id=\"radioTwo\" name=\"account\" \/&gt;\n          &lt;label for=\"radioTwo\" class=\"radio\"&gt;Company&lt;\/label&gt;\n        &lt;\/div&gt;\n        &lt;hr&gt;\n        &lt;label id=\"icon\" for=\"name\"&gt;&lt;i class=\"fas fa-envelope\"&gt;&lt;\/i&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" name=\"name\" id=\"name\" placeholder=\"Email\" required\/&gt;\n        &lt;label id=\"icon\" for=\"name\"&gt;&lt;i class=\"fas fa-user\"&gt;&lt;\/i&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" name=\"name\" id=\"name\" placeholder=\"Name\" required\/&gt;\n        &lt;label id=\"icon\" for=\"name\"&gt;&lt;i class=\"fas fa-unlock-alt\"&gt;&lt;\/i&gt;&lt;\/label&gt;\n        &lt;input type=\"password\" name=\"name\" id=\"name\" placeholder=\"Password\" required\/&gt;\n        &lt;hr&gt;\n        &lt;div class=\"gender\"&gt;\n          &lt;input type=\"radio\" value=\"none\" id=\"male\" name=\"gender\" checked\/&gt;\n          &lt;label for=\"male\" class=\"radio\"&gt;Male&lt;\/label&gt;\n          &lt;input type=\"radio\" value=\"none\" id=\"female\" name=\"gender\" \/&gt;\n          &lt;label for=\"female\" class=\"radio\"&gt;Female&lt;\/label&gt;\n        &lt;\/div&gt;\n        &lt;hr&gt;\n        &lt;div class=\"btn-block\"&gt;\n          &lt;p&gt;By clicking Register, you agree on our &lt;a href=\"https:\/\/www.w3docs.com\/privacy-policy\"&gt;Privacy Policy for W3Docs&lt;\/a&gt;.&lt;\/p&gt;\n          &lt;button type=\"submit\" href=\"\/\"&gt;Submit&lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/form&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.w3docs.com\/uploads\/media\/default\/0001\/02\/7d029d13d19faeecb2812731694ef24564898383.png\" alt=\"html-form-template\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Simple login form&lt;\/title&gt;\n    &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500,700\" rel=\"stylesheet\"&gt;\n    &lt;style&gt;\n      html, body {\n      display: flex;\n      justify-content: center;\n      font-family: Roboto, Arial, sans-serif;\n      font-size: 15px;\n      }\n      form {\n      border: 5px solid #f1f1f1;\n      }\n      input&#91;type=text], input&#91;type=password] {\n      width: 100%;\n      padding: 16px 8px;\n      margin: 8px 0;\n      display: inline-block;\n      border: 1px solid #ccc;\n      box-sizing: border-box;\n      }\n      button {\n      background-color: #8ebf42;\n      color: white;\n      padding: 14px 0;\n      margin: 10px 0;\n      border: none;\n      cursor: grabbing;\n      width: 100%;\n      }\n      h1 {\n      text-align:center;\n      fone-size:18;\n      }\n      button:hover {\n      opacity: 0.8;\n      }\n      .formcontainer {\n      text-align: left;\n      margin: 24px 50px 12px;\n      }\n      .container {\n      padding: 16px 0;\n      text-align:left;\n      }\n      span.psw {\n      float: right;\n      padding-top: 0;\n      padding-right: 15px;\n      }\n      \/* Change styles for span on extra small screens *\/\n      @media screen and (max-width: 300px) {\n      span.psw {\n      display: block;\n      float: none;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;form action=\"\/action_page.php\"&gt;\n      &lt;h1&gt;Login Form&lt;\/h1&gt;\n      &lt;div class=\"formcontainer\"&gt;\n      &lt;hr\/&gt;\n      &lt;div class=\"container\"&gt;\n        &lt;label for=\"uname\"&gt;&lt;strong&gt;Username&lt;\/strong&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" placeholder=\"Enter Username\" name=\"uname\" required&gt;\n        &lt;label for=\"psw\"&gt;&lt;strong&gt;Password&lt;\/strong&gt;&lt;\/label&gt;\n        &lt;input type=\"password\" placeholder=\"Enter Password\" name=\"psw\" required&gt;\n      &lt;\/div&gt;\n      &lt;button type=\"submit\"&gt;Login&lt;\/button&gt;\n      &lt;div class=\"container\" style=\"background-color: #eee\"&gt;\n        &lt;label style=\"padding-left: 15px\"&gt;\n        &lt;input type=\"checkbox\"  checked=\"checked\" name=\"remember\"&gt; Remember me\n        &lt;\/label&gt;\n        &lt;span class=\"psw\"&gt;&lt;a href=\"#\"&gt; Forgot password?&lt;\/a&gt;&lt;\/span&gt;\n      &lt;\/div&gt;\n    &lt;\/form&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.w3docs.com\/uploads\/media\/default\/0001\/02\/a1be558f37ac3f870436cb5836df2f3d146b2bc1.png\" alt=\"html-form-template\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n  &lt;title>Simple Sign up from&lt;\/title>\n  &lt;head>\n    &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500,700\" rel=\"stylesheet\">\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.4.1\/css\/all.css\" integrity=\"sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz\" crossorigin=\"anonymous\">\n    &lt;style>\n      html, body {\n      display: flex;\n      justify-content: center;\n      font-family: Roboto, Arial, sans-serif;\n      font-size: 15px;\n      }\n      form {\n      border: 5px solid #f1f1f1;\n      }\n      input&#91;type=text], input&#91;type=password] {\n      width: 100%;\n      padding: 16px 8px;\n      margin: 8px 0;\n      display: inline-block;\n      border: 1px solid #ccc;\n      box-sizing: border-box;\n      }\n      .icon {\n      font-size: 110px;\n      display: flex;\n      justify-content: center;\n      color: #4286f4;\n      }\n      button {\n      background-color: #4286f4;\n      color: white;\n      padding: 14px 0;\n      margin: 10px 0;\n      border: none;\n      cursor: grab;\n      width: 48%;\n      }\n      h1 {\n      text-align:center;\n      fone-size:18;\n      }\n      button:hover {\n      opacity: 0.8;\n      }\n      .formcontainer {\n      text-align: center;\n      margin: 24px 50px 12px;\n      }\n      .container {\n      padding: 16px 0;\n      text-align:left;\n      }\n      span.psw {\n      float: right;\n      padding-top: 0;\n      padding-right: 15px;\n      }\n      \/* Change styles for span on extra small screens *\/\n      @media screen and (max-width: 300px) {\n      span.psw {\n      display: block;\n      float: none;\n      }\n    &lt;\/style>\n  &lt;\/head>\n  &lt;body>\n    &lt;form action=\"\/action_page.php\">\n      &lt;h1>SIGN UP&lt;\/h1>\n      &lt;div class=\"icon\">\n        &lt;i class=\"fas fa-user-circle\">&lt;\/i>\n      &lt;\/div>\n      &lt;div class=\"formcontainer\">\n      &lt;div class=\"container\">\n        &lt;label for=\"uname\">&lt;strong>Username&lt;\/strong>&lt;\/label>\n        &lt;input type=\"text\" placeholder=\"Enter Username\" name=\"uname\" required>\n        &lt;label for=\"mail\">&lt;strong>E-mail&lt;\/strong>&lt;\/label>\n        &lt;input type=\"text\" placeholder=\"Enter E-mail\" name=\"mail\" required>\n        &lt;label for=\"psw\">&lt;strong>Password&lt;\/strong>&lt;\/label>\n        &lt;input type=\"password\" placeholder=\"Enter Password\" name=\"psw\" required>\n      &lt;\/div>\n      &lt;button type=\"submit\">&lt;strong>SIGN UP&lt;\/strong>&lt;\/button>\n      &lt;div class=\"container\" style=\"background-color: #eee\">\n        &lt;label style=\"padding-left: 15px\">\n        &lt;input type=\"checkbox\"  checked=\"checked\" name=\"remember\"> Remember me\n        &lt;\/label>\n        &lt;span class=\"psw\">&lt;a href=\"#\">Forgot password?&lt;\/a>&lt;\/span>\n      &lt;\/div>\n    &lt;\/form>\n  &lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.w3docs.com\/uploads\/media\/default\/0001\/02\/c2b8c99f54810d9f9a345e6a0a12135936bba107.png\" alt=\"Account registration form\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Account registration form&lt;\/title&gt;\n    &lt;link href='https:\/\/fonts.googleapis.com\/css?family=Open+Sans:400,300,300italic,400italic,600' rel='stylesheet' type='text\/css'&gt;\n    &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500,700\" rel=\"stylesheet\"&gt;\n    &lt;style&gt;\n      html, body {\n      min-height: 100%;\n      }\n      body, div, form, input, select, p { \n      padding: 0;\n      margin: 0;\n      outline: none;\n      font-family: Roboto, Arial, sans-serif;\n      font-size: 14px;\n      color: #666;\n      }\n      h1 {\n      margin: 0;\n      font-weight: 400;\n      }\n      h3 {\n      margin: 12px 0;\n      color: #8ebf42;\n      }\n      .main-block {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: #fff;\n      }\n      form {\n      width: 100%;\n      padding: 20px;\n      }\n      fieldset {\n      border: none;\n      border-top: 1px solid #8ebf42;\n      }\n      .account-details, .personal-details {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: space-between;\n      }\n      .account-details &gt;div, .personal-details &gt;div &gt;div {\n      display: flex;\n      align-items: center;\n      margin-bottom: 10px;\n      }\n      .account-details &gt;div, .personal-details &gt;div, input, label {\n      width: 100%;\n      }\n      label {\n      padding: 0 5px;\n      text-align: right;\n      vertical-align: middle;\n      }\n      input {\n      padding: 5px;\n      vertical-align: middle;\n      }\n      .checkbox {\n      margin-bottom: 10px;\n      }\n      select, .children, .gender, .bdate-block {\n      width: calc(100% + 26px);\n      padding: 5px 0;\n      }\n      select {\n      background: transparent;\n      }\n      .gender input {\n      width: auto;\n      } \n      .gender label {\n      padding: 0 5px 0 0;\n      } \n      .bdate-block {\n      display: flex;\n      justify-content: space-between;\n      }\n      .birthdate select.day {\n      width: 35px;\n      }\n      .birthdate select.mounth {\n      width: calc(100% - 94px);\n      }\n      .birthdate input {\n      width: 38px;\n      vertical-align: unset;\n      }\n      .checkbox input, .children input {\n      width: auto;\n      margin: -2px 10px 0 0;\n      }\n      .checkbox a {\n      color: #8ebf42;\n      }\n      .checkbox a:hover {\n      color: #82b534;\n      }\n      button {\n      width: 100%;\n      padding: 10px 0;\n      margin: 10px auto;\n      border-radius: 5px; \n      border: none;\n      background: #8ebf42; \n      font-size: 14px;\n      font-weight: 600;\n      color: #fff;\n      }\n      button:hover {\n      background: #82b534;\n      }\n      @media (min-width: 568px) {\n      .account-details &gt;div, .personal-details &gt;div {\n      width: 50%;\n      }\n      label {\n      width: 40%;\n      }\n      input {\n      width: 60%;\n      }\n      select, .children, .gender, .bdate-block {\n      width: calc(60% + 16px);\n      }\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"main-block\"&gt;\n    &lt;form action=\"\/\"&gt;\n      &lt;h1&gt;Create a free account&lt;\/h1&gt;\n      &lt;fieldset&gt;\n        &lt;legend&gt;\n          &lt;h3&gt;Account Details&lt;\/h3&gt;\n        &lt;\/legend&gt;\n        &lt;div  class=\"account-details\"&gt;\n          &lt;div&gt;&lt;label&gt;Email*&lt;\/label&gt;&lt;input type=\"text\" name=\"name\" required&gt;&lt;\/div&gt;\n          &lt;div&gt;&lt;label&gt;Password*&lt;\/label&gt;&lt;input type=\"password\" name=\"name\" required&gt;&lt;\/div&gt;\n          &lt;div&gt;&lt;label&gt;Repeat email*&lt;\/label&gt;&lt;input type=\"text\" name=\"name\" required&gt;&lt;\/div&gt;\n          &lt;div&gt;&lt;label&gt;Repeat password*&lt;\/label&gt;&lt;input type=\"password\" name=\"name\" required&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/fieldset&gt;\n      &lt;fieldset&gt;\n        &lt;legend&gt;\n          &lt;h3&gt;Personal Details&lt;\/h3&gt;\n        &lt;\/legend&gt;\n        &lt;div  class=\"personal-details\"&gt;\n          &lt;div&gt;\n            &lt;div&gt;&lt;label&gt;Name*&lt;\/label&gt;&lt;input type=\"text\" name=\"name\" required&gt;&lt;\/div&gt;\n            &lt;div&gt;&lt;label&gt;Phone*&lt;\/label&gt;&lt;input type=\"text\" name=\"name\" required&gt;&lt;\/div&gt;\n            &lt;div&gt;&lt;label&gt;Street&lt;\/label&gt;&lt;input type=\"text\" name=\"name\"&gt;&lt;\/div&gt;\n            &lt;div&gt;&lt;label&gt;City*&lt;\/label&gt;&lt;input type=\"text\" name=\"name\" required&gt;&lt;\/div&gt;\n            &lt;div&gt;\n              &lt;label&gt;Country*&lt;\/label&gt;  \n              &lt;select&gt;\n                &lt;option value=\"\"&gt;&lt;\/option&gt;\n                &lt;option value=\"Armenia\"&gt;Armenia&lt;\/option&gt;\n                &lt;option value=\"Russia\"&gt;Russia&lt;\/option&gt;\n                &lt;option value=\"Germany\"&gt;Germany&lt;\/option&gt;\n                &lt;option value=\"France\"&gt;France&lt;\/option&gt;\n                &lt;option value=\"USA\"&gt;USA&lt;\/option&gt;\n                &lt;option value=\"UK\"&gt;UK&lt;\/option&gt;\n              &lt;\/select&gt;\n            &lt;\/div&gt;\n            &lt;div&gt;&lt;label&gt;Website&lt;\/label&gt;&lt;input type=\"text\" name=\"name\"&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div&gt;\n            &lt;div&gt;\n              &lt;label&gt;Gender*&lt;\/label&gt;\n              &lt;div class=\"gender\"&gt;\n                &lt;input type=\"radio\" value=\"none\" id=\"male\" name=\"gender\" required\/&gt;\n                &lt;label for=\"male\" class=\"radio\"&gt;Male&lt;\/label&gt;\n                &lt;input type=\"radio\" value=\"none\" id=\"female\" name=\"gender\" required\/&gt;\n                &lt;label for=\"female\" class=\"radio\"&gt;Female&lt;\/label&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"birthdate\"&gt;\n              &lt;label&gt;Birthdate*&lt;\/label&gt;\n              &lt;div class=\"bdate-block\"&gt;\n                &lt;select class=\"day\" required&gt;\n                  &lt;option value=\"\"&gt;&lt;\/option&gt;\n                  &lt;option value=\"01\"&gt;01&lt;\/option&gt;\n                  &lt;option value=\"02\"&gt;02&lt;\/option&gt;\n                  &lt;option value=\"03\"&gt;03&lt;\/option&gt;\n                  &lt;option value=\"04\"&gt;04&lt;\/option&gt;\n                  &lt;option value=\"05\"&gt;05&lt;\/option&gt;\n                  &lt;option value=\"06\"&gt;06&lt;\/option&gt;\n                  &lt;option value=\"07\"&gt;07&lt;\/option&gt;\n                  &lt;option value=\"08\"&gt;08&lt;\/option&gt;\n                  &lt;option value=\"09\"&gt;09&lt;\/option&gt;\n                  &lt;option value=\"10\"&gt;10&lt;\/option&gt;\n                  &lt;option value=\"11\"&gt;11&lt;\/option&gt;\n                  &lt;option value=\"12\"&gt;12&lt;\/option&gt;\n                  &lt;option value=\"13\"&gt;13&lt;\/option&gt;\n                  &lt;option value=\"14\"&gt;14&lt;\/option&gt;\n                  &lt;option value=\"15\"&gt;15&lt;\/option&gt;\n                  &lt;option value=\"16\"&gt;16&lt;\/option&gt;\n                  &lt;option value=\"17\"&gt;17&lt;\/option&gt;\n                  &lt;option value=\"18\"&gt;18&lt;\/option&gt;\n                  &lt;option value=\"19\"&gt;19&lt;\/option&gt;\n                  &lt;option value=\"20\"&gt;20&lt;\/option&gt;\n                  &lt;option value=\"21\"&gt;21&lt;\/option&gt;\n                  &lt;option value=\"22\"&gt;22&lt;\/option&gt;\n                  &lt;option value=\"23\"&gt;23&lt;\/option&gt;\n                  &lt;option value=\"24\"&gt;24&lt;\/option&gt;\n                  &lt;option value=\"25\"&gt;25&lt;\/option&gt;\n                  &lt;option value=\"26\"&gt;26&lt;\/option&gt;\n                  &lt;option value=\"27\"&gt;27&lt;\/option&gt;\n                  &lt;option value=\"28\"&gt;28&lt;\/option&gt;\n                  &lt;option value=\"29\"&gt;29&lt;\/option&gt;\n                  &lt;option value=\"30\"&gt;30&lt;\/option&gt;\n                  &lt;option value=\"31\"&gt;31&lt;\/option&gt;\n                &lt;\/select&gt;\n                &lt;select class=\"mounth\" required&gt;\n                  &lt;option value=\"\"&gt;&lt;\/option&gt;\n                  &lt;option value=\"January\"&gt;January&lt;\/option&gt;\n                  &lt;option value=\"February\"&gt;February&lt;\/option&gt;\n                  &lt;option value=\"March\"&gt;March&lt;\/option&gt;\n                  &lt;option value=\"April\"&gt;April&lt;\/option&gt;\n                  &lt;option value=\"May\"&gt;May&lt;\/option&gt;\n                  &lt;option value=\"June\"&gt;June&lt;\/option&gt;\n                  &lt;option value=\"July\"&gt;July&lt;\/option&gt;\n                  &lt;option value=\"August\"&gt;August&lt;\/option&gt;\n                  &lt;option value=\"September\"&gt;September&lt;\/option&gt;\n                  &lt;option value=\"October\"&gt;October&lt;\/option&gt;\n                  &lt;option value=\"November\"&gt;November&lt;\/option&gt;\n                  &lt;option value=\"December\"&gt;December&lt;\/option&gt;\n                &lt;\/select&gt;\n                &lt;input type=\"text\" name=\"name\" required&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div&gt;\n              &lt;label&gt;Nationality*&lt;\/label&gt;              \n              &lt;select required&gt;\n                &lt;option value=\"\"&gt;&lt;\/option&gt;\n                &lt;option value=\"Armenian\"&gt;Armenian&lt;\/option&gt;\n                &lt;option value=\"Russian\"&gt;Russian&lt;\/option&gt;\n                &lt;option value=\"German\"&gt;German&lt;\/option&gt;\n                &lt;option value=\"French\"&gt;French&lt;\/option&gt;\n                &lt;option value=\"American\"&gt;American&lt;\/option&gt;\n                &lt;option value=\"English\"&gt;English&lt;\/option&gt;\n              &lt;\/select&gt;\n            &lt;\/div&gt;\n            &lt;div&gt;\n              &lt;label&gt;Children*&lt;\/label&gt;\n              &lt;div class=\"children\"&gt;&lt;input type=\"checkbox\" name=\"name\" required&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/fieldset&gt;\n      &lt;fieldset&gt;\n        &lt;legend&gt;\n          &lt;h3&gt;Terms and Mailing&lt;\/h3&gt;\n        &lt;\/legend&gt;\n        &lt;div  class=\"terms-mailing\"&gt;\n          &lt;div class=\"checkbox\"&gt;\n            &lt;input type=\"checkbox\" name=\"checkbox\"&gt;&lt;span&gt;I accept the &lt;a href=\"https:\/\/www.w3docs.com\/privacy-policy\"&gt;Privacy Policy for W3Docs.&lt;\/a&gt;&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div class=\"checkbox\"&gt;\n            &lt;input type=\"checkbox\" name=\"checkbox\"&gt;&lt;span&gt;I want to recelve personallzed offers by your site&lt;\/span&gt;\n          &lt;\/div&gt;\n      &lt;\/fieldset&gt;\n      &lt;button type=\"submit\" href=\"\/\"&gt;Submit&lt;\/button&gt;\n    &lt;\/form&gt;\n    &lt;\/div&gt; \n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.w3docs.com\/uploads\/media\/default\/0001\/02\/b41ca769db0ee07389238da4b7b549a11273bff5.png\" alt=\"Registration with facebook, twitter and google\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Registration with facebook, twitter and google&lt;\/title&gt;\n    &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500,700\" rel=\"stylesheet\"&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.4.1\/css\/all.css\" integrity=\"sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz\" crossorigin=\"anonymous\"&gt;\n    &lt;style&gt;\n      html, body {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      }\n      body, div, p { \n      padding: 0;\n      margin: 0;\n      outline: none;\n      font-family: Roboto, Arial, sans-serif;\n      font-size: 16px;\n      color: #666;\n      }\n      body {\n      background: url(\"\/uploads\/media\/default\/0001\/01\/49bff73f282c2c21f3341f1fe457fe35337b1792.jpeg\") no-repeat center;\n      background-size:cover;\n      }\n      h1 {\n      margin: 0 0 10px 0;\n      font-weight: 400;\n      }\n      .main-block {\n      display: flex;\n      width: 90%;\n      padding: 10px 0; \n      border-radius: 5px;\n      box-shadow: 1px 1px 8px 0px #666; \n      background: #fff;\n      }\n      .block-item {\n      width: 50%;\n      padding: 20px; \n      }\n      .block-item.right {\n      border-left: 1px solid #aaa;\n      }\n      i {\n      width: 50px;\n      font-size: 24px;\n      }\n      .btn {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: 40px;\n      margin: 10px 0;\n      outline: none;\n      border: 0;\n      border-radius: 5px;\n      box-shadow: 2px 2px 2px #666;\n      background: #e8e8e8;\n      color: #fff;\n      cursor: pointer;\n      }\n      .btn:hover {\n      transform: scale(1.03);\n      }\n      .btn span {\n      font-size: 16px;\n      }\n      .facebook {\n      background: #3a589e;\n      }\n      .twitter {\n      background: #429cd6;\n      }\n      .google{\n      background: #d34836;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"main-block\"&gt;\n      &lt;div class=\"block-item left\"&gt;\n        &lt;h1&gt;Sign up with:&lt;\/h1&gt;\n        &lt;p&gt;&lt;small&gt;W3docs provides free learning materials for programming languages like HTML, CSS, Java Script, PHP etc.&lt;\/small&gt;\n        &lt;\/p&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"block-item right\"&gt;\n        &lt;button class=\"btn facebook\" data-provider=\"facebook\"&gt;&lt;i class=\"fab fa-facebook-f\"&gt;&lt;\/i&gt;&lt;span&gt;Facebook&lt;\/span&gt;&lt;\/button&gt;\n        &lt;button class=\"btn twitter\" data-provider=\"twitter\"&gt;&lt;i class=\"fab fa-twitter\"&gt;&lt;\/i&gt;&lt;span&gt;Twitter&lt;\/span&gt;&lt;\/button&gt;\n        &lt;button class=\"btn google\" data-provider=\"google\"&gt;&lt;i class=\"fab fa-google\"&gt;&lt;\/i&gt;&lt;span&gt;Google&lt;\/span&gt;&lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.w3docs.com\/uploads\/media\/default\/0001\/02\/8720df03b3e9e608f0df9061e1599ff3998ecfb1.png\" alt=\"Educational registration form\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>An HTML form is a section of a document containing form elements. Form elements are various types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, labels and so on. The HTML\u00a0&lt;form>\u00a0tag is used for declaring a form. This tag comes in pairs. The special elements which are called controls are written [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[358],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8472"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=8472"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8472\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=8472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=8472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=8472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}