{"id":313,"date":"2009-06-24T05:38:55","date_gmt":"2009-06-24T05:38:55","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=313"},"modified":"2019-01-11T18:56:00","modified_gmt":"2019-01-11T18:56:00","slug":"how-create-good-looking-form-without-table","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2009\/06\/how-create-good-looking-form-without-table\/","title":{"rendered":"How create good looking form without table"},"content":{"rendered":"<p>This tutorial explains how to design a good form  using a clean CSS design with only label and input tags to simulate an HTML table structure. You can use all CSS\/HTML elements to design your custom form for your web projects:<br \/>\n<!--more--><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/06\/form-17.jpg\" alt=\"form-17\" title=\"How create good looking form without table\" width=\"422\" height=\"238\" class=\"alignnone size-full wp-image-335\" srcset=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/06\/form-17.jpg 422w, http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/06\/form-17-300x169.jpg 300w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/p>\n<h2>Step 1: Create basic HTML structure<\/h2>\n<pre>\r\n[code lang=\"htmlstrict\"]\r\n <form>\r\n          <div class=\"box\">\r\n            <h1>Contact Form :<\/h1>\r\n            <label>\r\n               <span>Full name<\/span>\r\n               <input type=\"text\" class=\"input_text\" name=\"name\" id=\"name\"\/>\r\n            <\/label>\r\n             <label>\r\n               <span>Email<\/span>\r\n               <input type=\"text\" class=\"input_text\" name=\"email\" id=\"email\"\/>\r\n            <\/label>\r\n             <label>\r\n                <span>Subject<\/span>\r\n                <input type=\"text\" class=\"input_text\" name=\"subject\" id=\"subject\"\/>\r\n            <\/label>\r\n            <label>\r\n                <span>Message<\/span>\r\n                <textarea class=\"message\" name=\"feedback\" id=\"feedback\"><\/textarea>\r\n                <input type=\"button\" class=\"button\" value=\"Submit Form\" \/>\r\n            <\/label>\r\n            \r\n            \r\n         <\/div>\r\n    <\/form>\r\n[\/code]\r\n<\/pre>\n<h2>Step:2 Create CSS Code<\/h2>\n<pre>\r\n[code lang=\"css\"]\r\n*{ margin:0; padding:0;}\r\nbody{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}\r\nform,input,select,textarea{margin:0; padding:0; color:#ffffff;}\r\n\r\ndiv.box {\r\nmargin:0 auto;\r\nwidth:500px;\r\nbackground:#222222;\r\nposition:relative;\r\ntop:50px;\r\nborder:1px solid #262626;\r\n}\r\n\r\ndiv.box h1 { \r\ncolor:#ffffff;\r\nfont-size:18px;\r\ntext-transform:uppercase;\r\npadding:5px 0 5px 5px;\r\nborder-bottom:1px solid #161712;\r\nborder-top:1px solid #161712; \r\n}\r\n\r\ndiv.box label {\r\nwidth:100%;\r\ndisplay: block;\r\nbackground:#1C1C1C;\r\nborder-top:1px solid #262626;\r\nborder-bottom:1px solid #161712;\r\npadding:10px 0 10px 0;\r\n}\r\n\r\ndiv.box label span {\r\ndisplay: block;\r\ncolor:#bbbbbb;\r\nfont-size:12px;\r\nfloat:left;\r\nwidth:100px;\r\ntext-align:right;\r\npadding:5px 20px 0 0;\r\n}\r\n\r\ndiv.box .input_text {\r\npadding:10px 10px;\r\nwidth:200px;\r\nbackground:#262626;\r\nborder-bottom: 1px double #171717;\r\nborder-top: 1px double #171717;\r\nborder-left:1px double #333333;\r\nborder-right:1px double #333333;\r\n}\r\n\r\ndiv.box .message{\r\npadding:7px 7px;\r\nwidth:350px;\r\nbackground:#262626;\r\nborder-bottom: 1px double #171717;\r\nborder-top: 1px double #171717;\r\nborder-left:1px double #333333;\r\nborder-right:1px double #333333;\r\noverflow:hidden;\r\nheight:150px;\r\n}\r\n\r\ndiv.box .button\r\n{\r\nmargin:0 0 10px 0;\r\npadding:4px 7px;\r\nbackground:#CC0000;\r\nborder:0px;\r\nposition: relative;\r\ntop:10px;\r\nleft:382px;\r\nwidth:100px;\r\nborder-bottom: 1px double #660000;\r\nborder-top: 1px double #660000;\r\nborder-left:1px double #FF0033;\r\nborder-right:1px double #FF0033;\r\n}\r\n[\/code]\r\n<\/pre>\n<p>finaly we are done. We have created a good looking form without table. <a href='http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/06\/how-to-create-good-looking-form-without-table.html'>View Example<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial explains how to design a good form using a clean CSS design with only label and input tags to simulate an HTML table structure. You can use all CSS\/HTML elements to design your custom form for your web &hellip; <a href=\"http:\/\/aceinfowayindia.com\/blog\/2009\/06\/how-create-good-looking-form-without-table\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,56],"tags":[52,23],"class_list":["post-313","post","type-post","status-publish","format-standard","hentry","category-css","category-tutorials","tag-css","tag-tutorials"],"_links":{"self":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":18,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"predecessor-version":[{"id":342,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions\/342"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}