首页 > 代码库 > 学习第十二

学习第十二

2024-08-23 18:24:24   221人阅读

今天打好了一份慢慢的表单内容。

<script type="text/javascript">
    var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省","河南省"];
var arr_city = [
                ["请选择城市/地区"],
                ["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],
                [‘宝山区‘,‘长宁区‘,‘丰贤区‘, ‘虹口区‘,‘黄浦区‘,‘青浦区‘,‘南汇区‘,‘徐汇区‘,‘卢湾区‘],
                [‘和平区‘, ‘河西区‘, ‘南开区‘, ‘河北区‘, ‘河东区‘, ‘红桥区‘, ‘塘古区‘, ‘开发区‘],
                [‘俞中区‘, ‘南岸区‘, ‘江北区‘, ‘沙坪坝区‘, ‘九龙坡区‘, ‘渝北区‘, ‘大渡口区‘, ‘北碚区‘],
                [‘福田区‘, ‘罗湖区‘, ‘盐田区‘, ‘宝安区‘, ‘龙岗区‘, ‘南山区‘, ‘深圳周边‘],
                [‘广州市‘,‘惠州市‘,‘汕头市‘,‘珠海市‘,‘佛山市‘,‘中山市‘,‘东莞市‘],
                [‘‘]
            ];
    function=select_change(index)                        //实现选择功能
    {
            var city = document.form1.city                //定义一个city数组
            city.length = 0;                            //定义初始值为0
            city.length= arr_city[index].length;        //附值 从0开始
            for (var i=0; i<arr_city[index].length;i++) //循环增加+1个option
            {
                city options[i].text=arr_city[index][i];
                city options[i].value=arr_city[index][i];//定义变量的位置
            }

        }
    function init()                                        //实现同步功能
    {
        var province=document.form1.province;
        var city=document.form1.city;
        province.length=arr_province.length;
        for(var i=0 ; i<arr_province.length;i++)
            {
            province options[i].text=arr_province[index][i];
            province options[i].value=arr_province[index][i];
            }
            var index=0;                                //指定省份当前的默认选中索引号
            province.selectedIndex=index;
            city.length=arr_city[index].length;
            for(var j=0; j<arr_city[index].length;j++)
            {
                city.options[j].text=arr_city[index][j];
                city.options[j].value=arr_city[index][j];

            }
    }
    </script>
</head>
<body onl oad="init()">
    <form name="form1" id="form1"  method="post" action="register.php" enctype="multipart/form-data">
    <!--创建表格 方法选择post 行为是注册.php 增加一个表格-->
        <table wight="600"align="center" border="1" borderColor="#f0f0f0" cellpadding="5" style="border-collapse:collapse;">
        <!-- 创建表单 collapse 折叠闭合 很细的表框-->
        <tr>
            <td colspan="2"><b>收费表</b></td> <!--colspan从第二个字开始-->
        </tr>
        <tr>
            <td align="right" width="100">用户:</td>
            <td><input type="text" name="username" size="30" placeholder="请输入你的名字"maxlength="20"/></td> <!--增加文本 value:属性值可显示-->
        </tr>
        <tr>
            <td align="right" >密码:</td>
            <td><input type="password" name="userpdw" size="30" placeholder="请再次输入你的密码" maxlength="20"/></td>
        </tr>
        <tr>
            <td align="right">重复密码:</td>
            <td><input type="password" name="repdw" size="30" placeholder="请再次输入你的密码" maxlength="20"/></td>
        </tr>
        <tr>
            <td align="right">真是姓名:</td>
            <td><input type="text" name="name" size="30"placeholder="请填写您的中文名字"/></td>
        </tr>
        <tr>
            <td align="right">性别:</td>
            <td>
                <input type="radio" name="sex" checked="checkde" value=http://www.mamicode.com/"先生"/>先生
                <input type="radio" name="sex"  value=http://www.mamicode.com/"女士"/>女士
                <input type="radio" name="sex"  value=http://www.mamicode.com/"gay"/>gay
            </td>
        <tr>
            <td align="right">付款方式:</td>
            <td>
                <input type="checkbox" name="hobby" checked="checked" value=http://www.mamicode.com/"微信支付"/>微信支付
                <input type="checkbox" name="hobby" checked="checked" value=http://www.mamicode.com/"支付宝"/>支付宝支付
                <input type="checkbox" name="hobby" checked="checked" value=http://www.mamicode.com/"支付宝"/>银联支付
                <input type="checkbox" name="hobby" checked="checked" value=http://www.mamicode.com/"支付宝"/>信用卡支付
                <input type="checkbox" name="hobby"  value=http://www.mamicode.com/"支付宝"/>现金支付

            </td>
        <tr>
            <td align="right">所在地</td>
            <td>
                <!--<select name="place">
                <option value=http://www.mamicode.com/"" selected="selected">请选择所在地</option>
                <option value=http://www.mamicode.com/"" >泰国</option>
                <option value=http://www.mamicode.com/"" >日本</option>
                <option value=http://www.mamicode.com/"">中国</option>
                </select>-->
                <form name="form2">
                请选择所在地：<select name="province" onchange="select_change(this.selectedIndex)" style="width:130px;"></select><!--下拉列表-->
                城市：<select name="city"></select>
                </form>
            </td>
        <tr>
            <td align="right">上传头像</td>
            <td><input type="file" name="uploadfile"/></td>
        </tr>
        <tr>
            <td align="right">个人信息</td>
            <td><textarea name="intro" cols="40" rows="5"> </textarea> </td>
        </tr>
        <tr>
            <td align="right">&nbsp</td>
            <td>
                <input type="submit" value=http://www.mamicode.com/"提交表格"/>
                <input type="reset" value=http://www.mamicode.com/"清空内容"/>
                <input type="button" value=http://www.mamicode.com/"提交表格"
                onclick="javascript:this.form.submit()"/>
                <input type="image" img src=http://www.mamicode.com/"jd1.png"/>
            </td>
        </tr>
        </table>
    </form>
</body>

 

学习第十二


联系
我们