Membuat Sebuah Web yang Memiliki Form Buku Tamu

Hay Assalamualaikum wr.wb teman-teman.

Kali ini saya akan menerangkan dan menjelaskan gimana cara membuat web dengan menggunakan aplikasi sublime text. Bagi teman-teman yang belum mempunyai aplikasinya, bisa di download terlebih dahulu aplikasi sublime text.

https://www.sublimetext.com/download .

Soooo.......

Pada kesempatan ini saya akan membuat sebuah Web yang memiliki form Buku Tamu dengan ketentuan sebagai berikut:

1. memiliki text input untuk memasukkan nama
2. memiliki radio button input untuk memilih jenis kelamin (laki-laki / perempuan)
3. memiliki drop down list untuk memilih Fakultas dari semua fakultas di UNSRI
4. memiliki text area untuk memasukkan Biografi
5. memiliki text input untuk memasukkan mata kuliah favorit, yang sudah memiliki beberapa nama mata kuliah yang sudah terdefinisi (gunakan datalist)
6. memiliki range input untuk menentukan tinggi badan
7. memiliki password input untuk memasukkan kata rahasia
8. memiliki checkbox untuk menentukan apakah tamu membawa kado atau tidak
9. memiliki number input untuk memasukkan semester yang sedang ditempuh
10. memiliki date input untuk memasukkan tanggal lahir
11. memiliki color input untuk memasukkan warna favorit
12. memiliki email input untuk memasukkan email
13. memiliki caption form "Buku Tamu" yang menggabungkan semua isian form
14. memiliki tombol "Reset" untuk menghapus semua data form
15. memiliki sebuah tombol kirim, yang apabila dipilih, akan menampilkan halaman "Terima kasih"

YANG HASILNYA SEPERTI INI

Berikut Langkah-langkahnya:

• Langkah 1

Buka aplikasi Sublime Text 3. Maka akan muncul tampilan awal seperti gambar di bawah ini

• Langkah 2

Tuliskan tag html pada kotak isian. Jika ingin lebih cepat menuliskannya, cukup dengan menulis html dan tekan TAB di keyboard. Maka secara otomatis tag html akan muncul.

 

• Langkah 3

Untuk menambahkan title pada web saya,  saya bisa langsung mengetiknya di sebelah tag <title> menambahkan title </title>. Title ini berfungsi untuk membuat judul untuk dokumen HTML

•  Langkah 4

Saya akan membuat Layoutnya terlebih dahulu, Untuk cara membuat layoutnya bisa anda lihat di tutorial saya sebelumnya http://keniayas.blogspot.co.id/2017/02/membuat-halamamn-web-menggunakan-html.html

•  Langkah 5

Untuk memulai membuat HTML form, masukan tag <form> dan jangan lupa di tutup di akhir </form>. Karena saya ingin membuat caption form seperti yang terdapat pada point 13, maka saya memasukkan tag <fieldset> tag digunakan untuk elemen kelompok terkait dalam formulir. tag ini menggambar sebuah kotak di sekitar elemen terkait.dan pada bagian tag <legend> tag ini mendefinisikan keterangan untuk <fieldset> elemen.

• Langkah 6

Untuk membuat text input untuk memasukkan nama. maka tag <input > dengan atribut <type="text" name="nama">

• Langkah 7

Untuk membuat radio button input untuk memilih jenis kelamin (laki-laki / perempuan).  Maka tag yang digunakan adalah tag <input> dengan atribut <type=” radio ” name= “ gender” value = “  ” > type=” ”Mendefinisikan sebuah tombol radio (untuk memilih salah satu dari banyak pilihan) dan untuk value nya silahkan diisi sendiri apakah laki-laki/perempuan/male/female.

Contoh : <input type="radio" name="gender" value="male/female"> Female

 

• Langkah 8

Untuk membuat drop down list untuk memilih Fakultas dari semua fakultas di UNSRI. Gunakan tag <select> dan tag <option> . <select> elemen mendefinisikan daftar drop-down, dengan atribut  < name=”     ” > dan <option> elemen mendefinisikan opsi yang bisa dipilih dengan atribut  < value="   " > isi dari velue .

