Tutorial HTML Bab.15

Bab 15: Bentuk Lanjutan
Tersembunyi bidang
Namun jenis lain input HIDDEN input.
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Company Formulir Posisi 1">
Sebuah HIDDEN prediksi adalah nama / nilai pasangan yang akan dikembalikan pada Anda, tetapi tidak muncul di manapun pada halaman web. Tersembunyi masukan di atas diperlukan untuk digunakan dengan Mailto Formatter.
Mari kita misalkan Anda adalah perusahaan berusaha untuk menghasilkan lead untuk produk baru. Anda memiliki bentuk standar untuk mengumpulkan informasi ... nama, perusahaan, telepon, produk tertarik, dll Satu-satunya masalah adalah terdapat 6 versi yang sedikit berbeda dalam 6 bentuk tempat-tempat yang sedikit berbeda. Anda perlu tahu apa yang datang dari mana. Apa yang harus dilakukan?
Anda dapat menambahkan input ke Anda HIDDEN bentuk seperti begitu ...
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 1"> ... untuk versi pertama
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 2"> ... untuk versi kedua
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 3"> ... untuk versi ketiga
Dan seterusnya dan seterusnya.
By the way, tidak peduli apa nama / nilai pasangan input tersembunyi (atau masukan dalam hal ini). Saya baru saja menggunakan "FORMNAME" karena menyelamatkan aku beberapa mengetik. Ini akan menjadi sangat sah HIDDEN masukan ...
<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ... Anda akan mendapatkan kembali E = Mc ^ 2
HIDDEN input juga berguna untuk script cgi. Sebagai contoh, banyak Internet Service Provider memiliki skrip Anda dapat memiliki bentuk Anda dikirim ke. Kemudian meludah bentuk kembali ke kalian semua bagus dan rapi dan siap untuk dikonsumsi manusia. Masukan yang tersembunyi script cgi mengatakan kepada siapa Anda, di mana untuk mengirim data parsing, dll
Kirim dan Reset Buttons
Terakhir pada daftar adalah tombol SUBMIT dan RESET.
Mereka benar-benar sangat sederhana ...
<INPUT TYPE=SUBMIT>
SUBMIT tentu saja, mengirim data ...
... dan RESET, membersihkan formulir.
<INPUT TYPE=RESET>
Kita dapat dengan mudah mengubah apa yang dikatakan tombol.
<INPUT Type=submit VALUE="Send itu pergi Ray!"> <BR>
<INPUT TYPE=RESET VALUE="Clear bentuk <P> Norm!">
Jika perlu, tombol SUBMIT juga dapat memiliki NAMA. Anda akan membutuhkan ini jika, untuk alasan apapun, Anda memiliki lebih dari satu tombol SUBMIT.
Selanjutnya kita harus memberitahu browser di mana untuk mengirim data yang kami kumpulkan dan bagaimana untuk mengirimnya. Ada dua hal dasar yang dapat Anda lakukan:
1) Anda dapat mengirimkan data ke script cgi untuk diproses, atau
2) Anda dapat memiliki data diemail ke Anda.
Karena untuk pertama, orang yang menulis naskah dapat memberitahu Anda bagaimana data harus dikirim.
Yang kedua, atau bentuk mailto harus memiliki atribut-atribut berikut pada tag <form>.
Catatan-Microsoft Internet Explorer 3.0 tidak mendukung bentuk mailto. Ketika Anda mencoba untuk mengirimkan informasi, surat baru muncul jendela pesan. Namun apakah dukungan explorer formulir dikirim ke sebuah CGI script.
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-form-urlencoded">
Baris ini sangat penting. Satu-satunya hal yang perlu anda lakukan adalah memasukkan alamat email Anda setelah mailto: Sisanya harus ditulis persis seperti yang ditunjukkan. Kata-kata FORM, METHOD, POST & ACTION tidak harus dikapitalisasi tetapi harus ada spasi di antara setiap atribut .. antara FORM & METHOD, antara POST & ACTION, dan antara. com "& ENCTYPE.
Sayangnya data yang akan dikirim kepada Anda dalam hal ini 'hanya berguna untuk sebuah komputer' format ...
FORMNAME = Baru + peserta & NAMA = RU + Havinfun & ALAMAT = 1313 + Mockingbird + Lane
& KOTA = Beverly + Hills & NEGARA = CA
Apa yang akan Anda butuhkan adalah sebuah program untuk mengubahnya menjadi 'berguna untuk manusia' format ...
FORMNAME = New peserta
NAME = R.U. Havinfun
ALAMAT = 1313 Mockingbird Lane
KOTA = Beverly Hills
NEGARA = CA
Mailto Formatter (1.3MB, Win 95) adalah freeware kecil yang sangat baik utilitas yang melakukan pekerjaan ini cukup baik.
Beberapa program mail mampu mengkonversi data tanpa menggunakan program terpisah. Anda mungkin ingin mencoba metode ini pertama. Hanya menghapus instruksi ENCTYPE = "application / x-www-form-urlencoded" dan sebagai gantinya menggunakan ENCTYPE = "text / plain".
Ketika anda menaruh mailto formulir di halaman Anda dan seseorang mengirim informasi, Anda akan melihat bahwa itu dikirim dengan default Perihal. Jika Anda sedang menggunakan Netscape pengunjung Anda akan mendapatkan default Subject "Form posted from Mozilla". Browser lain mungkin mengirim "Formulir Respon", dll
Anda dapat mengubahnya dengan mengedit apa yang ada di <form> tag sebagai berikut ...
Umpan METHOD=POST ACTION="mailto:xxx@xxx.xxx?subject=Company <FORM form" ENCTYPE="application/x-www-form-urlencoded">
Halaman HTML Anda sendiri ...
Buka halaman "feedback.htm" di Notepad, dan tambahkan berikut (teks biru adalah apa untuk menambahkan).
<html>
<body background="bgnd.gif">

<center> <h1> Feedback Form </ h1> </ center>
<br>
<form method=post action="mailto:YOUREMAILADDRESS?subject=Feedback" enctype="text/plain">
<b> Nama saya adalah: </ b> <input type=text name="name">
<p>
<b> Saya bekerja sebagai: </ b> <br>
.
.
</ p>
<p>
<b> Ketika datang ke web browser: </ b> <br>
.
.
</ p>

<b> saya menilai situs Anda sebagai: </ b> <br>
.
.
</ p>
<p>
<b> Komentar: </ b> <br>
.
.
</ p>
<p>
<input type="submit" value="Send it!"> <br>
<input type="reset" value="Clear it!">
</ p>
</ body>
</ html>


Simpan file.

Read More

Tutorial HTML Bab.13

Bab 13: Bentuk
Formulir ...
Formulir memungkinkan Anda untuk menambahkan interaktivitas ke dokumen-dokumen web Anda dengan cara yang <form> tag. Dengan bentuk tag yang dapat ditambahkan ke halaman web Anda buku tamu, formulir pemesanan, survey, mendapatkan umpan balik atau apa pun.
Konstruksi dasar dari suatu bentuk html ini ...
<form> Memulai bentuk
<input> Meminta informasi di salah satu dari beberapa cara berbeda ...
<input> ... Ada dapat banyak masukan daerah seperti yang anda inginkan
</ FORM> akhir suatu bentuk
<input> Tag yang menyediakan pengguna dengan berbagai cara untuk memasukkan informasi. Ada beberapa tag <input> berbeda.
Form Input ...
Teks
JENIS yang paling umum adalah <input> bentuk TEXT.
<INPUT TYPE=TEXT>
Setiap masukan membutuhkan NAMA.
<INPUT TYPE=TEXT NAME="ADDRESS">
Ketika pengguna mengetik di alamat (misalnya 1313 Mockingbird Lane), ini akan menjadi nilai input dan dipasangkan dengan ALAMAT sehingga hasil akhirnya setelah menjalankan melalui Mailto Formatter akan ALAMAT = 1313 Mockingbird Lane.
Kita bisa jika kita ingin, ketik NILAI.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">
Ini akan secara otomatis memasangkan nilai 44 Cherry St dengan nama ALAMAT, kecuali pengguna perubahan itu. Catatan-pastikan untuk menggunakan tanda kutip di mana saya tetapkan.
Kita dapat menentukan ukuran kotak input teks.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>
Nilai default adalah 20.
Jika kita inginkan, kita dapat menentukan berapa banyak karakter pengguna dapat memasukkan.
Pergi ke depan dan mencoba untuk memasukkan lebih dari 10 karakter dalam kotak teks di bawah ini:
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>
Sangat mirip dengan TYPE = TEXT adalah TYPE = PASSWORD. Hal ini persis sama, kecuali dispays *** bukan masukan yang sebenarnya. Browser akan mengirimkan masukan, itu saja tidak akan menampilkan hal itu.
<INPUT TYPE=PASSWORD>
Ingat bahwa setiap <input> harus memiliki NAMA.
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
UKURAN, NILAI, dan MaxLength pengubah / atribut bekerja di sini juga. Omong-omong, sebuah <TAG> menginformasikan kepada browser untuk melakukan sesuatu.
Radio Buttons dan Check Boxes
Tombol radio memungkinkan pengguna untuk memilih salah satu dari beberapa pilihan. Periksa kotak memungkinkan pengguna untuk memilih satu atau beberapa atau semua pilihan.
Pertama, mari kita membangun beberapa Radio Buttons.
<INPUT TYPE=RADIO NAME="POSITION">
Sekarang tambahkan 2 more.
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
Hmmm ... Saya kira kita harus meletakkan satu baris setelah masing-masing.
<INPUT TYPE=RADIO NAME="POSITION"> <BR>
<INPUT TYPE=RADIO NAME="POSITION"> <BR>
<INPUT TYPE=RADIO NAME="POSITION"> <P>
Perhatikan bahwa setiap masukan memiliki nama yang sama. Alasan akan tampak sangat singkat.
Setiap Radio Buttons harus diberi NILAI.
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"> <BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"> <BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> <P>
Sekarang label masing-masing tombol.
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"> <BR> PowerBuilder Developer
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"> Database Administrator <BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> Tidak satu pun dari atas <P>
PowerBuilder Developer
Database Administrator
Di atas tidak
Anda juga dapat mengubah label tersebut dengan

