Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan jenis input e-mel dalam HTML?
Bagaimana untuk menggunakan jenis input e-mel dalam HTML?
- WBOYke hadapan
- 2023-09-05 13:52:30894semak imbas
E-mel ialah alat di internet di mana kita boleh menghantar e-mel rasmi kepada orang lain menggunakan alamat e-mel. Terdapat banyak penyedia perkhidmatan e-mel seperti Yahoo, Gmail, Hotmail, dll. Kami perlu mendaftar dengan penyedia perkhidmatan ini untuk menerima alamat e-mel pilihan kami. Alamat e-mel terdiri daripada dua bahagian - nama pengguna dan nama domain. Nama pengguna boleh terdiri daripada huruf besar atau huruf kecil, nombor, aksara khas dan noktah. Panjang maksimum nama pengguna ialah 64 aksara dan panjang maksimum nama domain ialah 253 aksara. Nama pengguna dan nama domain sentiasa dipisahkan oleh simbol "@". Kami memasukkan ID e-mel di banyak tempat dan anda mesti melihat bahawa halaman web sentiasa menerima alamat yang sah.
Dalam borang HTML, kami mencipta kawalan input satu baris jenis "e-mel". Setelah mel taip digunakan, ia secara automatik menyemak kesahihan alamat e-mel. Pengesahan alamat e-mel sememangnya sangat penting, jika tidak, pengguna juga mungkin memasukkan alamat e-mel yang salah. Walaupun ia tidak menyemak keseluruhan alamat e-mel, ia hanya menyemak sambungan @ dan TLD, iaitu domain peringkat atasan.
Mari belajar cara menggunakan e-mel dalam HTML.
Contoh
<html>
<body>
<form name="form1">
<label for="sub">Enter your e-mail id : </label>
<input type="email">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Dalam aplikasi ini, jika pengguna tidak memasukkan format alamat e-mel yang betul, ia akan memaparkan mesej ralat.
Kami juga boleh membuat kawalan e-mel kami menerima berbilang alamat e-mel. Contohnya, apabila kami mengarang e-mel, kami boleh menaip berbilang alamat dalam medan Kepada, Sk dan Skt. Jadi, jika anda juga ingin membuat kawalan sedemikian yang membolehkan berbilang alamat e-mel dimasukkan, maka anda boleh menggunakan sifat MULTIPLE.
Mari lihat contoh untuk menjelaskan konsep ini.
<html>
<body>
<form name="form1">
<table>
<tr>
<td>
<label for="to">To </label>
</td>
<td>
<input type="email" multiple>
</td>
</tr>
<tr>
<td>
<label for="cc">Cc </label>
</td>
<td>
<input type="email" multiple>
</td>
</tr>
<tr>
<td>
<label for="bcc">Bcc </label>
</td>
<td>
<input type="email" multiple>
</td>
</tr>
<tr>
<td></td><td>
<textarea rows="10" cols="50">
</textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
Dalam medan "Kepada" atau "Sk" atau "Skt", kita boleh memasukkan alamat e-mel berbilang penerima menggunakan koma (,) Katakan di tapak web anda, anda ingin menetapkan had pada bilangan aksara dalam alamat e-mel, maka anda boleh menggunakan atribut MINLENGTH dan MAXLENGTH dalam teg MINLENGTH akan menentukan bilangan minimum aksara yang boleh diterima oleh alamat e-mel, manakala MAXLENGTH akan mengehadkan bilangan maksimum aksara dalam alamat e-mel. Contoh
<html>
<body>
<form name="form1">
<label for="sub">Enter your e-mail id : </label>
<input type="email" minlength="15" maxlength="25">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Kandungan input tidak boleh melebihi had Setelah melebihi had, kursor akan berhenti menaip. Untuk menetapkan nilai lalai bagi kawalan e-mel, ini bermakna ID e-mel lalai akan muncul dalam medan teks e-mel (menggunakan atribut VALUE) dan bukannya medan teks kosong. Anda juga boleh menjadikannya medan yang diperlukan menggunakan atribut DIPERLUKAN. Contoh
<html>
<body>
<form name="form1">
<label for="sub">Enter your e-mail id : </label>
<input type="email" value="abc@gmail.com" required>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Jika dibiarkan kosong, ralat akan dipaparkan. Katakan, dalam laman web, format di mana alamat e-mel boleh dimasukkan perlu dipaparkan supaya pengguna boleh memasukkannya dengan mudah dalam format yang betul. Untuk tujuan ini, ruang letak boleh dibuat. Contoh
<html>
<body>
<form name="form1">
<label for="sub">Enter your e-mail id : </label>
<input type="email" placeholder="abc@gmail.com">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Akhir sekali, mari kita bincangkan atribut corak, yang dengannya kita boleh mengehadkan input alamat e-mel kepada domain tertentu sahaja. Ia tidak akan menerima alamat e-mel daripada domain lain. Contoh
<html>
<body>
<form name="form1">
<label for="sub">Enter your e-mail id : </label>
<input type="email" pattern=".+@gmail\.com"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Menurut aplikasi ini, hanya alamat gmail dibenarkan. Atas ialah kandungan terperinci Bagaimana untuk menggunakan jenis input e-mel dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!