Belajar membuat halaman web dengan notepad bag 5

Wajib online – Anda yang sering bermain facebook, twitteran, melakukan pencari dengan google dan sebagainya,  pasti tak asing dengan adanya sebuah form pada situs-situs diatas tadi.  Form pada umumnya berfungsi untuk memberikan input dari pengguna ke situs-situs tersebut, Misalnya: saat anda akan login ke facebook, anda akan diwajibkan memasuk input berupa email dan password facebook anda.

Pada pembelajaran membuat web sederhana kali ini kita akan belajar membuat sebuah form seperti situs-situs diatas.

Pada dasar pembuatan sebuah form website, setiap form html akan diapit oleh tag <form></form>.  Sedangkan tag <form> memiliki atribut-atriut antara lain seperti dibawah ini

Action = Berfungsi untuk mencantumkan file mana yang akan digunakan dalam proses input form  yang dikirim. Contoh “daftar_pengguna.php” atau “folder/ daftar_pengguna.php

Method = Ber fungsi sebagai penentu tipe pengiriman data, berupa post atau get

Name = Atribut yang berfungsi pada alamat yang bagian dari javasript. Nama form tidak dikirim saat ke server saat form disubmit.

Selain tag diatas masih ada pula, tag lain yakin tag input, tag ini berguna untuk  menentukan output yang tampil pada browser (berupa tombol, chek box, password dan sebagainya. Antara lain

Text = berfungsi untuk membuat input berupa text (text box). Dan text masih memiliki tiga atribut yaitu

-          Size = berfungsi untuk menentukan ukurang panjang kotak input text (textbox)

-          Maxlength = berfungsi untuk menentukan batas maksimal karakter yang bisa ditampung textbox.

-          Value = berfungsi untuk menentukan isi textbox. Berguna menginformasikan user dalam mengisi form tersebut, misalnya: “email anda”, “username”, “url” dan sebagainya

Password = seperti dengan text tetapi karakter yang diketik user akan tertutupi menjadi bentuk asterik (*). Sebagai contoh saat anda mengetikan password anda  difacebook, yahoo, gmail dan lain-lain.

Hidden = input yang dapat menyimpan nilai atau variable  yang akan digunakan untuk halaman berikutnya. Tetapi input ini tidak terlihat pada browser saat web diakses oleh penggunanya.

Submit = berfungsi memunculkan tombol submit (pengiriman). Nama tombol (submit) diambil dari atribut dari nilai attribute value

Reset = berfungsi untuk mengembalikan /  membersih segala isian pada form seperti sebelum anda melakukan pengisian.

File = berfungsi untuk mengupload file- file anda. Bentuknya seperti saat anda, akan mengupload gambar pada facebook, jika anda tekan akan muncul browser yang akan menyuruh anda untuk menetukan file yang akan anda upload

Checkbox = Biasanya digunakan untuk memilih lebih dari satu  pilihan, dengan memunculkan tampilan checkbox. Jika tag ini terdapat kata “checked” maka checkbox tersebut akan ditandai

 Radio = ini digunakan jika kita harus memilih hanya satu pilihan. Tipe ini akan menampilkan tampilan radio button. Jika ada kata “checked” maka radio tersebut akan ditandai “default”

 Image = memiliki kegunaan seperti submit, tetapi pada tipe ini pada tombol submit diganti dengan gambar sebagai pemgantinya.

Berikut contoh cara pembuatan form

1.       Buka notepad

2.       Tulis / copykode seperti dibawah ini

<form action="tidak_ada.php" method="POST">

<h2>Terima kasih anda ikut berpartisipasi melalui survei ini</h2>

Nama: <input type="text" name="nama" value="Ketik Nama Disini" size="30"

maxlength="50"><br>

Password: <input type="password" name="nama" size="30" maxlength="50"><br>

<input type="checkbox" name="mailing" value="ya"> klik jika anda bersedia memberikan data diri anda.

<input type="hidden" name="sembunyi" value="anda tidak dapat melihatku">

<p>

Status Anda saat ini?<br>

<input type="radio" name="status" value="pelajar">pelajar<br>

<input type="radio" name="status" value="pekerja">pekerja<br>

<input type="radio" name="status" value="duda_janda">menganggur<br>

</p>

<input type="submit" value="DAFTAR"> <input type="reset" value="RESET">

</form>

3.       Simpan file notepad anda, kemudian pada kolom save as type anda pilih “all file”

4.       Kemudian anda buka file tadi melalui browser internet (google chrome / firefox)

(tampilan   pada google chrome)

artikel diatas boleh di copas tapi baca dulu di sini

Artikel Terkait: