{"id":14362,"date":"2012-07-25T23:01:53","date_gmt":"2012-07-25T15:01:53","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14362"},"modified":"2025-04-24T17:02:28","modified_gmt":"2025-04-24T09:02:28","slug":"creating-responsive-form-with-css3-html5","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/","title":{"rendered":"Creating Stylish Responsive Form With CSS3 and HTML5"},"content":{"rendered":"

Coding with CSS3<\/a> has dramatically changed the landscape within frontend web development. There are more opportunities to build unique interfaces with gradients, drop shadows, and rounded corners. All of these effects are slowly becoming adopted in every major web browser.<\/p>\n

In this tutorial, I want to showcase many of these cool CSS3 effects. I\u2019ve built a simple web form using some of the newer HTML5 input types. The layout is also responsive<\/strong>; it will adapt as the window size is reduced. This situation is perfect for building web forms to support smartphone users.<\/p>\n

Check out the source code and see if you can follow along in the file structure. Also, feel free to customize these elements and copy them into your own websites.<\/p>\n

\n Demo<\/a>\n Download Source Code<\/a>\n<\/div>\n

Building the Form Structure<\/h2>\n

To start, I\u2019ve created a main file index.html<\/strong> along with two separate stylesheets. style.css<\/strong> contains all the default selectors while responsive.css<\/strong> handles different window sizes. My doctype is HTML5, and I\u2019ve wrapped the entire form in a container <div><\/code>.<\/p>\n

This example only demonstrates the effects you can manifest when coding in CSS3. Thus, we have no post-submission script or destination to redirect the user. My code below contains the opening input tags for our first few form elements.<\/p>\n

\n<form name=\"hongkiat\" id=\"hongkiat-form\" method=\"post\" action=\"#\">\n    <div id=\"wrapping\" class=\"clearfix\">\n        <section id=\"aligned\">\n            <input type=\"text\" name=\"name\" id=\"name\" placeholder=\"Your name\" autocomplete=\"off\" tabindex=\"1\" class=\"txtinput\">\n            <input type=\"email\" name=\"email\" id=\"email\" placeholder=\"Your e-mail address\" autocomplete=\"off\" tabindex=\"2\" class=\"txtinput\">\n            <input type=\"url\" name=\"website\" id=\"website\" placeholder=\"Website URL\" autocomplete=\"off\" tabindex=\"3\" class=\"txtinput\">\n            <input type=\"tel\" name=\"telephone\" id=\"telephone\" placeholder=\"Phone number?(optional)\" tabindex=\"4\" class=\"txtinput\">\n            <textarea name=\"message\" id=\"message\" placeholder=\"Enter a cool message...\" tabindex=\"5\" class=\"txtblock\"><\/textarea>\n        <\/section>\n<\/pre>\n
The first block area is wrapped in a section tag so we can float the layout side-by-side. The left column contains all these inputs: text, e-mail, URL, and telephone number. As you tab through on your phone, the mobile keyboard display should adapt based on the input type. There are plenty of good reasons to support these features for mobile since everybody is working on-the-go these days.<\/p>\n
The textarea element can also have a placeholder text defined on page load. This is similar to a label that disappears once the user enters some text in the field. The attribute that isn\u2019t carried over is autocomplete<\/code> because textareas don\u2019t usually fill in related content.<\/p>\n
Sidebar Controls<\/h2>\n
I wanted to build this form so that it would respond appropriately to resizing windows. When the window is wide enough, then both input columns are floating next to each other. But if the width is cut down slightly, then the right-hand sidebar drops down below the main content.<\/p>\n
Here\u2019s my HTML for the sidebar area:<\/p>\n
\n<section id=\"aside\" class=\"clearfix\">\n    <section id=\"recipientcase\">\n        <h4>Recipient:<\/h4>\n        <select id=\"recipient\" name=\"recipient\" tabindex=\"6\" class=\"selmenu\">\n            <option value=\"staff\">Site Staff<\/option>\n            <option value=\"editor\">Editor-in-Chief<\/option>\n            <option value=\"technical\">Tech Department<\/option>\n            <option value=\"pr\">Public Relations<\/option>\n            <option value=\"support\">General Support<\/option>\n        <\/select>\n    <\/section>\n\n    <section id=\"prioritycase\">\n        <h4>Priority:<\/h4>\n        <span class=\"radiobadge\">\n            <input type=\"radio\" id=\"low\" name=\"priority\" value=\"low\">\n            <label for=\"low\">Low<\/label>\n        <\/span>\n\n        <span class=\"radiobadge\">\n            <input type=\"radio\" id=\"med\" name=\"priority\" value=\"med\" checked=\"checked\">\n            <label for=\"med\">Medium<\/label>\n        <\/span>\n\n        <span class=\"radiobadge\">\n            <input type=\"radio\" id=\"high\" name=\"priority\" value=\"high\">\n            <label for=\"high\">High<\/label>\n        <\/span>\n    <\/section>\n<\/section>\n<\/pre>\n
This code actually isn\u2019t too confusing \u2013 just a simple option select menu and some radio buttons. Additionally, after these objects, I placed a reset button and a submit button towards the end of the section.<\/p>\n
\n<section id=\"buttons\">\n    <input type=\"reset\" name=\"reset\" id=\"resetbtn\" class=\"resetbtn\" value=\"Reset\">\n    <input type=\"submit\" name=\"submit\" id=\"submitbtn\" class=\"submitbtn\" tabindex=\"7\" value=\"Submit this!\">\n    <br style=\"clear:both;\">\n<\/section>\n<\/form>\n<\/pre>\n
This all looks good, so now let\u2019s move into some CSS properties. There are so many customizations you can apply when working on form elements. Try not to bog yourself down with too much thinking and have fun!<\/p>\n
Animated Box Shadows<\/h2>\n
You\u2019ll notice as you tab through each of the main input elements, that I\u2019ve animated a colorful outer shadow. Google Chrome has an outline property that does something similar, but not quite as extravagant. This small part of the interface is alluring to first-time visitors.<\/p>\n
\n\/** the form elements **\/\n#hongkiat-form {\n    box-sizing: border-box;\n}\n\n#hongkiat-form .txtinput {\n    display: block;\n    font-family: \"Helvetica Neue\", Arial, sans-serif;\n    border-style: solid;\n    border-width: 1px;\n    border-color: #dedede;\n    margin-bottom: 20px;\n    font-size: 1.55em;\n    padding: 11px 25px;\n    padding-left: 55px;\n    width: 90%;\n    color: #777;\n\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;\n    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;\n    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;\n\n    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;\n    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;\n    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;\n    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;\n}\n\n#hongkiat-form .txtinput:focus {\n    color: #333;\n    border-color: rgba(41, 92, 161, 0.4);\n\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);\n    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);\n    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);\n    outline: 0 none;\n}\n<\/pre>\n
In order to target each text element, I\u2019ve used the class .txtinput<\/code>. Each of the transition properties work on border, box-shadow, and color. I\u2019m using box-sizing: border-box;<\/code> on the form container, so padding doesn\u2019t mess up our responsive design.<\/p>\n
I had to copy over these same styles and edit them slightly for the textarea. I changed some of the padding and margins, and appended a unique background icon.<\/p>\n
\n#hongkiat-form textarea {\n    display: block;\n    font-family: \"Helvetica Neue\", Arial, sans-serif;\n    border-style: solid;\n    border-width: 1px;\n    border-color: #dedede;\n    margin-bottom: 15px;\n    font-size: 1.5em;\n    padding: 11px 25px;\n    padding-left: 55px;\n    width: 90%;\n    height: 180px;\n    color: #777;\n\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;\n    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;\n    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;\n\n    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;\n    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;\n    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;\n    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;\n}\n\n#hongkiat-form textarea:focus {\n    color: #333;\n    border-color: rgba(41, 92, 161, 0.4);\n\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);\n    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);\n    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);\n    outline: 0 none;\n}\n\n#hongkiat-form textarea.txtblock {\n    background: #fff url('https:\/\/assets.hongkiat.com\/uploads\/responsive-css3-form\/speech.png') 5px 4px no-repeat;\n}\n<\/pre>\n
Sidebar Inputs<\/h2>\n
The radio buttons and select menu items are styled much simpler. You can apply outer glow effects and similar drop shadows on these elements, but it doesn\u2019t always look good. Alternatively, designers create custom user interfaces and attach these as background images. But this may require a jQuery workaround to keep the options displaying properly.<\/p>\n
\nspan.radiobadge {\n    display: block;\n    margin-bottom: 8px;\n}\n\nspan.radiobadge label {\n    font-size: 1.2em;\n    padding-bottom: 4px;\n}\n\nselect.selmenu {\n    font-size: 17px;\n    color: #676767;\n    border: 1px solid #aaa;\n    width: 200px;\n}\n<\/pre>\n
I haven\u2019t done a whole lot to push these away from the main input elements. Plenty of extra padding is important, so your users feel comfortable interacting with the form. When text is super tiny, it can be a struggle just to fill out each part. Keep your font large, but not so large that it overwhelms the page.<\/p>\n
Customized Buttons<\/h2>\n
The reset and submit buttons are designed in a class of their own. I\u2019ve built a set of light gradients to match well with the blue highlights in our form fields.<\/p>\n
Below is my CSS code for the submit button on standard and hover states.<\/p>\n
\n#buttons #submitbtn {\n    display: block;\n    float: left;\n    height: 3em;\n    padding: 0 1em;\n    border: 1px solid;\n    outline: 0;\n    font-weight: bold;\n    font-size: 1.3em;\n    color: #fff;\n    text-shadow: 0px 1px 0px #222;\n    white-space: nowrap;\n    word-wrap: normal;\n    vertical-align: middle;\n    cursor: pointer;\n\n    -moz-border-radius: 2px;\n    -webkit-border-radius: 2px;\n    border-radius: 2px;\n\n    border-color: #5e890a #5e890a #000;\n\n    -moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);\n    -ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);\n    -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);\n    box-shadow: inset 0 1px 0 rgba(256,256,256, .35);\n\n    background-color: rgb(226,238,175);\n    background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);\n    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38)));\n    background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);\n    background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);\n    background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);\n    background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);\n    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\"#e2eeaf\", endColorstr=\"#90b026\",GradientType=0 );\n}\n\n#buttons #submitbtn:hover, #buttons #submitbtn:active {\n    border-color: #7c9826 #7c9826 #000;\n    color: #fff;\n\n    -moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);\n    -ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);\n    -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);\n    box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);\n\n    background: rgb(228,237,189);\n    background: -moz-linear-gradient(top, rgb(228,237,189) 2%, rgb(207,219,120) 3%, rgb(149,175,54) 100%);\n    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(228,237,189)), color-stop(3%,rgb(207,219,120)), color-stop(100%,rgb(149,175,54)));\n    background: -webkit-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%);\n    background: -o-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%);\n    background: -ms-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%);\n    background: linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%);\n    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\"#e4edbd\", endColorstr=\"#95af36\",GradientType=0 );\n}\n<\/pre>\n
It\u2019s almost impossible to keep this type of selector clean! There are simply too many properties you need to list out and support for many older, legacy browsers. Internet Explorer can even render these gradients with the proper filter. Notice, aside from the background gradients, I\u2019ve also included a new border color, rounded corners, and a box shadow on hover.<\/p>\n
The reset button looks similar, but I\u2019ve gone an entirely different route with the color scheme. Light gray tends to fall into the background in comparison to the bright green colors. Our reset button likely won\u2019t be used very much, so it doesn\u2019t need all the attention.<\/p>\n
\n#buttons #resetbtn {\n    display: block;\n    float: left;\n    color: #515151;\n    text-shadow: -1px 1px 0px #fff;\n    margin-right: 20px;\n    height: 3em;\n    padding: 0 1em;\n    outline: 0;\n    font-weight: bold;\n    font-size: 1.3em;\n    white-space: nowrap;\n    word-wrap: normal;\n    vertical-align: middle;\n    cursor: pointer;\n\n    -moz-border-radius: 2px;\n    -webkit-border-radius: 2px;\n    border-radius: 2px;\n\n    background-color: #fff;\n    background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(240,240,240) 2%, rgb(222,222,222) 100%);\n    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-stop(100%,rgb(222,222,222)));\n    background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);\n    background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);\n    background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);\n    background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);\n    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\"#ffffff\", endColorstr=\"#dedede\",GradientType=0 );\n\n    border: 1px solid #969696;\n\n    box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);\n    -moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);\n    -webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);\n\n    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);\n}\n\n#buttons #resetbtn:hover {\n    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);\n    color: #818181;\n\n    background-color: #fff;\n    background-image: -moz-linear-gradient(top, rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);\n    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));\n    background-image: -webkit-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);\n    background-image: -o-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);\n    background-image: -ms-linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);\n    background-image: linear-gradient(top, rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);\n    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\"#ffffff\", endColorstr=\"#e5e5e5\",GradientType=0 );\n\n    border-color: #aeaeae;\n\n    box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);\n}\n<\/pre>\n
You could even drop the reset type and use this white\/gray color scheme as your main submit button. I\u2019ve used many of the same gradient styles and drop shadow effects, along with a text shadow for the inner label. It definitely provides a different feeling to the user experience.<\/p>\n
Responsive Layout Changes<\/h2>\n
Moving into my other CSS file, we can take a look at the simple responsive media queries I\u2019ve set up. Any browser window above 800px will experience the full sidebar interface. As you get below this threshold, the left column expands to 100% width and you see the sidebar elements drop down below.<\/p>\n
\n@media screen and (max-width: 800px) {\n    body {\n        padding: 10px 15px;\n    }\n    #container {\n        width: 100%;\n    }\n    #hongkiat-form #aligned {\n        width: 100%;\n        float: none;\n        display: block;\n    }\n    #hongkiat-form #aside {\n        width: 100%;\n        display: block;\n        float: none;\n    }\n    #hongkiat-form .txtinput, \n    #hongkiat-form textarea {\n        width: 85%;\n    }\n    #prioritycase {\n        float: left;\n        display: block;\n    }\n    #recipientcase {\n        float: left;\n        display: block;\n        margin-right: 55px;\n    }\n}\n<\/pre>\n
As we get closer down in size, I try to adapt each of the input forms. The width property can end up longer than the webpage itself, and then we have input forms sticking out over the edge. This happens around 550px, which is where I break the next query, along with both iPhone screen display resolutions for portrait and landscape.<\/p>\n
\n\/* smaller screen dropoff *******\/\n@media only screen and (max-width: 550px) {\n    #hongkiat-form .txtinput, \n    #hongkiat-form textarea {\n        width: 80%;\n    }\n}\n\n\/* iPhone Landscape ********\/\n@media only screen and (max-width: 480px) {\n    body {\n        padding: 10px 0px;\n    }\n    select.selmenu {\n        width: 190px;\n    }\n}\n\n\/* iPhone portrait *******\/\n@media only screen and (max-width: 320px) {\n    body {\n        padding: 10px 0px;\n    }\n    #hongkiat-form .txtinput, \n    #hongkiat-form textarea {\n        width: 70%;\n    }\n    #hongkiat-form #aligned {\n        overflow: hidden;\n    }\n    select.selmenu {\n        width: 160px;\n    }\n    #recipientcase {\n        margin-right: 30px;\n    }\n}\n<\/pre>\n
Horizontal landscape mode still holds everything together very well. I\u2019ve only made the dropdown select menu a bit thinner to make room for the radio buttons. In the portrait view, I\u2019ve resized all the elements to much smaller widths. Now our code won\u2019t break even in resized browser windows. But it\u2019s nice to have support for iOS\/Android smartphones as well.<\/p>\n
\n  Demo<\/a>\n  Download Source Code<\/a>\n<\/div>\n
Conclusion<\/h2>\n
I hope this tutorial has been informative in explaining just how much can be done on your web forms. The new CSS3 properties are powerful enough to build fully functioning animations with just a few lines of code. It\u2019s truly an exciting time to be working in web development and following these trends.<\/p>\n
If you have ideas or suggestions on the tutorial code, feel free to share them with us via the comment box below.<\/p>","protected":false},"excerpt":{"rendered":"
Coding with CSS3 has dramatically changed the landscape within frontend web development. There are more opportunities to build unique interfaces with gradients, drop shadows, and rounded corners. All of these effects are slowly becoming adopted in every major web browser. In this tutorial, I want to showcase many of these cool CSS3 effects. I\u2019ve built…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3392,352],"tags":[507,506,2065,2066],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCreating Stylish Responsive Form With CSS3 and HTML5 - Hongkiat<\/title>\n<meta name=\"description\" content=\"Coding with CSS3 has dramatically changed the landscape within frontend web development. There are more opportunities to build unique interfaces with\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Stylish Responsive Form With CSS3 and HTML5\" \/>\n<meta property=\"og:description\" content=\"Coding with CSS3 has dramatically changed the landscape within frontend web development. There are more opportunities to build unique interfaces with\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-25T15:01:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:02:28+00:00\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-responsive-form-with-css3-html5\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-responsive-form-with-css3-html5\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Creating Stylish Responsive Form With CSS3 and HTML5\",\"datePublished\":\"2012-07-25T15:01:53+00:00\",\"dateModified\":\"2025-04-24T09:02:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-responsive-form-with-css3-html5\\\/\"},\"wordCount\":1181,\"commentCount\":41,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\",\"HTML\",\"responsive\",\"Responsive Web Design\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-responsive-form-with-css3-html5\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-responsive-form-with-css3-html5\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-responsive-form-with-css3-html5\\\/\",\"name\":\"Creating Stylish Responsive Form With CSS3 and HTML5 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2012-07-25T15:01:53+00:00\",\"dateModified\":\"2025-04-24T09:02:28+00:00\",\"description\":\"Coding with CSS3 has dramatically changed the landscape within frontend web development. There are more opportunities to build unique interfaces with\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-responsive-form-with-css3-html5\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-responsive-form-with-css3-html5\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-responsive-form-with-css3-html5\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Stylish Responsive Form With CSS3 and HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Stylish Responsive Form With CSS3 and HTML5 - Hongkiat","description":"Coding with CSS3 has dramatically changed the landscape within frontend web development. There are more opportunities to build unique interfaces with","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:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/","og_locale":"en_US","og_type":"article","og_title":"Creating Stylish Responsive Form With CSS3 and HTML5","og_description":"Coding with CSS3 has dramatically changed the landscape within frontend web development. There are more opportunities to build unique interfaces with","og_url":"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-07-25T15:01:53+00:00","article_modified_time":"2025-04-24T09:02:28+00:00","author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Creating Stylish Responsive Form With CSS3 and HTML5","datePublished":"2012-07-25T15:01:53+00:00","dateModified":"2025-04-24T09:02:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/"},"wordCount":1181,"commentCount":41,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS","HTML","responsive","Responsive Web Design"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/","url":"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/","name":"Creating Stylish Responsive Form With CSS3 and HTML5 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2012-07-25T15:01:53+00:00","dateModified":"2025-04-24T09:02:28+00:00","description":"Coding with CSS3 has dramatically changed the landscape within frontend web development. There are more opportunities to build unique interfaces with","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Stylish Responsive Form With CSS3 and HTML5"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3JE","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14362"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14362\/revisions"}],"predecessor-version":[{"id":74087,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14362\/revisions\/74087"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14362"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}