注册表单

秒速五厘米 2022-08-13 13:39 164阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注册</title>
    <style type="text/css">
    table {border:#f0f0f0 double 4px; margin:10px auto;}
    .lable {
    	line-height:30px;
    	text-align: right;
    }
    tr{text-indent:10px;}
    th {
    	line-height:40px;
    	color: #F00;
    }
    </style>
    <script type="text/javascript">
    
        var city = [
     ["北京", "天津", "上海", "重庆"],
     ["南京", "苏州", "南通", "常州"],
     ["福州", "福安", "龙岩", "南平"],
     ["广州", "潮阳", "潮州", "澄海"],
     ["兰州", "白银", "定西", "敦煌"]
        ];
        function GetCity() {
            var Province = document.getElementById("province");
            var City = document.getElementById("city");
            var ProvinceCity = city[Province.selectedIndex - 1];
            City.length = 1;
            for( var i=0 ; i < city.length ; i++)
            {
                City[1 + i] = new Option(ProvinceCity[i], ProvinceCity[i]);
            }
        }
    function GetSex(){
        var radio = document.getElementsByName('Sex');
        var value = null;
    		for (var i = 0 ; i < radio.length; i++)
    		{
    		    if (radio[i].checked == true)
    			{
    		        return radio[i].value;
    			}
    		}
    		return value;
    }
    function GetProvince() {
        var lstprovince = document.getElementById("province");
        var select = lstprovince.options[lstprovince.selectedIndex].value;
        return select;
    
    }
    function ShowCity() {
        var lstcity = document.getElementById("city");
        var select = lstcity.options[lstcity.selectedIndex].value;
        return select;
    
    }
    function GetTelent() {
        var TelentList = document.getElementById("Telent");
        var TelentArray = [];
        var opt;
    
        for(var i = 0; i < TelentList.options.length ; i++)
        {
            opt = TelentList.options[i];
            if(opt.selected)
            {
                TelentArray.push(opt.value);
            }
        }
        return TelentArray.join(",");
    }
    
    function GetHobby() {
        var checkbox = document.getElementsByName('hobby');
        var HobbyArray = [];
        for(var i = 0 ; i < checkbox.length ; i ++)
        {
            if(checkbox[i].checked == true)
            {
                HobbyArray.push(checkbox[i].value);
            }
    
        }
        return  HobbyArray.join(",");
    }
    function GetBirthday(){
        var year = document.getElementById('year');
        var syear = year.options[year.selectedIndex-1].value;
        var month = document.getElementById('month');
        var smonth = month.options[month.selectedIndex-1].value;
        return syear+"年"+smonth+"月";
    }
    function Submit(){
    	var Name = document.getElementById('name').value;
    	var Sex = GetSex();
    	var Province = GetProvince();
    	var City = ShowCity();
    	var Email = document.getElementById("email").value;
    	var Tel = document.getElementById("tel").value;
    	var Telent = GetTelent();
    	var Hobby = GetHobby();
    	var photo = document.getElementById('photo').value;
    	var Birthday = GetBirthday();
    	var tips = document.getElementById('other').value;
    	alert("用户名：" + Name + "\n性别：" + Sex + "\n籍贯：" + Province + City + "市\n邮箱：" + Email + "\n手机号：" + Tel + "\n特长：" + Telent + "\n爱好：" + Hobby + "\n美照:" + photo + "\n出生年月:" + Birthday+"\n备注:"+tips);
    }
    </script>
    </head>
    
    <body>
        <form id="form1">
                <table width="500" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <th colspan="2" scope="col">请输入个人信息</th>
                    </tr>
                    <tr>
                        <td class="lable">用户名</td>
                        <td>
                            <input type="text" name="name" id="name" style="color:#ccc; font-style:italic;" value="如:王二" οnfοcus=" if (value == '如:王二') { value = ''; } this.style.color = '#000'; this.style.fontStyle = 'normal';" οnblur="    if (value == '') { value = '如:王二'; this.style.color = '#ccc'; this.style.fontStyle = 'italic'; alert('请输入用户名'); }" />
                        </td>
                    </tr>
                    <tr>
                        <td class="lable">密码</td>
                        <td>
                            <input type="password" name="password"  id="password" value="请输入6~12位字母，数字，符号"  />
                        </td>
                    </tr>
                    <tr>
                        <td class="lable">确认密码</td>
                        <td>
                            <input type="password" name="repassword" id="repassword" />
                        </td>
                    </tr>
                    <tr>
                        <td class="lable">性别</td>
                        <td>
                            <p>
                                <label>
                                    <input type="radio" name="Sex" value="男" id="Sex_0" checked="checked" />
                                    男
                                </label>
                                <label>
                                    <input type="radio" name="Sex" value="女" id="Sex_1" />
                                    女
                                </label>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td class="lable">籍贯</td>
                        <td>
    
                            <select name="province" id="province" οnchange="GetCity()">
                                <option value="0">----请选择省份----</option>
                                <option value="直辖市">直辖市</option>
                                <option value="江苏省">江苏省</option>
                                <option value="福建省">福建省</option>
                                <option value="广东省">广东省</option>
                                <option value="甘肃省">甘肃省</option>
                            </select>
                            <select name="city" id="city">
                                <option value="0">----请选择所在城市----</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="lable">Email</td>
                        <td>
                            <input type="text" name="email" id="email" style="color:#ccc; font-style:italic;"  value="如：12345@qq.com" οnfοcus="this.style.color = '#000'; this.style.fontStyle = 'normal'; if (value == '如：12345@qq.com') { value = '';}" οnblur="    if (this.value == '') { this.value = '如：12345@qq.com'; this.style.color = '#ccc'; this.style.fontStyle = 'italic'; alert('请输入邮箱'); }" />
                        </td>
                    </tr>
                    <tr>
                        <td class="lable">手机号</td>
                        <td><input type="text" name="tel"
                                    id="tel" 
                                   style="color:#ccc; font-style:italic;"  
                                   value="如：12345678901" 
                                   οnfοcus="if (value == '如：12345678901'){ value = ''; this.style.color = '#000'; this.style.fontStyle = 'normal'; }"οnblur="if (this.value == ''){this.value = '如：12345678901';this.style.color = '#ccc'; this.style.fontStyle = 'italic'; alert('请输入手机号');}" /></td>
                    </tr>
                    <tr>
                        <td class="lable">专业擅长</td>
                        <td>
                            <select name="Telent" id="Telent" multiple="multiple">
                                <option value="">----请选择专长----</option>
                                <option value="游泳">游泳</option>
                                <option value="打球">打球</option>
                                <option value="吃包子">吃包子</option>
                                <option value="打麻将">打麻将</option>
                                <option value="吹牛">吹牛</option>
                                <option value="其他">其他</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="lable">业余爱好</td>
                        <td>
    
                            <p>
                                <label>
                                    <input type="checkbox" name="hobby" value="Java" id="hobby_0" />
                                    Java
                                </label>
                                <label>
                                    <input type="checkbox" name="hobby" value=".NET" id="hobby_1" />
                                    .NET
                                </label>
                                <label>
                                    <input type="checkbox" name="hobby" value="C++" id="hobby_2" />
                                    C++
                                </label>
    
                                <label>
                                    <input type="checkbox" name="hobby" value="C" id="hobby_3" />
                                    C
                                </label>
                                <label>
                                    <input type="checkbox" name="hobby" value="Android" id="hobby_4" />
                                    Android
                                </label>
                                <label>
                                    <input type="checkbox" name="hobby" value="php" id="hobby_5" />
                                    php
                                </label>
                            </p>
                        </td>
                    </tr>
            <tr>
                <td class="lable">个人照片</td>
                <td>
                   <input type="file" name="photo" id="photo" />
                </td>
            </tr>
            <tr>
                <td class="lable">出生年月</td>
                <td>
                    <select name="year" id="year">
                        <option value="">----请选择出生年份----</option>
                        <option value="1990">1990</option>
                        <option value="1990">1991</option>
                        <option value="1990">1992</option>
                        <option value="1990">1993</option>
                        <option value="1990">1994</option>
                        <option value="1990">1995</option>
                        <option value="1990">1996</option>
                    </select>
                    <select name="month" id="month">
                        <option value="">----请选择出生年月份----</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="lable">备注信息</td>
                <td>
                    <textarea name="other" id="other" cols="45" rows="5" style="color:#ccc; font-style:italic" οnfοcus="if (this.value == '个性备注...') { this.value = ''; } this.style.color = '#000'; this.style.fontStyle = 'normal';" οnblur="    if (this.value == '') { this.value = '个性备注...'; this.style.color = '#ccc'; this.style.fontStyle = 'italic'; }">个性备注...</textarea>
    
                </td>
            </tr>
            <tr>
                <td class="lable"> </td>
                <td>
                    <button type="submit" οnclick="Submit()">提交</button>
                    <button type="reset">重置</button>
                </td>
            </tr>
            </table>
        </form>
    </body>
    </html>