zoukankan      html  css  js  c++  java
  • html-表单的设计

    一、表单的设计

      1、注册表单页面

    <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>
    注册表单页面
  • 相关阅读:
    Vue——data中的属性规范
    python的字符串用法
    python笔录第一周
    Mac下python版本的更新
    我的第一篇博客
    C语言-控制语句(循环)
    C语言-控制语句(分支与跳转)
    C语言-函数
    C语言-数组与指针
    C语言-堆和栈
  • 原文地址:https://www.cnblogs.com/ouyy/p/9846796.html
Copyright © 2011-2022 走看看