IZATUL WASIKOH
Cascading Style Sheet
untuk Memformat Tampilan Form
1) Cascading style sheet pada elemen
form
Form { border:1px solid #666666; width
: 480; /*lebar form*/ margin-left:0; /*jarak dari batas kiri layout*/
background-color:#ffff66;}
<HTML>
<HEAD>
<TITLE>Pengaturan Pada Form Text
Area</TITLE>
<STYLE ="text/css">
form{ border:1px solid #666666; width : 70%; margin-left:0; /*jarak fieldset
dari batas kiri layout*/ background-color:#ffff66;} </STYLE>
</HEAD>
<BODY>
<form name="form1"
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>
2) Cascading style sheet pada input text
<HTML>
<HEAD>
<TITLE>Pengaturan Pada Form Text
Area</TITLE>
<STYLE ="text/css">
TEXTAREA { COLOR : white ;background-color : #FF9933 ; } </STYLE>
</HEAD>
<BODY>
<form name="form1"
method="post" action="">
<TABLE bordercolor="1">
<TR> <TD width="50" >Nama </TD> <TD
width="175" >
Pemrograman Web
Page | 107
<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>
3) Cascading style sheet pada text
field
<HTML>
<HEAD>
<TITLE>Pengaturan pada
Form</TITLE>
<STYLE ="text/css">
input {color:#000000; background:white; border-color:white; border-bottom-color:black;
border-top:0px solid; border-bottom:2px dotted; border-left: 0px solid;
border-right:0px solid; font-family:tahoma,Arial; font-size:11px;}
</STYLE>
</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>
</TABLE>
</form>
</BODY>
</HTML>
4) Cascading style sheet pada button
<html>
<head>
<title>pengaturan pada form
tombol</title>
<style ="text/css">
input.button { color:#000000; 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;
Ketika mouse diarahkan ke textfield
Pemrograman Web
Page | 110
font-size:12px; } </style>
</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 class="button"
type="submit" name="submit" value="simpan">
<input class="button"
type="submit" name="submit2"
value="submit">
</td>
</tr>
</table>
</form>
</body>
</html>
<HTML>
<HEAD>
<TITLE>Pengaturan Pada Form Tombol
</TITLE>
<STYLE ="text/css">
input.button { color: #fff; background: #ffa20f; border: 2px outset #BBD16D;
font-family: "calibri", Times, serif; font-size: 14px; font-weight:
bold; width : auto; } input.button:hover { color: #fff; background: #0c62a4;
/*biru kayak judul header*/ border: 2px outset #ffa20f; font-family:
"calibri", Times, serif; font-size: 14px; font-weight: bold;}
</STYLE>
</HEAD>
<BODY>
Pemrograman Web
Page | 112
<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 class="button"
type="submit" name="Submit" value="Simpan">
<input class="button"
type="submit" name="Submit2"
value="Submit">
</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>
5) Cascading style sheet padaradio
button
<HTML>
<HEAD>
<TITLE>Pengaturan pada
Form</TITLE>
<STYLE ="text/css">
INPUT.rb1{ background: blue ; border-color:white; font-family:verdana;
font-size:12px; } INPUT.rb2{ background: green ; border-color:white; font-family:verdana;
font-size:12px;}
</STYLE>
</HEAD>
<BODY> <form name="form1"
method="post" action=""> <TABLE
bordercolor="1">
<TR>
<TD width="58"
>Kelamin</TD>
<TD width="230" >:
<input type="radio" name="radiobutton"
value="radiobutton" class="rb1"> Pria
/Male</TD>
</TR>
<TR>
<TD
width="58"> </TD>
<TD width="230"
> <input type="radio" name="radiobutton"
value="radiobutton" class="rb2">
Wanita/Famale
</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>
Untuk menerapkan style input.rd1 dan input.rd2 maka pada tag <input
type="radio" > perlu memanggil style tersebut dengan cara
class=”rd1” dan class=”rd2” . Sehingga ketika listing kode diatas dijalankan
akan muncul tampilan radio button
6) Cascading style sheet pada chexbox
<html>
<head>
<title>pengaturan pada form checkbox</title>
<style
="text/css"> input.checkbox1{ background: blue ;border-color:
green; border-style : outset double; } input.checkbox2{ background: yellow
;border-color: red; border-style :double; }
input.checkbox3{ background: green ;border-color:black; border-style :dotted;
}
</style>
</head>
<body>
<form name="form1"
method="post" action="">
<table bordercolor="1">
<tr>
<td width="58"
>hoby</td>
<td width="230" ><input
type="checkbox" name="badminton"
class="checkbox1"> badminton</td>
</tr>
<tr>
<td
width="58"> </td>
<td width="230"
><input type="checkbox" name="tenismeja"
class="checkbox2"> tenis meja</td>
</tr>
<tr>
<td> </td>
<td >
<input type="checkbox"
name="sepakbola" class="checkbox3"> sepakbola
</td>
</tr>
<tr>
<td> </td>
<td ><input
type="checkbox" name="golf" class="checkbox3">
golf </td>
</tr>
</table>
</form>
</body>
</html>
Jumat, 15 April 2016
By Izatul Wasikoh | 04.32
No comments
Author: Izatul Wasikoh
Hello, I am Author, decode to know more: In commodo magna nisl, ac porta turpis blandit quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo magna nisl, ac porta turpis blandit quis. Lorem ipsum dolor sit amet.
E-mail Newsletter
Sign up now to receive breaking news and to hear what's new with us.
Recent Articles
animasi lucu
ogle animasi lucu
kursor
0 komentar: