Scribd Logo
Upload

Welcome to Scribd!

  • Form

    Uploaded by

    Resa Zulfikar
    10 views5 pages
    The document shows code for creating a responsive form layout. Styling is applied to make the form elements responsive, taking up 100% width on small screens. Columns are used to display labels and form fields, which stack vertically on small screens using media queries. The form includes fields for name, country, and subject.

    Original Description:

    form

    Original Title

    form

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document shows code for creating a responsive form layout. Styling is applied to make the form elements responsive, taking up 100% width on small screens. Columns are used to display labels and form fields, which stack vertically on small screens using media queries. The form includes fields for name, country, and subject.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views5 pages

    Form

    Uploaded by

    Resa Zulfikar
    The document shows code for creating a responsive form layout. Styling is applied to make the form elements responsive, taking up 100% width on small screens. Columns are used to display labels and form fields, which stack vertically on small screens using media queries. The form includes fields for name, country, and subject.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    <!

    DOCTYPE html>

    <html>

    <head>

    <style>

    input[type=text] {

    width: 100%;

    box-sizing: border-box;

    border: 2px solid #ccc;

    border-radius: 4px;

    font-size: 16px;

    background-color: white;

    background-image: url('searchicon.png');

    background-position: 10px 10px;

    background-repeat: no-repeat;

    padding: 12px 20px 12px 40px;

    </style>

    </head>

    <body>

    <h2>Input field with an icon inside</h2>

    <form>

    <input type="text" name="search" placeholder="Search..">

    </form>

    </body>

    </html>
    <!DOCTYPE html>

    <html>

    <head>

    <style>

    *{

    box-sizing: border-box;

    input[type=text], select, textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid #ccc;

    border-radius: 4px;

    resize: vertical;

    label {

    padding: 12px 12px 12px 0;

    display: inline-block;

    input[type=submit] {

    background-color: #04AA6D;

    color: white;

    padding: 12px 20px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    float: right;

    }
    input[type=submit]:hover {

    background-color: #45a049;

    .container {

    border-radius: 5px;

    background-color: #f2f2f2;

    padding: 20px;

    .col-25 {

    float: left;

    width: 25%;

    margin-top: 6px;

    .col-75 {

    float: left;

    width: 75%;

    margin-top: 6px;

    /* Clear floats after the columns */

    .row:after {

    content: "";

    display: table;

    clear: both;

    /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top
    of each other instead of next to each other */
    @media screen and (max-width: 600px) {

    .col-25, .col-75, input[type=submit] {

    width: 100%;

    margin-top: 0;

    </style>

    </head>

    <body>

    <h2>Responsive Form</h2>

    <p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the
    two columns stack on top of each other instead of next to each other.</p>

    <div class="container">

    <form action="/action_page.php">

    <div class="row">

    <div class="col-25">

    <label for="fname">First Name</label>

    </div>

    <div class="col-75">

    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    </div>

    </div>

    <div class="row">

    <div class="col-25">

    <label for="lname">Last Name</label>

    </div>

    <div class="col-75">

    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    </div>
    </div>

    <div class="row">

    <div class="col-25">

    <label for="country">Country</label>

    </div>

    <div class="col-75">

    <select id="country" name="country">

    <option value="australia">Australia</option>

    <option value="canada">Canada</option>

    <option value="usa">USA</option>

    </select>

    </div>

    </div>

    <div class="row">

    <div class="col-25">

    <label for="subject">Subject</label>

    </div>

    <div class="col-75">

    <textarea id="subject" name="subject" placeholder="Write something.."


    style="height:200px"></textarea>

    </div>

    </div>

    <br>

    <div class="row">

    <input type="submit" value="Submit">

    </div>

    </form>

    </div>

    </body>

    </html>

    You might also like