<!DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>文档的标题</title>
<script>
function getvalue(){
varvalue=document.getElementById("range").value;//document所有文本.getElementById获取所有id
varage=document.getElementById("age");
age.innerText=value;//innerText赋值文本框
}
function checkName(){
varuserName=document.getElementById("userName");
varr=document.getElementById("r");
var flag=userName.checkValidity();//文本的核对是否符合正则表达式（但不会判断不为空的状态）
if(userName.value.length==0){r.innerText="用户名不能为空"}
else{
if(flag)r.innerText="用户名格式正确";
else r.innerText="用户名格式不正确";
}
}
function checkPSW(){
varpsw=document.getElementById("psw").value.length;
var r2=document.getElementById("r2");
if(psw<3){r2.innerText="弱";}
else if(psw>=3 &&psw<6){r2.innerText="中";}
else {r2.innerText="强";}
}
function checkPSWsame(){
varpsw=document.getElementById("psw").value;
varpw2=document.getElementById("pw2").value;//文本一致：if判断两个文本的值是否==
varr3=document.getElementById("r3");
if(psw==pw2){r3.innerText="密码一致";}
else{r3.innerText="密码不一致";}
}
</script>
</head>
<body>
<formaction="ok.html" method="post" id="myform"novalidate="true"><!--取消表单验证-->
<tableborder="1">
<tr>
<td>用户名</td>
<td><input type="text"autofocus="autofocus" placeholder="请输入用户名" pattern="^[A-z0-9]{4,}$"οnblur="checkName()" id="userName">
<spanid="r"></span>
<br>
<!--autofocus自动获取焦点required控制不为空placeholder占用符pattern（一个正则表达式中括号）-->
<span style="color:red;font-size:12px">必须是英文或数字且用户名不少于4位</span></td>
</tr>
<tr>
<td>密码</td>
<td><inputtype="password" placeholder="请输入密码" οnkeyup="checkPSW()"id="psw">
<spanid="r2"></span></td>
</tr>
<tr>
<td>确认密码</td>
<td><inputtype="password" placeholder="请输入确认密码" οnblur="checkPSWsame()" id="pw2">
<spanid="r3"></span></td>
</tr>
<tr>
<td>出生年月日</td>
<td><inputtype="date"></td>
</tr>
<tr>
<td>年龄：</td>
<td><inputtype="range" max="100" min="0"οnchange="getvalue()" id="range">
<spanid="age"></span></td>
</tr><!--最大值最小值，改变属性（使用funtion方法），id-->
<tr>
<td>性别：</td>
<td><inputtype="radio">男
<input type="radio">女</td>
</tr>
<tr>
<td>收入：</td>
<td><inputtype="number"></td>
</tr>
<tr>
<td>邮箱：</td>
<td> <input type="email" placeholder="请输入邮箱"required="required"></td>
</tr>
<tr>
<td>个人网站：</td>
<td>
<input type="url">
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select>
<option>北京</option>
<option>上海</option>
<optionselected="selected">广州</option>
<option>合肥</option>
<option>深圳</option>
<option>厦门</option>
<option>桂林</option>
</select>
</td>
</tr>
<tr>
<td>城市中的地区：</td>
<td><select>
<optgroup label="广东省">
<option>广州</option>
<option>茂名</option>
<option>湛江</option>
<option>深圳</option>
</optgroup>
<optgroup label="广西省">
<option>桂林</option>
<option></option>
<option></option>
<option></option>
</optgroup>
<optgroup label="湖南省">
<option>长沙</option>
<option></option>
<option></option>
<option></option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>交友目的：</td>
<td><selectsize="4">
<option>校友</option>
<option>同学</option>
<option>爱人</option>
<option>同行</option>
<option>亲戚</option>
<option>网友</option>
<option>其他</option>
</select>
</td>
</tr>
<tr>
<td>爱好：</td>
<td><input type="checkbox">美术
<input type="checkbox">音乐
<input type="checkbox">篮球
<input type="checkbox">逛街</td>
</tr>
<tr>
<td>照片上传：</td>
<td><inputtype="file"></td>
</tr>
<tr>
<td>自我介绍：</td>
<td><textarea rows="5"cols="40"></textarea>
</td>
</tr>
<tr>
<td colspan="2"><inputtype="submit" value="提交">
<input type="reset"value="取消"></td>
</tr>
</table>
</form>
</body>
</html>
