Tutorial CSS : menyajikan CSS dalam form

Posted by on
Assalamualaikum Semua

      Hallo semua selamat datang kembali. Saya Muhammad Aslam atau panggil saja Mas Lam akan berbagi pengetahuan tentang cara menyajikan CSS dalam form

       css dalam form cara nya sama dengan yang lain perlu id atau class ataupun tidak juga tidak masalah berikut beberapa contoh nya:

contoh 1:
codingan html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="1cssOnForm.css" type="text/css">
    </head>
    <body>
        <form name="from1" method="post" action="">
        <table>
            <tr>
                <td width="50">Nama</td>
                <td width="175"><textarea name="textarea" cols="50" ></textarea></td>
            </tr>
            <tr>
                <td width="50">Pesan</td>
                <td width="175"><textarea name="textarea" cols="50" rows="14"></textarea></td>
            </tr>

        </table>
        </form>
    </body>
</html>
codingan cssnya
form{
    border: 2px solid yellow;
    width: 70%;
    margin-left: 0;
    background-color: green;
    color: pink;
    font-family: 'Arial Narrow';
}
body{
    background-color: salmon;
}

hasilnya



contoh 2

codingan html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="2cssOnFrom2.css" type="text/css">
    </head>
    <body>
        <form name="from1" method="POST" action="">
            <table bordercolor="1">
                <tr>
                    <td width="50">Nama</td>
                    <td width="175"><textarea name="textarea" cols="50"></textarea></td>
                </tr>
                <tr>
                    <td width="50">Pesan</td>
                    <td width="175"> <textarea name="textarea" cols="50" rows="14"></textarea></td>
                </tr>
            </table>
        </form>
    </body>
</html>
codingan css
textarea{
    color: yellow;
    background-color: blue;
    font-family: Arial;
}
body{
    background-color: pink;
    color: red;
    font-family: Impact;
}

hasilnya

contoh 3
codingan html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="3cssOnForm.css" type="text/css">
    </head>
    <body>
        <form name="form1" method="POST" action="">
            <table>
                <tr>
                   <td width="58">Nama</td>
                   <td width="230">: <input type="text" name="nama"></td>
                </tr>
                <tr>
                    <td width="58">Alamat</td>
                    <td width="230">: <input type="text" name="Alamat" id=""></td>
                </tr>
            </table>
        </form>
    </body>
</html>
codingan css
input{
    color: red;
    background: yellow;
    border-color: green;
    border-bottom-color: black;
    border-top: 0px solid;
    border-bottom: 2px dotted;
    border-left: 0px solid;
    border-right: 0px solid;
    font-family: consolas;
    font-size: 11px;
}

hasilnya



disini juga css dapat digunakan untuk input type contohnya:

contoh 1
codingan html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R;
        </title>
        <link rel="stylesheet" href="4cssOnButton.css" type="text/css">
    </head>
    <body>
        <form name="form1" method="POST" action="">
            <table>
                <tr>
                    <td width="58">Nama</td>
                    <td width="230">: <input type="text" name="nama"></td>
                </tr>
                <tr>
                    <td width="58">Alamat</td>
                    <td width="230">: <input type="text" name="alamat"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" class="button" name="submit" value="simpan"> <input type="submit" class="button" name="submit2" value="submit"></td>
                </tr>
            </table>
        </form>
    </body>
</html>
codingan css
input.button{
    color: salmon;
    background: lightblue;
    border-color: white;
    border-bottom-color: black;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
    border-left: 1px dotted;
    border-right: 1px dotted;
    font-family: verdana;
    font-size: 12px;
}
body{
    background:  lightcoral;
}

hasilnya


contoh 2
codingan html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="5cssOnButtonHover.css" type="text/css">
    </head>
    <body>
        <form name="form1" method="POST" action="">
            <table>
                <tr>
                    <td width="58">Nama</td>
                    <td width="230">: <input type="text" name="nama"></td>
                </tr>
                <tr>
                    <td width="58">Alamat</td>
                    <td width="230">: <input type="text" name="alamat"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" class="button" name="submit" value="simpan"> <input type="submit" class="button" name="submit2" value="submit"><a href="4extCSSonButton.html" class="linknya">Kembali</a></td>
                </tr>
            </table>
        </form>
    </body>
</html>
codingan css
input.button{
    color: coral;
    background: indianred;
    border: 2px outset khaki;
    font-family: Calibri, Times, serif;
    font-size: 14px;
    font-weight: bold;
    width: auto;
}
input.button:hover{
    color: coral;
    background: lightsteelblue;
    border: 3px outset yellow;
    font-family: cambria, Times, serif;
    font-size: 14px;
    font-weight: bold;
}
body{
    background-color: pink;
}
a.linknya{
    background-image: url(donut.png);
    text-decoration: none;
    font-family: Impact;
}
a.linknya:hover{
    background-image: url(donut.png);
    color: coral;
    text-decoration: none;
    font-family: 'Arial Black';
}

hasilnya


codingan 3
codingan html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="6cssOnRadioButton.css" type="text/css">
    </head>
    <body>
        <form name="form1" method="POST" action="" class="f1">
            <table bordercolor="1">
                <tr width="120">
                    <td width="58">Kelamin</td>
                    <td width="150">: <input type="radio" name="radiobutton" value="radiobutton" class="rb1">Pria/Male</td>
                </tr>
                <tr>
                    <td width="58">&nbsp;</td>
                    <td width="150" class="k1">: <input type="radio" name="radiobutton" value="radiobutton" class="rb2">Wanita/Famale</td>
                </tr>
            </table>
        </form>
    </body>
</html>
codingan css
input.rb1{
    color: black;
    background: dodgerblue;
    border-color: lime;
    font-family: verdana;
    font-size: 12px;

}
input.rb2{
    color: red;
    background: coral;
    border-color: yellow;
    font-family: verdana;
    font-size: 12px;
}
td{
    color: midnightblue;
    background: bisque;
    border-color: yellow;
    font-family: verdana;
    font-size: 12px;
}
form.f1{
    background:  sienna;
}

hasilnya



Tugas 1
codingan html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="7Tugas1.css" type="text/css">
    </head>
    <body>
        <form action="">
            <fieldset>
                <legend>Formulir Pendaftaran Calon Peserta</legend>
                <table align="center">
                    <tr height="75">
                        <td id="warna" width="200">Nama</td>
                        <td width="200"><input id="text" type="text" name="nama"></td>
                        <td></td>
                    </tr>
                    <tr height="75">
                        <td id="warna" width="200">No. Induk Penduduk</td>
                        <td width="200"><input id="text"  type="text" name="NoindukP"></td>
                        <td></td>
                    </tr>
                    <tr height="75">
                        <td id="warna" width="200">Kelamin</td>
                        <td width="200"><input id="rdpria" type="radio" name="kelamin">Pria</td>
                        <td width="200"><input id="rdwanita" type="radio" name="kelamin">Wanita</td>
                    </tr>
                    <tr height="75">
                        <td id="warna" width="200">TTL</td>
                        <td width="200"><input id="text"  type="text" name="TTL"></td>
                        <td></td>
                    </tr>
                    <tr height="75">
                        <td id="warna" width="200">Agama</td>
                        <td width="200"><select>
                            <option>Islam</option>
                            <option>Katolik</option>
                            <option>Protestan</option>
                            <option>Hindu</option>
                            <option>Budha</option>
                        </select></td>
                        <td></td>
                    </tr>
                    <tr height="75">
                        <td id="warna" width="200">Status</td>
                        <td width="200"><select>
                            <option>Kawin</option>
                            <option>Tidak Kawin</option>
                        </select></td>
                        <td></td>
                    </tr>
                    <tr hight="75">
                        <td width="200">
                            <input type="submit" class="button" name="submit" value="browse">
                            <input type="submit" class="button" name="submit2" value="simpan">
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </body>
</html>
codingan css
fieldset{
    border: dotted;
    border-color: chocolate;
    background-color: gold;
}
legend{
    font-family: 'Lucida Sans';
    background-color: aqua;
}
input#text{
    border-color: green;
}
td#warna{
    color:blueviolet;
}
input.button{
    color: coral;
    background: chocolate;
    border: 2px outset khaki;
    font-family: Calibri, Times, serif;
    font-size: 14px;
    font-weight: bold;
    width: auto;
}
input.button:hover{
    color: coral;
    background: lightsteelblue;
    border: 3px outset yellow;
    font-family: cambria, Times, serif;
    font-size: 14px;
    font-weight: bold;
}

hasilnya


Tugas 2
codingan html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="8Tugas2.css" type="text/css">
    </head>
    <body>
        <form>
        <fieldset>
            <legend>form pendaftaran</legend>
            <table>
                <tr id="img">
                    <td rowspan="9" id="gambar"><img id="img" src="C:\Users\lenovo\Desktop\Belajar Web\NI gambar\osu.jpg" alt=""></td>
                    <td colspan="2">Osu Local cup akan di selenggarakan secara online dan offline pada tanggal 20-11-2193 ikuti dan menangkan total hadiah 20jt rupiah. beberapa yang harus diketahui</td>
                </tr>
                <tr>
                    <td colspan="2">1. babak 1 akan diselenggarakan tanggal 20-11-2193 secara online</td>
                </tr>
                <tr>
                    <td colspan="2">2. babak 2 akan diselenggarakan tanggal 25-11-2193 secara online</td>
                </tr>
                <tr>
                    <td colspan="2">3. babak 3 akan diselenggarakan tanggal 30-11-2193 secara offline tempat akan diumumkan nanti</td>
                </tr>
                <tr>
                    <td colspan="2">4. babak final akan diselenggarakan tanggal 20-11-2193 secara offline tempat akan di umumkan nanti</td>
                </tr>
                <tr>
                 
                    <td>Pendaftaran</td>
                </tr>
                <tr height="75">
                 
                    <td id="warna" width="200">Nick Name</td>
                    <td><input id="text" type="text" name="nama"></td>
                </tr>
                <tr height="75">
                 
                    <td id="warna" width="200">no telepon</td>
                    <td><input id="text"  type="text" name="NoindukP"></td>
                </tr> 
                <tr hight="75">
                    <td width="200">
                        <input type="submit" class="button" name="submit" value="simpan">
                    </td>
                </tr>
            </table>
        </fieldset>
    </form>
    </body>
</html>
codingan css
img#img{
    width: 200px;
}
fieldset{
    background-color: pink;
    border: solid;
    border-color: gray;
}
td{
    width: auto;
    font-size: 17px;
    text-transform: capitalize;
    color: chocolate;

}
td#gambar{
    width: 300px;
}
td#warna{
    color: palevioletred;
}
legend{
    font-size: 25px;
    text-transform: capitalize;
    color: black;
 
}
input.button{
    color: black;
    background: palevioletred;
    border: 2px outset black;
    font-family: Calibri, Times, serif;
    font-size: 14px;
    font-weight: bold;
    width: auto;
}
input.button:hover{
    color: black;
    background: pink;
    border: 3px outset black;
    font-family: cambria, Times, serif;
    font-size: 14px;
    font-weight: bold;
}
body{
    background: lightpink;
}

hasilnya

Comments

Post a Comment