Contoh : <"select name="fakultas">

<option value="fakultas"> nama fakultas</option></select>

•  Langkah 9

Lalu membuat text area untuk memasukkan Biografi. Gunakan tag <textarea> untuk mendefinisikan field input multi-line.  Dengan atribut name=”    ” rows=” untuk menentukan jumlah terlihat dari baris dalam area teks “ cols=” untuk menentukan lebar terlihat dari area teks” 

Contoh :  <textarea  name="Biografi" rows="10" cols="30" placeholder="Silahkan Tulis  Biografi Anda"></textarea>

• Langkah 10

Setelah itu kita akan buat text input untuk memasukkan mata kuliah favorit, yang sudah memiliki beberapa nama mata kuliah yang sudah terdefinisi (menggunakan datalist).

Saya menggunakan tag < input > dengan atribut list. Kemudian gunakan tag < datalist > dengan atribut id=”   ” .

 Contoh :  <input list="matakuliah" name="matakuliah">

 <datalist id="matakuliah">

 <option value="nama mata kuliah"></datalist>

• Langkah 11 

Lanjut kita akan membuat range input untuk menentukan tinggi badan. Saya menggunakan tag dan atribut sebagai berikut:

Contoh : <label for="tb">Tinggi Badan </label>

<input type="range" name="tinggibadan" min="100" max="200" value="150" id="tb" oninput="nilai(value)"> &nbsp;

<output for="tb" id="tinggibadan">200</output>

<script>

    function nilai (tb){

        document.querySelector('#tinggibadan')

        .value = tb;

    }

</script>

•  Langkah 12

Memiliki password dan user name input untuk memasukkan kata rahasia. Gunakan tag <input> untuk username tambahkan atribut type = “text” name= “ ”, dan password dengan atribut type = “ password ”  name = “ ”

Contoh : User Name : <br>

<input type="text" name="username"><br>

User Password: <br>

<input type="password" name="password">

</form>

•  Langkah 13

Saya akan membuat checkbox untuk menentukan apakah tamu membawa kado atau tidak.  Gunakan tag < input type = "checkbox" > mendefinisikan sebuah kotak centang.

Lalu tambahkan atribut  name=”  ”  value=”  ”.

Contoh  :  Apakah Tamu Membawa Kado ?<br>

<input type="checkbox" name="Kado" value="Bawa"> Bawa Kado

<br>

•   Langkah 14

Kemudian saya akan membuat number input untuk memasukkan semester yang sedang ditempuh. Gunakan tag < input > dengan atribut type = “   ”  name = “  ”  min = “  ”  max = “  ”  value = “   ”.

Contoh : Semester Yang Sedang Ditempuh:

<input type="number" name="Semester" min="1" max="10" value="1">

• Langkah 15

Kemudian membuat date input untuk memasukkan tanggal lahir. Gunakan <input type = "date"> yang digunakan untuk field input yang harus berisi tanggal. Dan tambahkan atribut name = “ ” placeholder = “  ” .  placeholder digunakan untuk efek onfocus dan  onblur di javascript , Jadi ketika kita klik textfild maka tulisan / value dalam textfiled tersebut akan ilang saat kita ketikan tulisan.

Contoh :   Birthday:

  <input type="date" name="Tanggal Lahir"  placeholder="dd/mm/yyyy">

• Langkah 16

Lalu saya akan membuat color input untuk memasukkan warna favorit .Gunakan <input type="color" name="nama color" value="warna tampilan di website">

•  Langkah 17

Untuk membuat input email pada HTML form, gunakan <input type="email" name="email">

•   Langkah 18

Untuk membuat input button dan dapat menampilkan halaman baru berupa tulisan maka gunakan <input type="button" onclick="alert('isi pada halaman baru') value="nama tampilan di website"> dan untuk membuat input reset maka gunakan <input type="reset">

 Itulah penjelasan singkat dari saya.jika ada salah kata saya mohon maaf.

Jangan bosan ya teman-teman untuk membaca blog saya. Mohon maaf apabila terdapat kesalahan dalam kata-kata.

Nantikan tutorial blog saya berikutnya yaa.....see you.

Wassalamualaikum wr.wb