简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Gaya tutorial borang pengesahan pembangunan JS (1)

Mari kita lihat kod html

<!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="40" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>

Kod susun atur asas adalah seperti berikut: 

<style type="text/css">
        *{margin:0;padding:0;}
        #div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
            padding-top:20px;}
        .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .pwd{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .txt{width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;}
        .sub{width:100px;height:30px;padding-left:0px;}

        .sub:hover{background:#ffaad5;}
        .div{width:200px;height:30px;margin:0 auto;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;
           }
    </style>

Kod lengkap adalah seperti berikut: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
            padding-top:20px;}
        .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .pwd{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .txt{width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;}
        .sub{width:100px;height:30px;padding-left:0px;}

        .sub:hover{background:#ffaad5;}
        .div{width:200px;height:30px;margin:0 auto;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;
           }
    </style>
    </style>
</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="40" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title></title>     <style type="text/css">         *{margin:0;padding:0;}         #div{width:410px;height:400px;background:#46a3ff;padding-left:16px;             padding-top:20px;}         .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}         .pwd{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}         .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}         .txt{width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;}         .sub{width:100px;height:30px;padding-left:0px;}         .sub:hover{background:#ffaad5;}         .div{width:200px;height:30px;margin:0 auto;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;            }     </style>     </style> </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="40" 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)  492119 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！