Read More

Tutorial HTML Bab.14

Bab 14: Bentuk Lanjutan
Pull Down dan Scrolling Daftar
Jenis berikutnya prediksi adalah Pull Down List. Dengan tipe ini anda menggunakan <select> bukan <input> dan memiliki tag penutup.
<select>
</ SELECT>
Jangan lupa untuk memberikan nama.
<select NAME="POSITION">
</ SELECT>
Selanjutnya menambahkan beberapa pilihan.
<select NAME="POSITION">
<option> PowerBuilder Developer
<option> Database Administrator
<option> Ada di atas
</ SELECT>
Dan berikan setiap <option> sebuah NILAI.
<select NAME="POSITION">
<option VALUE="PB"> PowerBuilder Developer
<option VALUE="DBA"> Database Administrator
Tak satu pun dari VALUE="NOTA"> <option di atas
</ SELECT>
Pilihan default adalah salah satu yang didaftarkan pertama.
Kita dapat menentukan default selain pilihan pertama dalam daftar.
<select NAME="POSITION">
<option VALUE="PB"> PowerBuilder Developer
<option VALUE="DBA" selected> Database Administrator
Tak satu pun dari VALUE="NOTA"> <option di atas
</ SELECT>
Sebuah Menggulung List ini sangat mirip dengan konstruksi Pull Down List. Kami akan menambahkan beberapa pilihan pertama. Kemudian, semua kita lakukan untuk mengubahnya menjadi Menggulung List adalah menambahkan atribut UKURAN ke <select> tag.
<select NAME="POSITION" SIZE=4>
<option VALUE="PB"> PowerBuilder Developer
<option VALUE="DBA"> Database Administrator
<option VALUE="VB"> Visual Basic Pengembang
Staf Administrasi VALUE="ADMIN"> <option
<option VALUE="JANITOR"> Pengawas
Tak satu pun dari VALUE="NOTA"> <option di atas
</ SELECT>
Yang UKURAN hanyalah menunjukkan berapa banyak pilihan di jendela.
Sekali lagi, nilai default <option> pertama, dan sekali lagi kita dapat mengubah bahwa dengan memilih salah satu.
<select NAME="POSITION" SIZE=4>
<option VALUE="PB"> PowerBuilder Developer
<option VALUE="DBA" selected> Database Administrator
<option VALUE="VB"> Visual Basic Pengembang
Staf Administrasi VALUE="ADMIN"> <option
<option VALUE="JANITOR"> Pengawas
Tak satu pun dari VALUE="NOTA"> <option di atas
</ SELECT>
Textarea
Yang sangat berguna jenis input <TEXTAREA>.
<textarea NAME="COMMENTS">
</ Textarea>
Anda mengontrol ukuran kotak seperti begitu ...
<textarea NAME="COMMENTS" ROWS=6 COLS=50>
</ Textarea>
ROWS adalah tinggi, cols adalah lebar.
| / / (@ @) ---------------------- OOO --- -------- (_)--- OOo -----------------::: Ini adalah untuk menggambarkan bahwa jika anda mengetik sesuatu di antara:: di textarea tag, maka akan muncul di jendela sebagai:: default "KOMENTAR . Bagian yang sejuk ... itu muncul:: PERSIS tipe:: cara Anda itu! :: (Kecuali jika Anda menggunakan MS Internet Explorer): ------------------------------------- ------------------------- |__|__| | | | | ooO Ooo
Atribut yang baik yang akan disertakan dalam <TEXTAREA> adalah WRAP. Beberapa browser tidak mengerti hal itu, tapi kalau itu terjadi, mereka akan mengabaikannya saja.
Silakan ketik di kotak ...
<textarea NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL>
</ Textarea>
WRAP = VIRTUAL berarti bahwa teks dalam kotak membungkus, namun dikirim sebagai salah satu tali panjang yang berkesinambungan.
<textarea NAME="COMMENTS" ROWS=3 COLS=30 WRAP=PHYSICAL>
</ Textarea>
WRAP = FISIK berarti bahwa teks dalam kotak membungkus, dan dikirim dengan cara itu juga.
<textarea NAME="COMMENTS" ROWS=3 COLS=30 WRAP=OFF>
</ Textarea>
Ini adalah default.
WRAP = OFF berarti bahwa teks dalam kotak tidak membungkusnya, tetapi dikirim tepat seperti diketik dalam (seperti laki-laki kecil beberapa textareas kembali).
Halaman HTML Anda sendiri ...
Buka halaman "feedback.htm" di Notepad, dan tambahkan berikut (teks biru adalah apa untuk menambahkan).
<html>
<body background="bgnd.gif">

