Sedikit CSS pada form sederhana

Leave a comment

November 29, 2012 by evo3cx

Memberi warna pada tampilan html dengan css, kemarin setelah kita membuat form sederhana dengan html dan php kita menambahkan sedikit  css agar lebih bewarna codingnya seperti di bawah.

 

<html>

<head><title>form sederhana </title>

<?php

if(isset($_POST[“post”])){

                $nama=strip_tags($_POST[“nama”]);

                $kelas=strip_tags($_POST[“kelas”]);

                $npm=strip_tags($_POST[“npm”]);

                $kota=strip_tags($_POST[“kota”]);

                $kendaraan=strip_tags($_POST[“kendaraan”]);

}

?>

 

<style type=”text/css”>

               

                body{

                               

                                background: #999999;

                                margin: 0 auto;

                                color:#000000;

                }

                #wrapper{

                                width: 960px;

                                margin: 0 auto

                }

                td{

                                background: #efefef;

                                text-weight: bold;

                                margin: 10px;

                }

</style>

                               

 

</head>

<body>

<div id=”wrapper”>

                <form name=”form1″ id=”form1″ method=”post” action=””>

                                <table style=”margin:10px”>

                                                <tr>

                                                                <td> Nama </td>

                                                                <td> NPM </td>

                                                                <td> Kelas </td>

                                                                <td> Kota </td>

                                                                <td> Kendaraan</td>

                                                </tr>

                                                <tr>

                                                                <td> <input name=”nama” type=”text” width=”40px” id=”name” /></td>

                                                                <td> <input name=”npm” type=”text” id=”name” /></td>

                                                                <td> <input name=”kelas” type=”text” id=”name” /></td>

                                                                <td> <input name=”kota” type=”text” id=”kota” /></td>

                                                                <td> <select name=”kendaraan”>

                                                                                                <option   size=”60px” value=”mobil”>Mobil</option>

                                                                                                <option  size=”60px” value=”motor”>Motor</option>

                                                                                                <option  size=”60px” value=”kereta”>kereta</option>

                                                                                                <option  size=”60px” value=”bus”>Bus</option>

                                                                                </select>

                                                                </td>

                                                </tr>

                                                <tr>

                                                                <td  colspan=”4″><input type=”submit” name=”button” value=”SUBMIT”></td>

                                                                <td><input type=”hidden” name=”post” value=”form1″></td>

                                                </tr>

                                </table>

                </form>

</div>

<?php

if(!empty($nama)){

  echo “Nama anda :” .$nama.”<br/>”;

  echo “Npm Anda :” .$npm.”<br/>”;

  echo “Kelas anda:”.$kelas.”<br/>”;

  echo “Kota anda :”.$kota.”<br/>”;

  echo “Kendaraan yg anda gunakan :”.$kendaraan.”<br/>”;

  echo “<hr /><br />”;

  echo “<h2> Terima Kasih Anda Telah Mencoba Demo kami🙂 </h2>”;

 }

?>

</body>

</html>

 

 

Pada bagian inilah bagaimana kita mengatur warna ukuran dan batas pada halaman page,

<style type=”text/css”>

               

                body{

                               

                                background: #999999;

                                margin: 0 auto;

                                color:#000000;

                }

                #wrapper{

                                width: 960px;

                                margin: 0 auto

                }

                td{

                                background: #efefef;

                                text-weight: bold;

                                margin: 10px;

                }

</style>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Gunadarma Logo

Categories

About Me

Reza Aditya Saputra 3ka07

visitor stats


%d bloggers like this: