Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Form

    Hochgeladen von

    Ashwini Kutre
    18 Ansichten4 Seiten
    Sign-up form is the basic look of my form without table. All labels and input elements have float CSS property set to left; in this way index.php will get all informations about the page's design from the CSS filedefault.css page layout and CSS code Before you proceed, it's useful to have an idea about page's sections.

    Originalbeschreibung:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    DOCX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Sign-up form is the basic look of my form without table. All labels and input elements have float CSS property set to left; in this way index.php will get all informations about the page's design from the CSS filedefault.css page layout and CSS code Before you proceed, it's useful to have an idea about page's sections.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    18 Ansichten4 Seiten

    Form

    Hochgeladen von

    Ashwini Kutre
    Sign-up form is the basic look of my form without table. All labels and input elements have float CSS property set to left; in this way index.php will get all informations about the page's design from the CSS filedefault.css page layout and CSS code Before you proceed, it's useful to have an idea about page's sections.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 4

    Step 1: HTML Code Create a new page index.

    html and copy and past this code into the tag <body>:
    <div id="stylized" class="myform"> <form id="form" name="form" method="post" action="index.html"> <h1>Sign-up form</h1> <p>This is the basic look of my form without table</p> <label>Name <span class="small">Add your name</span> </label> <input type="text" name="name" id="name" /> <label>Email <span class="small">Add a valid address</span> </label> <input type="text" name="email" id="email" /> <label>Password <span class="small">Min. size 6 chars</span> </label> <input type="text" name="password" id="password" /> <button type="submit">Sign-up</button> <div class="spacer"></div> </form> </div>

    How you can see from the code above, the structure of our CSS form is the following:

    I used <label> for the name of each input element and <span> tag for the short description. All labels and input elements have float CSS property set to left;

    Step 2: CSS Code Copy and paste the following CSS code in the <head> tag of your page:
    body{ font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; } p, h1, form, button{border:0; margin:0; padding:0;} .spacer{clear:both; height:1px;} /* ----------- My Form ----------- */ .myform{ margin:0 auto; width:400px; padding:14px; } /* ----------- stylized ----------- */ #stylized{ border:solid 2px #b7ddf2; background:#ebf4fb; } #stylized h1 { font-size:14px; font-weight:bold; margin-bottom:8px; } #stylized p{ font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; } #stylized label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; } #stylized .small{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } #stylized input{ float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; margin:2px 0 20px 10px; } #stylized button{ clear:both; margin-left:150px; width:125px; height:31px; background:#666666 url(img/button.png) no-repeat; text-align:center; line-height:31px; color:#FFFFFF; font-size:11px; font-weight:bold; }

    <link href="css/default.css" rel="stylesheet" type="text/css" />

    In this way index.php will get all informations about the page's design from the CSS filedefault.css Page layout and CSS code Before you proceed, it's useful to have an idea about page's sections. I suggest to use this layout (2 column fixed size):

    Copy and paste this code into default.css file:

    /* -----------------------------PAGE STRUCTURE ------------------------------ */ /* #container has an absolute width (780 pixel) The width of inner elements is set to auto, in this way all inner elements have the same

    width of the element which contains them */ #container{width:780px; margin:0 auto;} #topbar{width:auto; display:block; height:80px;} #navbar{width:auto; display:block; height:24px;} #main{width:auto; display:block;} #column_left{width:560px; margin-right:20px; float:left;} #column_right{width:200px; float:left;} /* div.spacer, solve an issue with #container height in css 2 column layout. */ div.spacer{clear:both; height:10px; display:block;} #footer{width:auto; display:block; height:24px;}

    Das könnte Ihnen auch gefallen