Minggu, 05 Februari 2012

Varian Form Action, Drop Down, Select Navigation

Keindahan dalam bermain bahasa HTML tergantung kita bisa memadukan satu atribut dengan yang lainnya. Karena segala variabel sudah berada pada web directory khusus. Berlatih dengan tekun kunci utama dalam melatih skill & kemampuan untuk mendapatkan seni indah dalam bermain bahasa HTML :) Kenapa Koben bilang begitu, karena dalam sesi postingan kita dituntut untuk dapat bisa menghasilkan gaya penulisan yang membuat pemabaca terheran-heran :D Contoh bermain dengan bahasa HTML untuk memperindah gaya tulisan kita dapat kalian lihat Fun Fun Deh ;)
Teknik penulisan artikel postingan berperan penting guna membangun kabisa kalian agar terbiasa, hapal, mengerti seluk beluk bersenang-senang dalam berblogging :P Teknik penulisan dalam menulis artikel dengan metode technique writed posted use CSS.

Bagaimana membuat tabel agar cuamik terlihat! Pada kesempatan ini Beben Koben si bloglang anu ganteng kalem tea akan sedikit berbagi teknik menulis sekitaran form action, drop down di area postingan. Cek gi dot

Drop DownForm Action
First name:
Basic default kode seperti ngono :P How about this!!!
<form action="../">
<select name="dest" onchange="window.open(this.options[this.selectedIndex].value,'UNIQUE-ID')">
<option>Choose a destination for your IFrame!</option>
<option value="http://www.google.com/">GOOGLE</option>
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.amazon.com/">AMAZON</option>
<option value="http://beben-koben.blogspot.com/">Beben Koben</option>
</select>
</form>
<iframe src="http://www.w3schools.com/" name="UNIQUE-ID" width="400" height="200">
Your browser does not support iframes. Please updates!!!
</iframe>
Hehehe ;)) Form action drop down berikut akan menampilkan new open windows.
<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')">
<option value="">Choose a great site...</option>
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.google.com/">GOOGLE</option>
<option value="http://www.altavista.com/">ALTAVISTA</option>
<option value="http://www.amazon.com/">AMAZON</option>
<option value="http://ben-tools.blogspot.com/">BEN TOOLS</option>
</select>
</form>
Berikutnya dengan teknik choose radio buttons !
Ayo kalian mau kemana:




<form action="../">
<b>Ayo kalian mau kemana: </b><br>
<input type="radio" value="http://www.google.com/" name="userChoice" id="site01"/>
<label for="site01">GOOGLE</label><br>
<input type="radio" value="http://www.yahoo.com/" name="userChoice" id="site02"/>
<label for="site02">YAHOO!</label><br>
<input type="radio" value="http://www.bing.com/" name="userChoice" id="site03"/>
<label for="site03">BING</label><br>
<input type="radio" value="http://www.amazon.com/" name="userChoice" id="site04"/>
<label for="site04">AMAZON</label><br>
<input type="radio" value="http://undercover-blogger.blogspot.com/" name="userChoice" id="site05"/>
<label for="site05">UNDERCOVER BLOG</label><br>
<input type="button" value="Go there!" onclick="ob=this.form.userChoice;for(i=0;i<ob.length;i++){if(ob[i].checked){window.open(ob[i].value,'_blank');};}"/>
</form>
Menggunakan sedikit sentuhan JavaScript guna membuka open new windows!
<form action="../">
<select name="SiteTujuan">
<option value="http://www.google.com/">GOOGLE</option>
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.embah-google.blogspot.com/">EMBAH GOOGLE</option>
<option value="http://www.amazon.com/">AMAZON</option>
</select>
<input type="button" value="Open It!" onclick="ob=this.form.SiteTujuan;window.open(ob.options[ob.selectedIndex].value)"/>
</form>
Segitu aja ah capek mulisnya juga :D Sok datang ke sumbernya bila ingin melihat varian lain. Menurut saya cuma segitu intinya, wong sama saja efek varian liannya juga :D
Sumber:
Happy coding \m/

Tidak ada komentar:

Posting Komentar