Cascading style sheet pada elemen form dengan css

 on Rabu, 25 Mei 2016  

Tampilan sebuah form akan lebih terlihat menarik apabila diterapkan CSS di dalamnya. Style CSS dapat digunakan di berbagai komponen input di dalam form. Dengan menggunakan style CSS akan mengurangi beban halaman dan konsumsi bandwidth.

Cascading style sheet pada elemen form
Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya memberikan style CSS. Dibawah ini adalah style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna background \ dari form. Sebenarnya masih banyak style lain yang bisa diberikan ke form

Form
{ border:1px solid #666666;
width : 480; /*lebar form*/
margin-left:0; /*jarak dari batas kiri layout*/
background-color:#ffff66;}


Bila style form diatas di embedkan ke dalam file html akan listing kodenya
seperti berikut ini :

<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>



form dengan CSS
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut
Cascading style sheet pada elemen form dengan css 4.5 5 b Rabu, 25 Mei 2016 Tampilan sebuah form akan lebih terlihat menarik apabila diterapkan CSS di dalamnya. Style CSS dapat digunakan di berbagai komponen input di...


Tidak ada komentar:

Posting Komentar

Diberdayakan oleh Blogger.