<center> <h1> Feedback Form </ h1> </ center>
<br>
<form>
<b> Nama saya adalah: </ b> <input type=text name="name">
<p>
<b> Saya bekerja sebagai: </ b> <br>
.
.
</ p>
<p>
<b> Ketika datang ke web browser: </ b> <br>
.
.
</ p>

<b> saya menilai situs Anda sebagai: </ b> <br>
<select name="Rating">
<option value="Wow"> Wow! Bagaimana kau melakukannya?
Realy good value="good"> <option
<option value="interesting"> menarik
<option value="hmmm"> Hmmm - terlihat lebih baik
<option value="tryagain"> Coba lagi kuncup!
</ select>
</ p>
<p>
<b> Komentar: </ b> <br>
<textarea name="comments" rows="6" cols="50" wrap="physical">
</ textarea>
</ p>
</ body>
</ html>
Simpan file.
Bab 15: Bentuk Lanjutan

Read More

Tutorial HTML Bab.12

Bab 12: Menggunakan Meta Tags
Meningkatkan Search Engine Hasil ...
Ketika mesin pencari menemukan halaman Anda, itu akan perlu untuk indeks itu (yaitu, tambahkan ke database) dengan beberapa informasi dari halaman. Banyak mesin pencari sekarang mendukung <META> tag, yang memungkinkan Anda untuk memberikan kata kunci dan deskripsi ke halaman Anda. Ini memberi Anda lebih banyak kontrol atas bagaimana halaman Anda akan muncul selama pencarian, dan akan sering menyebabkan lebih banyak lalu lintas ke halaman Anda.
<META> Tag yang dapat digunakan untuk beberapa tujuan yang berbeda. Biasanya, Anda harus menempatkan tag dalam <META> <head> tag pada awal dokumen anda. Untuk meningkatkan hasil mesin pencari, kita akan menggunakan dua atribut khusus dalam meta tag. Berikut ini sebuah contoh:
<meta name="description" content="description halaman goes here">
<meta name="keywords" content="keywords pergi here">
Ketika pengguna mencari mesin pencari yang mendukung tag meta dan pertanyaan mereka ungkapan (pencarian untuk kata kunci) yang terkait dengan halaman Anda, halaman Anda mungkin akan ditampilkan di daftar hasil. Halaman Anda akan terdaftar oleh Judul, dan kemudian di bawah judulnya akan menjadi yang pertama seratus atau lebih karakter dari deskripsi Anda ditempatkan di meta tag. Dianjurkan agar Anda menyimpan konten deskripsi tidak lebih dari 200 karakter. Meskipun kata kunci konten tidak terlihat oleh pengguna ketika digeledah, dianjurkan untuk menyimpan ini kurang dari 1000 karakter, karena jika Anda memiliki lebih banyak mesin pencari entah akan mengabaikan istirahat atau menghapus Anda dari indeks. (Spasi tidak diperlukan untuk memisahkan kata kunci)
Contoh nyata situasi meta ...
<html>

<head>
<title> Little Joe's Sound Halaman </ title>
name="description" <meta Cool content="Joe's Koleksi File suara untuk digunakan di rumah Anda page!">
name="keywords" <meta suara content="music joe collection"> midi wav
</ head>

<body>
Halaman Goes Here
</ body>

</ html>

Meta tag tidak terlihat pada halaman web, kecuali jika pengguna memilih untuk 'view source'.
Auto-menyegarkan ...
Refreshing otomatis didukung oleh banyak versi-versi terbaru dari Netscape Navigator dan Microsoft Internet Explorer. Hal ini juga menggunakan bentuk modifikasi dari <META> tag. Auto menyegarkan berarti bahwa sekali satu halaman load, Anda dapat menetapkan jumlah tertentu detik dan kemudian browser akan memuat halaman lain secara otomatis. Struktur dasar adalah sebagai berikut:

<meta http-equiv=REFRESH CONTENT=x_seconds;url="http://www.yourhost.co.za/pagetosendto.html">
URL adalah halaman yang anda inginkan refresh untuk, ISI adalah jumlah detik yang Anda inginkan untuk menunggu sebelum menyegarkan, dan http-equiv = refresh hanya mengatakan bahwa ini adalah tag meta refresh. Sebagai contoh, jika anda ingin halaman untuk refresh untuk sybase.co.za setelah 5 detik itu akan menjadi sebagai berikut:
<meta http-equiv=REFRESH CONTENT=5;URL="http://www.sybase.co.za/">
Bab 13: Bentuk
Formulir ...
Formulir memungkinkan Anda untuk menambahkan interaktivitas ke dokumen-dokumen web Anda dengan cara yang <form> tag. Dengan bentuk tag yang dapat ditambahkan ke halaman web Anda buku tamu, formulir pemesanan, survey, mendapatkan umpan balik atau apa pun.
Konstruksi dasar dari suatu bentuk html ini ...
<form> Memulai bentuk
<input> Meminta informasi di salah satu dari beberapa cara berbeda ...
<input> ... Ada dapat banyak masukan daerah seperti yang anda inginkan
</ FORM> akhir suatu bentuk
<input> Tag yang menyediakan pengguna dengan berbagai cara untuk memasukkan informasi. Ada beberapa tag <input> berbeda.
Form Input ...
Teks
JENIS yang paling umum adalah <input> bentuk TEXT.
<INPUT TYPE=TEXT>
Setiap masukan membutuhkan NAMA.
<INPUT TYPE=TEXT NAME="ADDRESS">
Ketika pengguna mengetik di alamat (misalnya 1313 Mockingbird Lane), ini akan menjadi nilai input dan dipasangkan dengan ALAMAT sehingga hasil akhirnya setelah menjalankan melalui Mailto Formatter akan ALAMAT = 1313 Mockingbird Lane.
Kita bisa jika kita ingin, ketik NILAI.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">
Ini akan secara otomatis memasangkan nilai 44 Cherry St dengan nama ALAMAT, kecuali pengguna perubahan itu. Catatan-pastikan untuk menggunakan tanda kutip di mana saya tetapkan.
Kita dapat menentukan ukuran kotak input teks.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>
Nilai default adalah 20.
Jika kita inginkan, kita dapat menentukan berapa banyak karakter pengguna dapat memasukkan.
Pergi ke depan dan mencoba untuk memasukkan lebih dari 10 karakter dalam kotak teks di bawah ini:
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>
Sangat mirip dengan TYPE = TEXT adalah TYPE = PASSWORD. Hal ini persis sama, kecuali dispays *** bukan masukan yang sebenarnya. Browser akan mengirimkan masukan, itu saja tidak akan menampilkan hal itu.
<INPUT TYPE=PASSWORD>
Ingat bahwa setiap <input> harus memiliki NAMA.
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
UKURAN, NILAI, dan MaxLength pengubah / atribut bekerja di sini juga. Omong-omong, sebuah <TAG> menginformasikan kepada browser untuk melakukan sesuatu.
Radio Buttons dan Check Boxes
Tombol radio memungkinkan pengguna untuk memilih salah satu dari beberapa pilihan. Periksa kotak memungkinkan pengguna untuk memilih satu atau beberapa atau semua pilihan.
Pertama, mari kita membangun beberapa Radio Buttons.
<INPUT TYPE=RADIO NAME="POSITION">
Sekarang tambahkan 2 more.
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
Hmmm ... Saya kira kita harus meletakkan satu baris setelah masing-masing.
<INPUT TYPE=RADIO NAME="POSITION"> <BR>
<INPUT TYPE=RADIO NAME="POSITION"> <BR>
<INPUT TYPE=RADIO NAME="POSITION"> <P>
Perhatikan bahwa setiap masukan memiliki nama yang sama. Alasan akan tampak sangat singkat.
Setiap Radio Buttons harus diberi NILAI.
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"> <BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"> <BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> <P>
Sekarang label masing-masing tombol.
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"> <BR> PowerBuilder Developer
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"> Database Administrator <BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> Tidak satu pun dari atas <P>
PowerBuilder Developer
Database Administrator
Di atas tidak
Anda juga dapat mengubah label tersebut dengan tag html lain jika Anda inginkan.
Radio Buttons pada dasarnya Anda sudah selesai. Anda dapat membereskan hal-hal dengan menambahkan pernyataan di atas tombol, dan jika Anda inginkan, memilih pilihan default (opsional).
Apa posisi Anda dalam perusahaan? <BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB" CHECKED> <BR> PowerBuilder Developer
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"> Database Administrator <BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> Tidak satu pun dari atas <P>
Apa posisi Anda dalam perusahaan?
PowerBuilder Developer
Database Administrator
Di atas tidak
Tentu saja pengguna hanya dapat memilih 1 pilihan. Pilihan mereka akan dikembalikan kepada Anda sebagai nama / nilai pasangan POSISI = PB (atau manapun yang mereka pilih).
Periksa kotak bangunan cukup banyak hal yang sama. Mulailah dengan hal ini.
<INPUT TYPE=CHECKBOX NAME="PB">
Tambahkan 3 lebih, tapi kali ini masing-masing memberikan NAMA yang berbeda. (Juga menambahkan line break jika anda mau)
<INPUT TYPE=CHECKBOX NAME="PB"> <BR>
<INPUT TYPE=CHECKBOX NAME="DBA"> <BR>
<INPUT TYPE=CHECKBOX NAME="NOTA"> <BR>
Setiap Kotak Centang mendapat NILAI yang sama.
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES"> <BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES"> <BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"> <BR>
Catatan-Untuk Periksa box yang NAMA NILAI perubahan dan tetap sama dan dengan Radio Buttons, yang NILAI NAMA perubahan tapi tetap sama. Jangan merasa tidak enak, pikiran sederhana saya masih jadi bingung.
OK, mari kita label setiap kotak.
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES"> <BR> PowerBuilder Developer
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES"> Database Administrator <BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"> Tidak satu pun dari atas <BR>
PowerBuilder Developer
Database Administrator
Di atas tidak
Dan terakhir, Anda mungkin ingin menambahkan sedikit sesuatu di atas kotak cek Anda dan pasangan mungkin memilih default.
Apa yang Anda menempati posisi dalam perusahaan? <BR>
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES" CHECKED> <BR> PowerBuilder Developer
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES" CHECKED> Database Administrator <BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"> Tidak satu pun dari atas <BR>
Apa yang Anda menempati posisi dalam perusahaan?
PowerBuilder Developer
Database Administrator
Di atas tidak
Pengguna dapat memilih 1, 2, tidak ada atau semua pilihan. Pilihan mereka akan dikembalikan kepada Anda sebagai nama / nilai pasangan ...
PB = YES
DBA = YES
(atau apa yang pernah mereka pilih ... jika mereka memilih apa-apa, tidak akan dikembalikan kepada Anda)
Halaman HTML Anda sendiri ...
Sekarang kita akan membangun halaman umpan balik yang kami ciptakan di Bab 11. Buka halaman kosong "feedback.htm" di Notepad, dan tambahkan berikut (teks biru adalah apa untuk menambahkan).
<html>
<body background="bgnd.gif" bgcolor=#FFFFFF>

<center> <h1> Feedback Form </ h1> </ center>
<br>
<form>
<b> Nama saya adalah: </ b> <input type=text name="name">
<p>
<b> Saya bekerja sebagai: </ b> <br>
<input type=radio name="position" value="Developer" checked> Pengembang <br>
<input type=radio name="position" value="ProjMan"> Project Manager <br>
<input type=radio name="position" value="TechMan"> Manajer Teknis <br>
<input type=radio name="position" value="NOTA"> Tidak satu pun dari atas
</ p>
<p>
<b> Ketika datang ke web browser: </ b> <br>
<input type=checkbox name="Netscape" checked> saya menggunakan Netscape Navigator <br>
<input type=radio name="NetscapeVer" value="2.0"> versi 2.0 <br>
<input type=radio name="NetscapeVer" value="3.0" checked> <br> versi 3.0
<input type=checkbox name="IExplorer"> saya menggunakan Microsoft Internet Explorer <br>
<input type=radio name="IEVer" value="2.0"> versi 2.0 <br>
<input type=radio name="IEVer" value="3.0"> <br> versi 3.0
</ p>

</ body>
</ html>
Simpan file.

Read More

Tutorial HTML Bab.11

Bab 11: Menggunakan Bingkai
Apa Frames Apakah ...
Bingkai adalah salah satu fitur baru dari HTML yang hanya diimplementasikan pada browser terbaru (Netscape 2.0 dan lebih tinggi, dan Internet Explorer yang baru, dan banyak lainnya) yang memungkinkan satu jendela browser dibagi menjadi beberapa bagian, masing-masing dengan independen halaman HTML dimuat di dalamnya, dan halaman HTML ini dapat berinteraksi dengan satu sama lain. Setiap page loaded dalam setiap bagian dari jendela frame yang terpisah dokumen HTML.
Contoh kode untuk halaman bingkai sederhana ...
<html>
pengujian <title> <head> frame ...</ title> </ head>

<frameset cols="25%,75%">

<frameset>
<frame src="test.html" name="indexbar">
</ frameset>

<frameset>
<frame src="main.html" name="main">
</ frameset>

</ frameset>

