Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
<!doctype html> <title>Example</title> <style> * { box-sizing: border-box; } .myForm { display: grid; grid-template-areas: "comments contact" "... button"; grid-template-rows: 12em 2em; grid-template-columns: 12em 1fr; grid-gap: .8em; background: #eee; padding: 1.2em; } .myForm label { grid-area: labels; } .myForm input { grid-area: contact; width: 100%; padding: 1.1em; border: none; margin-bottom: 1em; } .myForm textarea { min-height: calc(100% - 2em); width: 100%; border: none; } #contact-details { grid-area: contact; } #comment-box { grid-area: comments; } .myForm button { grid-area: button; border: 0; background: gray; color: white; } </style> <form class="myForm"> <div id="contact-details"> <label>Name <input type="text" name="customer_name" id="customer_name" required> </label> <label>Email <input type="email" name="email_address" id="email_address"> </label> <label>Phone <input type="tel" name="phone" id="phone"> </label> </div> <div id="comment-box"> <label>Comments <textarea name="comments" id="comments" maxlength="500"></textarea> </label> </div> <button>Submit</button> </form>