Bagaimana untuk menggunakan jenis input e-mel dalam HTML?-html tutorial-php.cn

Bagaimana untuk menggunakan jenis input e-mel dalam HTML?

WBOY

Lepaskan： 2023-09-05 13:52:30

ke hadapan

887 orang telah melayarinya

Bagaimana untuk menggunakan jenis input e-mel dalam HTML?

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Bagaimana untuk menggunakan jenis input e-mel dalam HTML?

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>
Salin selepas log masuk

<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>
Salin selepas log masuk

Bagaimana untuk menggunakan jenis input e-mel dalam HTML?

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> Salin selepas log masuk

<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> Salin selepas log masuk

<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>
Salin selepas log masuk

<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>
Salin selepas log masuk