<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>almuth.web.id &#187; form tableless</title>
	<atom:link href="http://www.almuth.web.id/label/form-tableless/feed" rel="self" type="application/rss+xml" />
	<link>http://www.almuth.web.id</link>
	<description>sekedar tempat berbagi</description>
	<lastBuildDate>Tue, 24 Aug 2010 13:48:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Membuat form tanpa table munggunakan CSS</title>
		<link>http://www.almuth.web.id/2008/07/11/membuat-form-tanpa-table-munggunakan-css.html</link>
		<comments>http://www.almuth.web.id/2008/07/11/membuat-form-tanpa-table-munggunakan-css.html#comments</comments>
		<pubDate>Fri, 11 Jul 2008 15:28:54 +0000</pubDate>
		<dc:creator>almuth</dc:creator>
				<category><![CDATA[HTML dan CSS]]></category>
		<category><![CDATA[form css]]></category>
		<category><![CDATA[form tableless]]></category>

		<guid isPermaLink="false">http://www.almuth.web.id/2008/07/11/membuat-form-tanpa-table-munggunakan-css.html</guid>
		<description><![CDATA[Sekarang ini trend desain web adalah tanpa table alias tableless. Mengapa tableless? katanya sih load-nya jadi lebih ringan dibanding dengan table (saya sendiri belum ngebuktiin seberapa besarkah perbedaannya). Selain itu mendesain sebuah web tanpa table jauh lebih fleksibel karena kita bisa memindahkan kolom dari kanan ke kiri atau sebaliknya dengan hanya mengubah CSS-nya tanpa mengubah [...]]]></description>
			<content:encoded><![CDATA[<p>Sekarang ini trend desain web adalah tanpa table alias tableless. Mengapa tableless? katanya sih load-nya jadi lebih ringan dibanding dengan table (saya sendiri belum ngebuktiin seberapa besarkah perbedaannya). Selain itu mendesain sebuah web tanpa table jauh lebih fleksibel karena kita bisa memindahkan kolom dari kanan ke kiri atau sebaliknya dengan hanya mengubah CSS-nya tanpa mengubah code HTML-nya. </p>
<p>Salah satu komponen dalam sebuah halaman web adalah form isian. Nah bagaimana membuat form isian tanpa table. Berikut adalah contoh bagaimana membuat form isian tanpa table menggunakan CSS.</p>
<p><strong>Kode CSS</strong></p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">&lt;style type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span><span style="color: #00AA00;">&gt;</span>
body<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #3333ff;">:Arial</span><span style="color: #00AA00;">,</span> Helvetica<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">12px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
label<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">150px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span><span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
input<span style="color: #00AA00;">,</span> textarea<span style="color: #00AA00;">,</span> select<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#b9c7b0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
input<span style="color: #00AA00;">,</span> textarea<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">330px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
textarea<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">100px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
small<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">150px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.checkbox</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">2em</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.button</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">150px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin-top</span><span style="color: #00AA00;">:</span><span style="color: #933;">15px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">120px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span><span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#2B5401</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">14px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&nbsp;
br <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">clear</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&lt;/style<span style="color: #00AA00;">&gt;</span></pre></div></div>

<p><strong>Kode HTML</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;h2&gt;Contoh Form tanpa table menggunakan CSS&lt;/h2&gt;
&lt;form action=&quot;&quot; method=&quot;post&quot;&gt;
&lt;label for=&quot;name&quot;&gt;Nama&lt;/label&gt; &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; /&gt;&lt;small&gt;Wajib diisin&lt;/small&gt;&lt;br /&gt;
&nbsp;
&lt;label for=&quot;email&quot;&gt;Email&lt;/label&gt; &lt;input type=&quot;text&quot; name=&quot;email&quot; id=&quot;email&quot; /&gt;&lt;small&gt;Wajib diisin&lt;/small&gt;&lt;br /&gt;
&nbsp;
&lt;label for=&quot;comment&quot;&gt;Komentar&lt;/label&gt; &lt;textarea name=&quot;comment&quot; id=&quot;comment&quot; rows=&quot;5&quot; cols=&quot;100&quot;&gt;&lt;/textarea&gt;&lt;small&gt;Wajib diisin&lt;/small&gt;&lt;br /&gt;
&nbsp;
&lt;label for=&quot;aggree&quot;&gt;Setuju dengan Terms&lt;/label&gt; &lt;input type=&quot;checkbox&quot; name=&quot;aggree&quot; id=&quot;aggree&quot; class=&quot;checkbox&quot; /&gt;&lt;br /&gt;
&nbsp;
&lt;input type=&quot;submit&quot; name=&quot;task&quot; value=&quot;Submit&quot; class=&quot;button&quot; /&gt;
&lt;/form&gt;</pre></div></div>

<p>Dan hasilnya dapat dilihat <a href="http://dev.almuth.web.id/example/form-tanpa-table.html" target="_blank">disini</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.almuth.web.id/2008/07/11/membuat-form-tanpa-table-munggunakan-css.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
