Penerapan HTML (Part 14)
Latar belakang kali ini kita masih mengenal sintag tentang HTML apa saja yang di butuhkan untuk membuat web dasar
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime text
III.Tujuan.
untuk mengetahui langkah dasar untuk membuat web yang sederhana.
IV.Penjelasan.
Formulir HTML
<Form> Elemen
bentuk HTML digunakan untuk mengumpulkan input pengguna.
<Form> elemen mendefinisikan bentuk HTML
bentuk HTML mengandung unsur bentuk.
elemen form berbagai jenis elemen input, checkbox, tombol radio, tombol submit, dan banyak lagi.
<Input> Elemen
<Input> elemen adalah elemen bentuk yang paling penting.
<Input> elemen memiliki banyak variasi, tergantung pada jenis atribut.
Berikut adalah jenis yang digunakan dalam bab ini:
Jenis Deskripsi
teks Mendefinisikan input teks biasa
radio Mendefinisikan tombol radio masukan (untuk memilih salah satu dari
banyak pilihan)
submit Mendefinisikan sebuah tombol submit (untuk mengirimkan formulir)
input teks
<Input type = "text"> mendefinisikan sebuah field input satu baris untuk input teks
Contoh :
Maka outputnya :
Tombol radio Masukan
<Input type = "radio"> mendefinisikan tombol radio.
tombol radio membiarkan pengguna memilih SATU dari sejumlah pilihan
Contoh :
Maka outputnya :
<Input type = "submit"> mendefinisikan tombol untuk mengirimkan formulir ke bentuk-handler.
Bentuk-handler biasanya halaman server dengan script untuk memproses input data.
Bentuk-handler ditentukan dalam atribut action form
Contoh :
Maka outputnya :
Aksi Atribut
Atribut aksi mendefinisikan tindakan yang harus dilakukan ketika formulir dikirimkan.
Biasanya, bentuk data dikirim ke halaman web pada server ketika pengguna mengklik tombol submit.
Dalam contoh di atas, bentuk data dikirim ke sebuah halaman di server disebut "action_page.php". Halaman ini berisi script server-side yang menangani data formulir:
<Form action = "action_page.php">
Jika atribut aksi dihilangkan, tindakan diatur ke halaman saat ini.
Metode Atribut
Atribut metode menentukan metode HTTP (GET atau POST) yang akan digunakan ketika mengirimkan data formulir:
<Form action = metode "action_page.php" = "mendapatkan">
atau:
<Form action = "action_page.php" method = "post">
Ketika Menggunakan GET?
Metode default ketika mengirimkan formulir data GET.
Namun, ketika GET digunakan, data formulir yang dikirimkan akan terlihat di bidang alamat halaman:
action_page.php? firstname = Mickey & lastname = Tikus
Catatan: GET harus TIDAK digunakan saat mengirim informasi sensitif! GET paling cocok untuk jumlah pendek, non-sensitif, data, karena memiliki keterbatasan ukuran juga.
Ketika Menggunakan POST?
Selalu gunakan POST jika bentuk data berisi informasi sensitif atau pribadi. Metode POST tidak menampilkan data formulir yang disampaikan dalam bidang alamat halaman.
POST tidak memiliki keterbatasan ukuran, dan dapat digunakan untuk mengirim data dalam jumlah besar.
Nama Atribut
Setiap field input harus memiliki atribut nama untuk diserahkan.
Jika atribut nama dihilangkan, data yang field input tidak akan dikirim sama sekali.
Contoh :
Maka outputnya :
Pengelompokan data Form dengan <fieldset><fieldset> elemen digunakan untuk mengelompokkan data terkait dalam formulir
<legend> mendefinisikan keterangan untuk <fieldset> elemen.
Contoh :
Maka outputnya :
<Input> Elemen
Unsur bentuk yang paling penting adalah <input> elemen.
<Input> elemen dapat ditampilkan dalam beberapa cara, tergantung pada jenis atribut.
Semua jenis input yang berbeda akan dibahas dalam bab berikutnya.
<Select> Elemen
<pilih> mendefinisikan daftar drop-down
<Option> elemen mendefinisikan opsi yang bisa dipilih.
Secara default, item pertama dalam daftar drop-down yang dipilih.
Untuk menentukan pilihan pra-dipilih, menambahkan atribut yang dipilih untuk opsi
<textarea> Elemen
<textarea> mendefinisikan field input multi-line (text area)
Baris atribut menentukan jumlah terlihat dari baris dalam area teks.
Atribut cols menentukan lebar terlihat dari area teks.
Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser
<button> Elemen
<button> elemen mendefinisikan tombol diklik
HTML5 Elemen Form
HTML5 menambahkan elemen form berikut:
<Datalist>
<Keygen>
<Keluaran>
Catatan: Browser tidak menampilkan elemen yang tidak diketahui. unsur-unsur baru yang tidak didukung dalam browser lama tidak akan "menghancurkan" halaman web Anda.
HTML5 <datalist> Elemen
<datalist> elemen menentukan daftar pilihan yang telah ditetapkan untuk
<input> elemen.
Pengguna akan melihat daftar drop-down pilihan yang telah ditentukan karena mereka input data.
Daftar atribut dari <input> elemen, harus mengacu pada atribut id dari <datalist> elemen.
HTML5 <keygen> Elemen
Tujuan dari <keygen> elemen adalah untuk menyediakan cara yang aman untuk mengotentikasi pengguna.
<keygen> elemen menentukan bidang key generator-pair dalam formulir.
Ketika formulir dikirimkan, dua tombol dihasilkan, satu pribadi dan satu publik.
Kunci pribadi disimpan secara lokal, dan kunci publik dikirim ke server.
Kunci publik dapat digunakan untuk menghasilkan sertifikat klien untuk mengotentikasi pengguna di masa depan.
HTML5 <output> Elemen
<output> elemen merupakan hasil dari perhitungan (seperti yang dilakukan oleh script).
Rangkuman Contoh:
Maka outputnya :
Input Type Text
<Input type = "text"> mendefinisikan satu baris kolom input teks
Masukan Jenis Sandi
<Input type = "password"> mendefinisikan bidang sandi
Masukan Type Kirim
<Input type = "submit"> mendefinisikan tombol untuk mengirimkan data formulir ke bentuk-handler.
Bentuk-handler biasanya halaman server dengan script untuk memproses input data.
Bentuk-handler ditentukan dalam atribut action form
Masukan Jenis ulang
<Input type = "reset"> mendefinisikan sebuah tombol reset yang akan mengatur ulang semua nilai bentuk ke nilai standar
Masukan Jenis Radio
<Input type = "radio"> mendefinisikan tombol radio.
tombol radio membiarkan pengguna memilih HANYA SATU dari sejumlah pilihan
Masukan Jenis Checkbox
<Input type = "checkbox"> mendefinisikan sebuah kotak centang.
Centang membiarkan pengguna memilih ZERO atau LEBIH pilihan dari sejumlah pilihan.
Masukan Type Warna
<Input type = "warna"> digunakan untuk field input yang harus berisi warna.
Tergantung pada dukungan browser, pemetik warna dapat ditampilkan dalam kolom input.
Masukan Type Tanggal
<Input type = "date"> digunakan untuk field input yang harus berisi tanggal.
Tergantung pada dukungan browser, tanggal pemetik bisa muncul di bidang input.
Masukan Type Datetime-lokal
<Input type = "datetime-lokal"> menentukan field input tanggal dan waktu, dengan tidak ada zona waktu.
Tergantung pada dukungan browser, tanggal pemetik bisa muncul di bidang input.
Masukan Type Email
<Input type = "email"> digunakan untuk field input yang harus berisi alamat e-mail.
Tergantung pada dukungan browser, alamat e-mail dapat secara otomatis divalidasi ketika disampaikan.
Beberapa smartphone mengenali jenis email, dan menambahkan ".com" ke keyboard untuk mencocokkan masukan email.
Bulan masukan Type
<Input type = "bulan"> memungkinkan pengguna untuk memilih bulan dan tahun.
Tergantung pada dukungan browser, tanggal pemetik bisa muncul di bidang input.
Masukan Jenis Nomor
<Input type = "angka"> mendefinisikan sebuah field input numerik.
Anda juga dapat mengatur pembatasan apa nomor yang diterima.
Rangkuman Contoh :
Maka outputnya :
Nilai Atribut
Nilai atribut menentukan nilai awal untuk field input
dibaca Atribut
Atribut readonly menetapkan bahwa field input dibaca saja (tidak dapat diubah)
Atribut dinonaktifkan
Atribut cacat menetapkan bahwa field input dinonaktifkan.
Sebuah field input cacat tidak dapat digunakan dan un-diklik, dan nilainya tidak akan dikirim ketika mengirimkan formulir
Ukuran Atribut
Atribut ukuran menentukan ukuran (dalam karakter) untuk bidang masukan
maxlength Atribut
Atribut maxlength menentukan panjang maksimum yang diperbolehkan untuk bidang masukan
Dengan atribut maxlength, field input tidak akan menerima lebih dari jumlah yang diizinkan karakter.
Atribut maxlength tidak memberikan umpan balik. Jika Anda ingin memperingatkan pengguna, Anda harus menulis kode JavaScript.
Autocomplete Atribut
Atribut autocomplete menentukan apakah bentuk atau masukan bidang harus memiliki autocomplete atau menonaktifkan.
Ketika autocomplete aktif, browser secara otomatis menyelesaikan nilai input berdasarkan nilai-nilai bahwa pengguna telah masuk sebelumnya.
Tip: Hal ini dimungkinkan untuk memiliki autocomplete "in" untuk formulir, dan "off" untuk bidang masukan tertentu, atau sebaliknya.
Atribut autocomplete bekerja dengan <form> dan berikut <input> jenis: teks, pencarian, url, tel, email, password, datepickers, jangkauan, dan warna.
novalidate Atribut
Atribut novalidate adalah <form> atribut.
Ketika hadir, novalidate menentukan bahwa data formulir tidak harus divalidasi ketika disampaikan.
autofocus Atribut
Atribut autofocus menentukan bahwa kolom input secara otomatis mendapatkan fokus ketika beban halaman.
Bentuk Atribut
Atribut bentuk menentukan satu atau lebih bentuk sebuah <input> elemen milik.
Tip: Untuk mengacu ke lebih dari satu bentuk, menggunakan daftar dipisahkan dengan spasi dari bentuk ids.
formaction Atribut
Atribut formaction menentukan URL dari file yang akan memproses input kontrol ketika formulir dikirimkan.
Atribut formaction menimpa atribut aksi <form> elemen.
Atribut formaction digunakan dengan type = "submit" dan ketik = "image".
formenctype Atribut
Atribut formenctype menentukan bagaimana data formulir harus dikodekan ketika diajukan (hanya untuk bentuk dengan metode = "post").
Atribut formenctype menimpa atribut enctype dari <form> elemen.
Atribut formenctype digunakan dengan type = "submit" dan ketik = "image".
formmethod Atribut
Atribut formmethod mendefinisikan metode HTTP untuk mengirimkan form-data ke URL tindakan.
Atribut formmethod menimpa atribut metode <form> elemen.
Atribut formmethod dapat digunakan dengan type = "submit" dan ketik = "image".
formnovalidate Atribut
Atribut formnovalidate menimpa atribut novalidate dari <form> elemen.
Atribut formnovalidate dapat digunakan dengan type = "submit".
formtarget Atribut
Atribut formtarget menentukan nama atau kata kunci yang menunjukkan di mana untuk menampilkan respon yang diterima setelah mengirimkan formulir.
Atribut formtarget menimpa atribut target <form> elemen.
Atribut formtarget dapat digunakan dengan type = "submit" dan ketik = "image".
Tinggi dan lebar Atribut
Tinggi dan lebar atribut menentukan tinggi dan lebar dari <input type = "image"> elemen.
Daftar Atribut
Atribut daftar mengacu pada <datalist> elemen yang berisi opsi yang telah ditetapkan untuk <input> elemen.
Min dan max Atribut
Min dan max atribut menentukan nilai minimum dan maksimum untuk <input> elemen.
Min dan max atribut pekerjaan dengan jenis masukan berikut: jumlah, rentang, tanggal, datetime-lokal, bulan, waktu dan minggu.
beberapa Atribut
beberapa atribut menentukan bahwa pengguna diperbolehkan untuk memasukkan lebih dari satu nilai dalam <input> elemen.
beberapa atribut bekerja dengan jenis berikut masukan: email, dan berkas.
Pola Atribut
Atribut pola menentukan ekspresi reguler yang nilai <input> elemen diperiksa terhadap.
Atribut pola bekerja dengan jenis masukan berikut: teks, pencarian, url, tel, email, dan password.
Tip: Gunakan atribut judul global untuk menggambarkan pola untuk membantu pengguna.
Tip: Pelajari lebih lanjut tentang ekspresi reguler di tutorial JavaScript kami.
Opera Safari Chrome Firefox Internet Explorer
Placeholder Atribut
Atribut placeholder menetapkan petunjuk yang menggambarkan nilai yang diharapkan dari sebuah field input (nilai sampel atau deskripsi singkat dari format).
Petunjuk ditampilkan dalam kolom input sebelum pengguna memasukkan nilai.
Atribut placeholder bekerja dengan jenis masukan berikut: teks, pencarian, url, tel, email, dan password.
Atribut yang diperlukan
Atribut yang diperlukan menetapkan bahwa sebuah field input harus diisi sebelum mengirimkan formulir.
Atribut yang diperlukan bekerja dengan jenis berikut masukan: teks, pencarian, url, tel, email, password, pemetik tanggal, nomor, checkbox, radio, dan berkas.
Langkah Atribut
Atribut langkah menentukan interval jumlah hukum untuk <input> elemen.
Contoh: jika langkah = "3", nomor hukum bisa menjadi -3, 0, 3, 6, dll
Tip: Atribut langkah dapat digunakan bersama-sama dengan max dan min atribut untuk menciptakan berbagai nilai-nilai hukum.
Atribut Langkah bekerja dengan jenis masukan berikut: jumlah, rentang, tanggal, datetime-lokal, bulan, waktu dan minggu.
Rangkuman Contoh :
Maka outputnya :
dapat kita simpulkan bahwa trik trik dasar itu harus kita pelajari agar kita dapat membuat suatu web sederhana yang maximal.
VI.Refrensi.
http://www.w3schools.com/html
Komentar
Posting Komentar