masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial borang pengesahan pembangunan JS susun atur hadapan

Borang pengesahan

Mari kita pelajari cara menggunakan js untuk mengesahkan borang

Kod html adalah seperti berikut: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="div">
        <form>
            <label>用户名:</label>
            <input type="text" class="name" id="name">
            <div id="sp" class="div"></div>                
            <label>密 码:</label>
            <input type="password" class="pwd" id="pwd">
            <div id="sp1" class="div"></div>
            <label>邮 箱:</label>
            <input type="text" class="email" id="email">
            <div id="sp2" class="div"></div>
            <label>爱 好:</label>
            <textarea rows="5" cols="30" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>

Mari kita lihat pemaparan pratonton berikut:

布局_1.png

Sebelum memproses gaya halaman, mari kita lihat kod

untuk setiap kotak teks dahulu atau medan teks, seperti berikut Terdapat teg div untuk apa ini Apabila kami menggunakan javascript untuk mengesahkan borang, jika tiada kandungan input, kami akan memberikan mesej segera dan meletakkan kandungan mesej gesaan. div tag

Dalam kod di atas, kita melihat id dan atribut kelas, kita boleh menggunakannya untuk mencipta gaya

Ini tanpa menggunakan css untuk memproses gaya, jadi ia akan kelihatan hodoh. Mari seterusnya Hanya gunakan css untuk menukar gaya

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title></title> </head> <body>     <div id="div">         <form>             <label>用户名:</label>             <input type="text" class="name" id="name">             <div id="sp" class="div"></div>                             <label>密 码:</label>             <input type="password" class="pwd" id="pwd">             <div id="sp1" class="div"></div>             <label>邮 箱:</label>             <input type="text" class="email" id="email">             <div id="sp2" class="div"></div>             <label>爱 好:</label>             <textarea rows="5" cols="30" class="txt" id="txt"></textarea>             <div id="sp3" class="div"></div>             <input type="button" class="sub" value="注册" id="sub">         </form>     </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492454 permainan