<noframes>
Halaman ini memerlukan frame-browser mampu ... silakan mendapatkan satu!
</ noframes>
</ html>
Lihat ini Frames Halaman
Halaman bingkai itu sendiri dalam banyak kasus tidak benar-benar berisi konten apapun, semua konten ditempatkan pada halaman HTML terpisah dimuat dalam setiap frame (bagian). Sebaliknya, halaman bingkai bertindak sebagai panduan, menentukan halaman yang akan dimuat ke dalam setiap bingkai, dan bingkai atribut sendiri. Seperti Anda mungkin telah menyadari, suatu halaman frame mirip dengan halaman HTML biasa, kecuali bahwa tubuh diganti dengan rangkaian bingkai, dan tambahan tag noframes ditambahkan.
Menggunakan Frameset Tag ...
Tag rangkaian bingkai digunakan untuk mendefinisikan karakteristik dari frame, dan noframes tag digunakan untuk mendefinisikan apa browser yang tidak frame-enabled akan melihat. Tag rangkaian bingkai karena diabaikan oleh non-frame browser, apa saja di dalam tag noframes akan dianggap halaman HTML normal. Jadi setelah tag <noframes> harus ditempatkan <body> tag, dan kemudian setiap konten dan tag, kemudian ditutup dengan </ body> tag, diikuti oleh </ noframes> tag. Noframes konten yang tidak akan terlihat oleh seseorang menggunakan frame-enabled browser kecuali jika mereka memilih 'view source'.
Tag rangkaian bingkai akan digunakan beberapa kali sepanjang satu halaman frame. Tag frameset pertama digunakan untuk menentukan jumlah kolom frame yang terpisah di dalam jendela browser, dan apa yang lebar masing-masing akan jendela. Set berikutnya tag rangkaian bingkai akan digunakan untuk menentukan berapa banyak baris bingkai akan berada di jendela browser, dan tinggi badan masing-masing. Atribut baris diatur secara terpisah untuk setiap kolom, misalnya, kolom pertama Anda mungkin memiliki 4 frame, dan kolom kedua Anda dapat memiliki 2 frame, dll Tidak ada batasan khusus jumlah frame yang mungkin Anda miliki dalam satu jendela browser , tetapi Anda harus menyadari bahwa halaman Anda akan dilihat dalam resolusi yang berbeda, dari 640 x 480 piksel ke 1024 x 768 pixel dan lebih besar. Saran saya adalah untuk membatasi halaman Anda tidak lebih dari 4 frame dalam satu jendela browser.
Mendefinisikan Kolom ...
Tag frameset pertama harus membaca <frameset cols="SIZE_OF_COLUMN_1,SIZE_OF_COLUMN_2,ETC">. Tag pertama ini akan ditutup dengan </ frameset> tag, tetapi hanya setelah rangkaian bingkai untuk setiap kolom baris juga didefinisikan. The SIZE_OF_COLUMN dapat menjadi salah satu dari tiga nomor ...
* X% - setiap kolom adalah ditentukan oleh suatu persen dari jendela browser yang tersedia. (x adalah angka dari 1 hingga 100)
* X - setiap kolom adalah ditentukan oleh jumlah piksel tetap. (tidak disarankan, karena lebar pixel bervariasi tergantung pada si pengamat resolusi) (x adalah sembarang angka)
* * - The * memberitahu browser untuk menggunakan semua ruang yang tersedia yang tersisa untuk kolom ini.
Jadi frameset <frameset cols="20%,80%"> membaca akan berarti bahwa kolom pertama adalah jendela browser akan mengambil 20% dari lebar jendela browser, dan kolom kedua akan mengambil 80% dari total browser lebar. Contoh lain adalah <frameset cols="120,*"> di mana kolom pertama tepat 120 piksel lebar, dan kolom kedua mengambil semua sisa lebar. Hanya satu kolom yang dibutuhkan, dan tidak ada batasan pada seberapa banyak kolom dapat didefinisikan.
Mendefinisikan Baris ...
Dalam rangkaian bingkai mendefinisikan kolom pembuka dan tag penutup adalah tag frameset mendefinisikan baris. Jumlah baris tag frameset mendefinisikan secara langsung tergantung pada jumlah kolom yang didefinisikan dalam tag frameset mendefinisikan kolom. Jika ada dua kolom yang ditetapkan, akan ada dua baris terpisah frameset mendefinisikan tag, jika tiga kolom ditetapkan, akan ada tiga baris frameset mendefinisikan tag.
Tag frameset baris harus membaca <frameset rows="SIZE_OF_ROW_1,SIZE_OF_ROW_2,ETC">. Yang SIZE_OF_ROW didefinisikan hampir sama dengan SIZE_OF_COLUMN ... x% adalah persentase yang tersedia browser yang tinggi, x adalah nilai piksel didefinisikan tinggi, dan * adalah semua ruang yang tersisa. Didefinisikan baris atas ke bawah, dan Kolom didefinisikan kiri ke kanan.
Mendefinisikan Frames ...
Dalam setiap baris tag frameset datang bingkai tag, yang mendefinisikan halaman yang harus dimuat dalam bingkai dan beberapa atribut pada bingkai. Frame tag yang sederhana berbunyi <frame src="document_to_load.html">, di mana document_to_load adalah nama halaman web yang bisa dimuat dalam bingkai, dan bingkai tag tidak memiliki tag penutup. Frame tag memiliki beberapa atribut lain yang berguna:
* SCROLLING = "yes | no | auto" - ini mendefinisikan jika frame memiliki scroll bar atau tidak. Secara default frame bergulir set ke auto, yang berarti browser menentukan apakah scroll bar yang diperlukan. Jika diatur ke Ya, frame akan selalu memiliki scroll bar, dan jika diatur ke tidak, frame tidak akan pernah memiliki scroll bar.
* NORESIZE - atribut ini menyatakan bahwa pengguna tidak dapat mengubah ukuran frame. Secara default pengguna dapat merubah ukuran semua frame dalam jendela browser.
* NAME = "x" - atribut ini mendefinisikan nama dari frame, yang digunakan untuk menargetkan halaman yang akan diambil dalam bingkai, yang akan dijelaskan nanti. (x adalah setiap kombinasi alphanumerical)
Jika Anda ingin menggulir ke dinonaktifkan, cukup gunakan kode:
<frame src="document_to_load.html" SCROLLING="no">
atau jika Anda ingin mengubah ukuran yang akan dinonaktifkan hanya menggunakan kode:
<frame src="document_to_load.html" NORESIZE>
Contoh halaman frame yang kompleks ...
<html>
kompleks pengujian <title> <head> frame </ title> </ head>

