<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册及问卷调查</title>
<!-- CSS -->
</head>
<style>
body{
margin:0px;
padding:0px;
background:url("123.jpg") no-repeat left top; background-size:100%;
color:#C3C;
}
#fset{
text-align:center; /*让边框里面的文本居中*/
width:auto;
border:0;
margin-top:50px;
}
input:enabled{ /*选择每个启用的*/
margin-left:10px;
margin-top:20px;
height:20px;
padding:5px;
border-radius:15px;
outline:medium;
background-color:#FCC;
/*去除input阴影和边框*/
outline-color: invert ;
outline-style: none ;
outline-width: 0px ;
border: none ;
text-shadow: none ;
}
#sex{
margin-left:-100px;
}
#birth{
margin-left:0px;
}
#birth input{
width:169px;
}
#like{
margin-left:50px;
}
#like input:nth-of-type(4){
margin-left:62px;
}
#ok input{
border-radius:20px;
padding:5px;
width:60px;
height:auto;
}
</style>
<body>
<div id="example1">
</div>
<form name="registration"action="" method="get" autocomplete="on">
<fieldset id="fset">
<legend>注册及问卷调查</legend>
学号:<input type="text" name="userid" placeholder="请输入学号" autofocus required><br/>
名字:<input type="text" name="username" placeholder="请输入用户名" autocomplete="on"><br/>
密码:<input type="password" name="psw" placeholder="请输入密码"><br/>
<div id="sex">
性别:<input type="radio" value="female" name="gender"/>女
<input type="radio" value="male" name="gender"/>男
</div>
电话:<input type="tekyxt" name="phone" placeholder="请输入电话号码" ><br/>
<div id="birth">
生日:<input type="date" name="birthday"placeholder=" 年 /月 /日"><br/>
</div>
邮箱:<input type="email" name="email" placeholder="请输入注册邮箱" /><br/>
<div id="like">
爱好:
<input type="checkbox" value="篮球" name="interest" checked/>篮球
<input type="checkbox" value="足球" name="interest"/>足球
<input type="checkbox" value="羽毛球" name="interest" checked/>羽毛球<br/>
<input type="checkbox" value="乒乓球" name="interest" checked/>乒乓球
<input type="checkbox" value="唱歌" name="interest"/>唱歌
<input type="checkbox" value="跳舞" name="interest" checked/>跳舞 <br/>
<input type="checkbox" value="看电影" name="interest" checked/>看电影
<input type="checkbox" value="看书" name="interest"/>看书
<input type="checkbox" value="看书" name="interest"/>零食
<br/><br/>
</div>
<div style="float:left; width:100%;">
<span style="height:100px; float:left; margin-left:410px">建议:</span>
<textarea name="suggest" rows="5" cols="60" style="float:left;"></textarea>
</div>
</form>
<b><a href="#">了解更多</a></b><br/>
<audio controls>
<source src="#" >
<source src="#" >
</audio>
<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" /><br/>
<div id="ok">
<input type="submit" onclick="aa()" value="提交" /><input type="submit" value="重置" />
</div>
<script>
function aa(){
var one=document.getElementsByTagName("input")[0].value;//返回的是一个类数组
var two=document.getElementsByTagName("input")[1].value;
var three=document.getElementsByTagName("input")[2].value;
var four=document.getElementsByTagName("input")[3].value;
var five=document.getElementsByTagName("input")[4].value;
var six=document.getElementsByTagName("input")[5].value;
var seven=document.getElementsByTagName("input")[6].value;
var eight=document.getElementsByTagName("input")[7].value;
var nine=document.getElementsByTagName("input")[8].value;
var ten=document.getElementsByTagName("input")[9].value;
var aa=document.getElementsByTagName("input")[10].value;
var bb=document.getElementsByTagName("input")[11].value;
var cc=document.getElementsByTagName("input")[12].value;
var dd=document.getElementsByTagName("input")[13].value;
var ee=document.getElementsByTagName("input")[14].value;
var ff=document.getElementsByTagName("input")[15].value;
var hh=document.getElementsByTagName("input")[16].value;
var gg=document.getElementsByTagName("textarea")[0].value;
var radio=document.getElementsByName("gender"); //这里不要写input,因为input好多,写它的name属性的gender
for(var i=0;i<radio.length;i++){
if(radio[i].checked==true){
xingbie=radio[i].value;
break;
}
}
var str=document.getElementsByName ("interest");
var selectvalue=new Array();
for(var i=0;i<str.length;i++){
if(str[i].checked==true){
selectvalue.push(str[i].value);
}
}
alert("学号:"+one+"\n名字:"+two+"\n密码:"+three+"\n性别:"+xingbie+
"\n电话:"+six+"\n生日:"+seven+"\n邮箱:"+eight+"\n爱好:"+selectvalue
+radio)
}
</script>
</body>
</html>
【纯CSS+DIV】两年前我用纯CSS+DIV写的一个登录界面(太不堪了)
猜你喜欢
转载自blog.csdn.net/weixin_42554191/article/details/105883233
今日推荐
周排行