表單form元素的一些簡單實現(xiàn)代碼以注冊為例

字號:


    代碼實現(xiàn)方式:
    代碼如下:
    <!doctype html>
    <head>
    <title> new document </title>
    <meta name=generator content=editplus>
    <meta name=author content=>
    <meta name=keywords content=>
    <meta name=description content=>
    <meta charset=utf-8>
    <style type=text/css>
    div{ width:35%;margin-left:32%;}
    </style>
    </head>
    <body >
    <div>
    <form class=f1 action=http://www.baidu.com method=get >
    <fieldset >
    <legend>表單的注冊</legend>
    <table width=100% >
    <tbody>
    <tr ><td class=“l(fā)eft” width=40% align=right><label for=t1>姓 名:</label></td>
    <td class=right><input type=text id=t1 name=name></td>
    </tr>
    <tr><td class=“l(fā)eft” width=40% align=right><label for=password1>密 碼:</label></td>
    <td class=right><input id=password1 type=password name=password /></td>
    </tr>
    <tr><td class=“l(fā)eft” width=40% align=right><label for=e1>郵 箱:</label></td>
    <td class=right><input type=email id=e1 name=youxiang ></td>
    </tr>
    <tr><td class=“l(fā)eft” width=40% align=right><label for=1>性 別:</label></td>
    <td class=right><input type=radio id=1 name=ssex value=nan />男<!-- name設置成一樣的就行了-->
    <input type=radio id=2 name=ssex value=nv />女
    </td>
    </tr>
    <tr><td class=“l(fā)eft” width=40% align=right>地 區(qū):</td>
    <td><select id=selc name=place>
    <option value=quanzhou>泉州</option>
    <option value=xiamen>廈門</option>
    <option value=zhangzhou >漳州</option>
    </select>
    </td>
    </tr>
    <tr><td class=“l(fā)eft” width=40% align=right><label for=txtarea>簡 介:</label></td>
    <td><textarea id=txtarea></textarea></td>
    </tr>
    <tr><td class=“l(fā)eft” width=40% align=right>興 趣:</td>
    <td><input type=checkbox id=cbox1 name=dushu value=c1>讀書
    <input type=checkbox id=cbox2 name=yundong value=c2>運動
    <input type=checkbox id=cbox3name=chihe value=c3>吃喝
    </td>
    </tr>
    <tr><td class=“l(fā)eft” width=40% align=right>上 傳:</td>
    <td> <input type=file id=f1 name=shangchuan value=file1 /></td>
    </tr>
    <tr><td class=“l(fā)eft” width=40% align=right rowspan=2>
    <input id=submit1 type=submit value=提 交 />
    </td>
    <td> <input id=reset1 type=reset value=重 置 />
    </td>
    </tr>
    </tbody>
    </table>
    </fieldset>
    </form>
    </div>
    </body>
    </html>
    注意其中的代碼label實現(xiàn)的功能是使鼠標在點擊文本的時候自動聚焦在文本框里!