Komentar: Saya yakin Anda memiliki pemahaman yang baik tentang fokus otomatis dan teks html5. Untuk menggunakan fungsi fokus otomatis HTML5, Anda hanya perlu menambahkan atribut autofocus di bidang Formulir. Pertama, lihat contoh kode berikut untuk menggunakan HTML AutoFocus dan placeholder Text. Teman yang tertarik dapat mempelajarinya.
Pertama -tama lihat contoh kode berikut untuk menggunakan HTML Autofocus dan Text Placeholder
<! Doctype html> 2: <html>
<head>
<title> Daftarkan akun </iteme>
<meta charset = "UTF-8">
</head>
<body>
<Form Method = "POST" ACTION = "GOTO">
<fieldset>
<Gegend> Pendaftaran Pengguna Baru </agendang>
<Ol>
<li>
<label untuk = "name"> Email </label>
<input type = "email">
</li>
<li>
<label untuk = "user"> Nama pengguna </label>
<input type = "text">
</li>
<li>
<Label untuk = "NickName"> Nama tampilan </LABEL>
<input type = "text">
</li>
<li>
<Label untuk = "Kata Sandi"> Kata Sandi </Label>
<input type = "password">
</li>
<li>
<label untuk = "konfirmasi_password"> Konfirmasi kata sandi </label>
<input type = "password">
</li>
</ol>
</fieldset>
</form>
</body>
</html>
Menggunakan autofocus
Untuk menggunakan fungsi fokus otomatis HTML5, cukup tambahkan properti autofocus di bidang formulir
Misalnya, Anda ingin secara otomatis menemukan kursor pada kotak surat Formulir Pertama Formulir ketika halaman dimuat dan meningkatkan efisiensi input.
<li>
<label untuk = "name"> Email </label>
<input type = "email" autofocus>
</li>
Perlu dicatat bahwa jika beberapa properti fokus otomatis diatur di halaman, kursor pengguna hanya akan ditempatkan di bidang formulir terakhir dengan set properti autofocus.
Gunakan teks placeholder
Penggunaan teks placeholder terbesar adalah menjelaskan kepada pengguna cara mengisi formulir dengan benar. Artinya, prompt input dibuat. Untuk menggunakan teks placeholder, cukup tambahkan atribut placeholder di bidang input
Di bawah ini adalah bidang formulir input menggunakan atribut placeholder
<Ol>
<li>
<label untuk = "name"> Email </label>
<input type = "email" autofocus placeholder = "Harap masukkan alamat email yang valid">
</li>
<li>
<label untuk = "user"> Nama pengguna </label>
<input type = "text" placeholder = "masukkan nama pengguna">
</li>
<li>
<Label untuk = "NickName"> Nama tampilan </LABEL>
<input type = "text" placeholder = "masukkan nama panggilan">
</li>
<li>
<Label untuk = "Kata Sandi"> Kata Sandi </Label>
<input type = "kata sandi" placeholder = "masukkan kata sandi">
</li>
<li>
<label untuk = "konfirmasi_password"> Konfirmasi kata sandi </label>
<input type = "kata sandi" placeholder = "masukkan kata sandi lagi">
</li>
</ol>
Efek operasi adalah sebagai berikut
Apakah akan mengaktifkan autocomplete
Atribut AutoComplete diperkenalkan di HTML5. Digunakan untuk memberi tahu browser apakah bidang formulir saat ini diisi secara otomatis dengan data. Beberapa browser akan mengingat data yang dimasukkan oleh pengguna sebelumnya, dan dalam beberapa kasus kami mungkin tidak ingin pengguna menggunakan data catatan, terutama mirip dengan kata sandi.
Tutup AutoComplete
<input type = "kata sandi" autocomplete = "off" placeholder = "masukkan kata sandi">
Cukup atur nilai atuocomplete ke OFF untuk mencegah penyelesaian otomatis.