<!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="如:王二" onfocus=" if (value == '如:王二') { value = ''; } this.style.color = '#000'; this.style.fontStyle = 'normal';" onblur=" 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" onchange="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" onfocus="this.style.color = '#000'; this.style.fontStyle = 'normal'; if (value == '如：12345@qq.com') { value = '';}" onblur=" 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"
onfocus="if (value == '如：12345678901'){ value = ''; this.style.color = '#000'; this.style.fontStyle = 'normal'; }"onblur="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" onfocus="if (this.value == '个性备注...') { this.value = ''; } this.style.color = '#000'; this.style.fontStyle = 'normal';" onblur=" 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" onclick="Submit()">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
注册表单
最新推荐文章于 2025-12-27 19:25:02 发布
扫一扫
1747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