<frameset cols="33%,33%,33%">

<frameset rows="*,100">
<frame src="page1.html" NAME="index">
<frame src="page2.html" NORESIZE>
</ frameset>

<frameset>
<frame src="main.html" NAME="main">
</ frameset>

<frameset rows="50%,50%">
<frame src="page3.html">
<frame src="page4.html" SCROLLING="no">
</ frameset>

</ frameset>

<noframes> <body>
Halaman ini memerlukan frame-enabled browser!
</ body> </ noframes>

</ html>

Apa halaman frame ini tampak seperti ...
----------------------------------------------
| Halaman1.html | main.html | page3.html |
| | | |
| | | |
| | | |
| | | |
| | | |
| | |--------------|
| | | Page4.html |
| | | |
| | | |
|--------------| | |
| Halaman2.html | | |
| | | |
----------------------------------------------
Lihat contoh ini
Menggunakan atribut TARGET ...
Bagaimana jika Anda memiliki halaman dalam satu frame dengan link, tapi ketika user mengklik link tersebut, Anda ingin dimuat ke dalam salah satu frame yang lain Anda ditentukan? Ini adalah apa yang TARGET atribut untuk. SASARAN atribut yang merupakan bagian dari <a href> tag. A href tag digunakan dengan atribut TARGET berbunyi:

<a href="page_to_load.html" TARGET="target_frame"> teks </ a>
Di mana page_to_load.html adalah nama file yang harus diambil dalam rangka, didefinisikan target_frame adalah nama yang Anda berikan kepada bingkai yang ingin Anda link untuk memuat ke dalam, dan teks adalah teks berlabuh link. Jika Anda menghubungkan tanpa target, yang terhubung akan memuat halaman ke dalam frame. Ada juga beberapa target sihir khusus lainnya yang dapat digunakan di mana target_frame adalah:
* TARGET = "_blank" - link dimuat ke sebuah window browser kosong baru.
* TARGET = "_self" - link tersebut dimuat ke dalam bingkai yang diklik link masuk
* TARGET = "_top" - link dimuat ke jendela browser saat ini penuh, dan semua bingkai menghilang, meninggalkan halaman baru untuk memiliki seluruh jendela.
Halaman HTML Anda sendiri ...
Buat file baru, yang disebut "frames.htm", yang berisi sebagai berikut:
<html>
<head> <title> My Home Page </ title> </ head>
<! - Halaman yang akan memiliki satu baris dengan dua kolom, satu baris dengan satu kolom ->
<! - Frameset pertama mendefinisikan baris: dua baris, yang kedua lebih sempit ->
<frameset rows="85%,15%">
<! - Frameset kedua mendefinisikan kolom pada baris pertama ->
<frameset cols="15%,85%">
<! - Tentukan dua file untuk ditampilkan di baris pertama ->
<! - File pertama akan berisi indeks untuk halaman rumah anda ->
<frame src="indexbar.htm" name="indexbar">
<! - File kedua Home.htm: file Anda telah bekerja pada sejauh ini ->
<frame src="Home.htm" name="mainframe">
</ frameset>

<! - Tentukan file untuk ditampilkan di baris kedua ->
<! - File ini berisi informasi hak cipta ->
<frame src="copyright.htm" name="copyright">
</ frameset>

<! - Tentukan apa yang akan ditampilkan ke browser yang tidak mampu frame ->
<noframes>
Halaman ini memerlukan frame-browser mampu ... silakan mendapatkan satu!
</ noframes>
</ html>

Buat file baru yang lain, yang disebut "indexbar.htm", yang berisi sebagai berikut:
<html>
<body background=&quotbgnd.gif">
<! - Halaman indeks berisi link ke halaman utama, dan halaman umpan balik ->
<! - Mereka akan memuat halaman ke dalam "utama" target ->
<a href="Home.htm" target="mainframe"> Home </ a>
<a href="feedback.htm" target="mainframe"> Saran atau masukan </ a>
</ body>
</ html>
Buat file baru lagi, yang disebut "copyright.htm", yang berisi sebagai berikut:

<html>
<body background=&quotbgnd.gif">
<! - Halaman hak cipta berisi informasi hak cipta untuk halaman web Anda ->
<center> Copyright © 1997 Yourname's Web Page Development </ center>
</ body>
</ html>
Buat file kosong pada dasarnya, yang disebut "feedback.htm". Kami akan melengkapi berkas ini kemudian.
<html>
<body background=&quotbgnd.gif">
</ body>
</ html>

Read More