#56 membuat input password, url, email, tel, search dan hidden pada html
pada tutorial ini kita akan belajar cara membuat nilai beberapa atribut input type pada html, nilai atribut type dengan nilai password, url, email, tel, search dan hidden.
ada beberapa nilai atribut type yang akan kita pelajari di tutorial selanjutnya.
Membuat input password
nilai atribut type yaitu password akan membuat bidang teks satu baris yang mirip dengan input type=”text” tetapi teks password tidak ditampilkan saat pengguna memasukannya.
type password berguna untuk memasukkan sandi dengan aman. teks tidak bisa dibaca saat menulisnya dengan mengganti setiap karakter dengan simbol bintang (*) atau titik (•). tampilan karakter bervariasi tergantung pada browser dan Sistem Operasi yang digunakan.
membuat password bisa menggunakan placeholder supaya pengguna mengetahui bahwa input itu merupakan password.
Baca juga : membuat favicon pada website
Teks placeholder ditampilkan dalam teks biasa dan ditimpa secara otomatis saat pengguna mulai mengetik.
<!DOCTYPE html>
<html>
<head>
<title> input password pada html </title>
</head>
<body>
<input type="password" />
<br><br>
<input type="password" placeholder="Password" />
</body>
</html>Code language: HTML, XML (xml)
Membuat input url
input type=”url” digunakan untuk bidang masukan yang harus berisi alamat url. bidang url dapat divalidasi secara otomatis saat dikirim bergantung pada dukungan browser.
beberapa ponsel cerdas mengenali jenis url dan menambahkan .com ke keyboard untuk mencocokkan masukan url.
<!DOCTYPE html>
<html>
<head>
<title> input url pada html </title>
</head>
<body>
<input type="url">
<br><br>
<input type="url" placeholder="url website" />
</body>
</html>Code language: HTML, XML (xml)
Membuat input email
nilai atribut type email digunakan untuk masukan yang harus berisi alamat email.
alamaat email dapat divalidasi secara otomatis saat dikirimkan tergantung pada dukungan browser.
<!DOCTYPE html>
<html>
<head>
<title> input email pada html </title>
</head>
<body>
<input type="email">
<br><br>
<input type="email" placeholder="Email" />
</body>
</html>Code language: HTML, XML (xml)
Membuat input telepon
atribut type yang nilainya tel merupakan teks satu baris untuk memasukkan nomor telepon. nilai masukan tidak secara otomatis divalidasi ke format tertentu sebelum form dapat dikirim, karena format nomor telepon sangat bervariasi di seluruh dunia
<!DOCTYPE html>
<html>
<head>
<title> input telepon pada html </title>
</head>
<body>
<input type="tel">
<br><br>
<input type="tel" placeholder="Telepon" />
</body>
</html>Code language: HTML, XML (xml)
Membuat input search
input type=”search” digunakan untuk tujuan pencarian, pencarian ini berguna untuk mengumpulkan teks pendek yang akan digunakan sebagai parameter melakukan operasi pencarian.
bidang teks dan bidang pencarian sangat mirip, perbedaan diantara keduanya terutama terletak pada style: browser dapat menampilkan kontrol dengan cara yang berbeda sesuai dengan tujuannya.
<!DOCTYPE html>
<html>
<head>
<title> input search pada html </title>
</head>
<body>
<input type="search">
<br><br>
<input type="search" placeholder="Search" />
</body>
</html>Code language: HTML, XML (xml)
membuat input hidden
input hidden ini tersembuyi tidak akan terlihat oleh pengguna, tetapi nilainya akan dikirim ke server saat formulir dikirim.
bidang tersembunyi sering digunakan untuk menyimpan data ke database apa yang perlu diperbarui saat formulir dikirim
<!DOCTYPE html>
<html>
<head>
<title> input hidden pada html </title>
</head>
<body>
<input type="hidden" value="halaman tersembunyi" />
</body>
</html>Code language: HTML, XML (xml)jika kode diatas dicoba kita tidak akan melihat tampilan inputnya di browser, namun kita bisa melihat menggunakan alat pengembang browser atau klik kanan klik lihat sumber
Demikian cara membuat beberapa nilai atribut input type pada html, semoga bermanfaat 🙂
Pencarian di thohirdev:
- input type yang ada dihtml
- input type url, email, tel, hidden html
- fungsi dari type email dan lain lain
- input type email html