Tag <form> dari HTML yang digunakan untuk mendeklarasikan sebuah form. biasanya Tag ini datang berpasangan dengan elemen khusus yang disebut kontrol, elemen ini ditulis di antara tag pembuka <form> dan tag penutup </form> .
Berikut ini merupakan benerapa elemen pengilut untuk menggunakan tag <form> :
- <input>
- <button>
- <textarea>
- <form>
- <option>
- <select>
- <label>
- <fieldset>
Kontrol formulir tinggal di dalam elemen <form> . elemen ini harus selalu melakukan tindakan atribut dan biasanya akan memiliki metode dan atribut id juga. <action> - Setiap elemen <form> membutuhkan atribut tindakan. Nilainya adalah URL untuk halaman di server yang akan menerima informasi dalam bentuk kapan diajukan.
<form action="http://www.example.com/subscribe.php"
metode="get">
<p>
// Di sinilah kontrol formulir akan muncul.
</p>
</form>
Hasilnya :
Formulir dapat dikirim menggunakan salah satu dari dua metode: get atau post. Dengan metode get, nilainya dari formulir ditambahkan ke akhir dari URL yang ditentukan dalam atribut tindakan. Metode get ini ideal untuk:
- Bentuk pendek (seperti pencarian kotak)
- Ketika Anda baru saja mengambil data dari server web (tidak mengirimkan informasi yang harus ditambahkan atau dihapus dari database)
Dengan metode post, nilai dikirim dalam bentuk yang dikenal sebagai header HTTP. Sebagai aturan praktis Anda harus menggunakan metode post jika formulir Anda :
- Memungkinkan pengguna untuk mengunggah file
- Sangat panjang
- Berisi data sensitif (misalnya kata sandi)
- Menambahkan informasi ke, atau menghapus informasi dari database
- Jika atribut metode bukan digunakan, data formulir akan dikirim menggunakan metode get.
Input
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15"
maxlength="30" />
</p>
</form>
Hasil :
Saat pengguna memasukkan informasi ke dalam formulir, server perlu tahu bentuk mana yang mengontrol masing-masing sepotong data dimasukkan ke dalam. Misalnya, dalam formulir login, tombol server perlu tahu apa yang telah dimasukkan sebagai nama pengguna dan apa yang telah diberikan sebagai kata sandi.
Oleh karena itu, setiap formulir kontrol membutuhkan atribut name. Nilai atribut ini mengidentifikasi kontrol formulir dan dikirim beserta informasinya mereka masuk ke server.
Anda dapat menggunakan maxlength atribut untuk membatasi jumlah karakter yang dapat dimasukkan pengguna ke dalam bidang teks. Nilainya adalah jumlah karakter yang mereka dapat memasuki. Misalnya, jika Anda minta setahun, maxlength atribut bisa memiliki nilai 4.
Password input
Atribut name menunjukkan nama input kata sandi, yang dikirim ke server dengan kata sandi yang dimasukkan pengguna.size, maxlenght dapat membawa ukuran dan atribut maxlength seperti input teks satu baris.
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15"
maxlength="30" />
</p>
<p>Password:
<input type="password" name="password" size="15"
maxlength="30" />
</p>
</form>
Hasil :
Meskipun kata sandinya disembunyikan di layar, ini tidak berarti data dalam kata sandi kontrol dikirim dengan aman ke server. Anda seharusnya tidak bisa menggunakan cara seperti ini untuk mengirim data sensitif seperti nomor kartu kredit.
Untuk keamanan penuh, server membutuhkan diatur untuk berkomunikasi dengan browser pengguna menggunakan Lapisan Soket Aman (SSL). Topik SSL berada di luar cakupan dari artikel ini, namun ada tautan untuk mempelajari lebih lanjut tentangnya di berbagai situs web yang membahas tentang itu
Textarea
Teks apa pun yang muncul di antara pembuka <textarea> dan tag <textarea> penutup akan muncul di kotak teks halaman. Jika pengguna tidak menghapus apapun teks di antara tag ini, pesan ini akan dikirim ke server bersama dengan apa pun yang telah pengguna ketik. Beberapa situs mengunakan JavaScript untuk menghapus informasi ini ketika pengguna mengklik di bidang teks.
<form action="http://www.example.com/comments.php">
<p>Apa pendapat anda tentang belaja HTML?</p>
<textarea name="comments" cols="20" rows="4">
Tulis komentar disini..
</textarea>
</form>
Hasil :
Jika Anda membuat formulir baru, anda harus menggunakan CSS untuk mengontrol lebar dan tinggi tag <textarea>. Namun, jika Anda melihat kode yang lebih lama, Anda mungkin melihat atribut cols dan rows digunakan dengan elemen ini.
Atribut cols menunjukkan seberapa lebar area teks seharusnya diukur dalam jumlah karakter. Atribut baris menunjukkan berapa banyak baris area, teks harus mengambil Tegak lurus.
Contoh form radio button
<form action="http://www.example.com/profile.php">
<p>Pilih genre musik favoritmu:
<br />
<input type="radio" name="genre" value="rock"
checked="checked" /> Rock
<input type="radio" name="genre" value="pop" />
Pop
<input type="radio" name="genre" value="jazz" />
Jazz
</p>
</form>
Hasil:
Contoh form checkbox
<form action="http://www.example.com/profile.php">
<p>Silakan pilih layanan musik favorit Anda:
<br />
<input type="checkbox" name="service"
value="itunes" checked="checked" /> iTunes
<input type="checkbox" name="service"
value="lastfm" /> Last.fm
<input type="checkbox" name="service"
value="spotify" /> Spotify
</p>
</form>
Hasil:
Contoh Drop Down List Box
<form action="http://www.example.com/profile.php">
<p>Di perangkat apa Anda mendengarkan musik?</p>
<select name="devices">
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
Hasil:
Contoh Form Multiple Select Box
<form action="http://www.example.com/profile.php">
<p>Apakah Anda memainkan salah satu alat musik berikut?
(Anda dapat memilih lebih dari satu opsi dengan menahan
kontrol bawah pada PC atau tombol perintah pada Mac
saat memilih opsi yang berbeda.)</p>
<select name="instruments" size="3"
multiple="multiple">
<option value="guitar" selected="selected">
Guitar</option>
<option value="drums">Drums</option>
<option value="keyboard"
selected="selected">Keyboard</option>
<option value="bass">Bass</option>
</select>
</form>
Hasil :
Contoh File input Box
<form action="http://www.example.com/upload.php"
method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>
Hasil :
Contoh submit Button
<form action="http://www.example.com/subscribe.php">
<p>Berlangganan ke daftar email kami:</p>
<input type="text" name="email" />
<input type="submit" name="subscribe"
value="Subscribe" />
</form>
Hasil :
Contoh image Button
<form action="http://www.example.org/subscribe.php">
<p>Berlangganan ke daftar email kami:</p>
<input type="text" name="email" />
<input type="image" src="images/subscribe.jpg"
width="100" height="20" />
</form>
Hasil :
Contoh Labelling Form Controls
<label>Age: <input type="text" name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender"
value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender"
value="m">
<label for="male">Male</label>
Hasil:
Gender:
Contoh Grouping Form Elements
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>
Hasil :
Contoh Form Validation
<form action="http://www.example.com/login/"
method="post">
<label for="username">Username:</label>
<input type="text" name="username"
required="required" /></title><br />
<label for="password">Password:</label>
<input type="password" name="password"
required="required" />
<input type="submit" value="Submit" />
</form>
Hasil :
Contoh Form Search Input
<form action="http://www.example.org/search.php">
<p>Search:</p>
<input type="search" name="search" />
<input type="submit" value="Search" />
</form>
Hasil :
Example Form
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action="http://www.example.com/review.php" method="get">
<fieldset>
<legend>
Your Details:
</legend>
<label>
Name:
<input type="text" name="name" size="30" maxlength="100">
</label>
<br />
<label>
Email:
<input type="email" name="email" size="30" maxlength="100">
</label>
<br />
</fieldset>
<br />
<fieldset>
<legend>
Your Review:
</legend>
<p>
<label for="hear-about">
How did you hear about us?
</label>
<select name="referrer" id="hear-about">
<option value="google">Google</option>
<option value="friend">Friend</option>
<option value="advert">Advert</option>
<option value="other">Other</option>
</select>
</p>
<p>
Would you visit again?
<br />
<label>
<input type="radio" name="rating" value="yes" />
Yes
</label>
<label>
<input type="radio" name="rating" value="no" />
No
</label>
<label>
<input type="radio" name="rating" value="maybe" />
Maybe
</label>
</p>
<p>
<label for="comments">
Comments:
</label>
<br />
<textarea rows="4" cols="40" id="comments">
</textarea>
</p>
<label>
<input type="checkbox" name="subscribe" checked="checked" />
Sign me up for email updates
</label>
<br />
<input type="submit" value="Submit review" />
</fieldset>
</form>
</body>
</html>
Hasil:
No comments:
Post a Comment
Komentar yang bermutu Insyaallah akan mendapatkan berkah