html-表單的設計

時間  2019-12-10
標籤 html 表單 設計 欄目 HTML 简体版
原文   原文鏈接

1、表單的設計html

　　一、註冊表單頁面ide

<html>
    <head>
        <title>表單的練習</title>
        <script>
            
            function mousein(){
                var desc=document.getElementById("desc");
                if(desc.value=="請輸入描述信息！！！"){
                    desc.value="";
                }
            }

            function mouseout(){
                var desc=document.getElementById("desc");
                if(desc.value==""){
                    desc.value="請輸入描述信息！！！";
                }
            }


        </script>
    </head>
    <body>
        <form action="../img/1.jpg" method="GET">
            <table border="1px" align="center" cellpadding="10px" bgColor="pink" borderColor="blue"
             cellspacing="0px">
                <caption><font color="red" size="6px">註冊表單</font></caption>
                <tr>
                    <td>用戶名：</td>
                    <td><input type="text" name="username" /></td>
                </tr>
                <tr>
                    <td>密碼：</td>
                    <td><input type="password" name="password" /></td>
                </tr>
                <tr>
                    <td>確認密碼：</td>
                    <td><input type="password" name="password2" /></td>
                </tr>
                <tr>
                    <td>性別：</td>
                    <td>
                        <input type="radio" name="sex"  value="man"/>男
                        <input type="radio" name="sex" value="women"/>女
                    </td>
                </tr>
                <tr>
                    <td>暱稱：</td>
                    <td><input type="password" name="nickname" /></td>
                </tr>
                <tr>
                    <td>郵箱：</td>
                    <td><input type="password" name="email" /></td>
                </tr>
                
                <tr>
                    <td>愛好：</td>
                    <td>
                        <input type="checkbox" name="hobby"  value="dianying"/>看電影
                        <input type="checkbox" name="hobby"  value="football"/>踢足球
                        <input type="checkbox" name="hobby"  value="basketball"/>打籃球
                        <input type="checkbox" name="hobby"  value="eat"/>美食
                    </td>
                </tr>
                <tr>
                    <td>城市：</td>
                    <td>
                        <select name="city" >
                            <option value="bj">北京</option>
                            <option value="sh">上海</option>
                            <option value="gz">廣州</option>
                            <option value="sz">深圳</option>
                            <option value="nj">南京</option>
                            <option value="wh">武漢</option>
                            <option value="hz杭州">杭州</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>頭像：</td>
                    <td><input type="file" name="picfile" /></td>
                </tr>
                <tr>
                    <td>描述信息：</td>
                    <td>
                        <textarea id="desc" rows="5" cols="50" name="description" 
                         onfocus="mousein()" onblur="mouseout()">請輸入描述信息！！！</textarea>
                    </td>
                </tr>
                <tr>
                    <td>驗證碼：</td>
                    <td>
                        <input type="text" name="yanzhengma" />
                        <img width="100px" height="21.33px" src="../img/1.jpg" />
                    </td>
                </tr>

                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="提交" />
                        <input type="reset" value="重置" />
                    </td>
                </tr>
            </table>    
        </form>
    </body>
</html>
註冊表單頁面
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程