Web programming tips and tricks : Responsive Form using div and css

Following code very useful for Responsive Website.This code used div based form (Table less) . It is used only small css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Example For Responsive Form (div based code)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
@charset "utf-8";
/* CSS Document */

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
padding: 20px 15%;
}
form header {
margin: 0 0 20px 0;
}
form header div {
font-size: 90%;
color: #999;
}
form header h2 {
margin: 0 0 5px 0;
}
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
    width: 25%;
float: left;
padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
    font-size: 90%;
}
fieldset {
    border: 0;
padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
    width: 100%;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
outline: 0;
border-color: #4697e4;
}

@media (max-width: 600px) {
form > div {
    margin: 0 0 15px 0;
}
form > div > label,
legend {
    width: 100%;
    float: none;
    margin: 0 0 5px 0;
}
form > div > div,
form > div > fieldset > div {
    width: 100%;
    float: none;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
    width: 100%;
}
}
@media (min-width: 1200px) {
form > div > label,
    legend {
    text-align: right;
}
}

</style>

</head>

<body bgcolor="#DBDBDB">

<form action="#">

<header>
    <h2>Example For Responsive Form</h2>

</header>

<div>
    <label class="desc" id="title1" for="Res1"> Name</label>
    <div>
      <input id="Res1" name="Res1" type="text" class="field text fn" value="" size="8" tabindex="1">
    </div>
</div>

<div>
    <label class="desc" id="title3" for="Res3">
      Email
    </label>
    <div>
      <input id="Res3" name="Res3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
   </div>
</div>

<div>
    <label class="desc" id="title4" for="Res4">
      Message
    </label>

    <div>
      <textarea id="Res4" name="Res4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
    </div>
</div>

<div>
    <fieldset>

      <legend id="title5" class="desc">
        Select a Gender
      </legend>

      <div>
          <input id="radioDefault_5" name="Res5" type="hidden" value="">
          <div>
              <input id="Res5_0" name="Res5" type="radio" value="Male" tabindex="5" checked="checked">
              <label class="choice" for="Res5_0">Male</label>
          </div>
        <div>
            <input id="Res5_1" name="Res5" type="radio" value="Female" tabindex="6">
            <label class="choice" for="Res5_1">Female</label>
        </div>
        <div>
            <input id="Res5_2" name="Res5" type="radio" value="Others(If not an Individual)" tabindex="7">
            <label class="choice" for="Res5_2">Others(If not an Individual)</label>
        </div>
      </div>
    </fieldset>
</div>

<div>
    <fieldset>
      <legend id="title6" class="desc">
        Select fruits
      </legend>
      <div>
      <div>
          <input id="Res6" name="Res6" type="checkbox" value="Apple" tabindex="8">
          <label class="choice" for="Res6">Apple</label>
      </div>
      <div>
          <input id="Res7" name="Res7" type="checkbox" value="Orange" tabindex="9">
          <label class="choice" for="Res7">Orange</label>
      </div>
      <div>
          <input id="Res8" name="Res8" type="checkbox" value="Banana" tabindex="10">
          <label class="choice" for="Res8">Banana</label>
      </span>
      </div>
    </fieldset>
</div>

<div>
    <label class="desc" id="title106" for="Res106">
        Select a Title
    </label>
    <div>
    <select id="Res106" name="Res106" class="field select medium" tabindex="11">
      <option value="Mr">Mr</option>
      <option value="Ms">Ms</option>
      <option value="Dr">Dr</option>
            <option value="Miss">Miss</option>
    </select>
    </div>
</div>

<div>
        <div>
        <input id="saveForm" name="saveForm" type="submit" value="Submit">
    </div>
    </div>

</form>
</body>
</html>

Web programming tips and tricks

Friday, January 31, 2014

Responsive Form using div and css

No comments:

Post a Comment