前言：
近期的工作中是负责公司网站的维护，所以就得学习Web前端的知识…时常忘记，所以记录下，也算是学习Web的一个开篇吧！废话不多说，coding …
Ⅰ.简述
表单相关的标签：form、fieldset、legend、table、tr、td、input、select、option、textarea 等；
表单相关标签对应的部分属性：
| 标签 | 元素 |
|---|---|
| form | action、method、id、onsubmit |
| table | border、width、height、align、cellpadding、cellspacing |
| tr | align |
| td | width、colspan |
| input | type、id、name、value |
| select | name、id |
| option | value |
| textarea | id、name、rows、cols |
>
上面罗列了表单相关的标签和属性，都是HTML表单常用到的，看着就简单的标签属性，但是时间久了就容易忘了，所以个人觉得还是罗列出来比较好.
Ⅱ.表单练习
关于HTML表单的标签和元素在上面都罗列出，不懂的可以看下w3c文档，那么下面就自己代码记录起:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form test</title>
</head>
<body>
<form action="js_success.html" method="get" id="form" onsubmit="return check()">
<fieldset>
<legend>
Welocome me Login
</legend>
<table border="3px" width="50%" align="center" cellpadding="5px" cellspacing="0px" > <!--align="center" 整个表格居中-->
<tr align="center"> <!--align="center" 内容居中-->
<td width="20%">姓名：</td>
<td>
<input type="text" name="uname" id="uname" onchange="return checkUName()"/>
<span id="uNameSpan"></span>
</td>
</tr>
<tr align="center">
<td>密码: </td>
<td>
<input type="password" name="pwd" id="pwd" onchange="return checkPwd()"/>
<span id="pwdSpan"></span>
</td>
</tr>
<tr align="center">
<td>确认密码：</td>
<td>
<input type="password" name="pwd2" id="pwd2" onchange="return checkPwd2()"/>
<span id="pwd2Span"></span>
</td>
</tr>
<tr align="center">
<td>邮箱：</td>
<td>
<input type="text" name="email" id="email" onchange="return checkEmail()"/>
<span id="emailSpan"></span>
</td>
</tr>
<tr align="center">
<td>性别：</td>
<td>
<input type="radio" name="gender" id="man" value="man" />男
<input type="radio" name="gender" id="girl" value="girl"/>女
</td>
</tr>
<tr align="center">
<td>爱好：</td>
<td>
<input type="checkbox" name="like" id="eat" value="eat"/>吃饭
<input type="checkbox" name="like" id="play" value="play"/>玩耍
<input type="checkbox" name="like" id="sleep" value="sleep">休息
</td>
</tr>
<tr align="center">
<td>城市：</td>
<td>
<select name="city" id="city">
<option value="">请选择</option>
<option value="bj">北京</option>
<option value="sz">深圳</option>
<option value="gz">广州</option>
</select>
</td>
</tr>
<tr align="center">
<td>自我介绍：</td>
<td>
<textarea id="myInfo" name="myInfo" rows="5" cols="20">属于你个人的介绍，请填写</textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="立即注册"/>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
上面是HTML表单的标签，表单一般用于登录注册功能，那么就应该有表单的验证功能，下面用JavaScript实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form test</title>
</head>
<body>
//here：上面的代码
</body>
//javaScript代码
<script type="text/javascript">
/**
* 用户名的判断
* @returns {boolean}
*/
function checkUName(){
var uName = document.getElementById("uname");
var uNameText = myTrim(uName.value);
uName.value = uNameText;
var uNameSpan = document.getElementById("uNameSpan");
if(uNameText == ""){
uNameSpan.innerHTML = "用户名不允许为空!";
uNameSpan.style.color = "red";
uNameSpan.style.fontSize = 10;
return false;
}
var uNameRegex = /^[a-zA-Z_]\w+$/;
if(uNameRegex.test(uNameText)){
uNameSpan.innerHTML = "<img src='img/true.ico' />";
var imgs = uNameSpan.getElementsByTagName("img");
var img = imgs[0];
img.style.height = "15px";
}else{
uNameSpan.innerHTML = "用户名必须是字母数字或下划线, 不能以数字开头";
uNameSpan.style.color = "red";
uNameSpan.style.fontSize = 10;
return false;
}
return true;
}
/**
* 验证密码
*/
function checkPwd(){
var password = document.getElementById("pwd").value;
var pwdSpan = document.getElementById("pwdSpan");
if(password == ""){
pwdSpan.innerHTML = "密码不允许为空!";
pwdSpan.style.color = "red";
pwdSpan.style.fontSize = 10;
return false;
}
//密码必须为6-16位字母数字下划线!
var pwdRegex = /^\w{6,16}$/;
if(pwdRegex.test(password)){
pwdSpan.innerHTML = "<img src='img/true.ico'>";
var imgs = pwdSpan.getElementsByTagName("img");
var img = imgs[0];
img.style.height = "15px";
}else{
pwdSpan.innerHTML = "密码必须为6-16位字母数字下划线";
pwdSpan.style.color = "red";
pwdSpan.style.fontSize = 10;
return false;
}
return true;
}
/**
* 验证 确认密码
*/
function checkPwd2(){
var password2 = document.getElementById("pwd2").value;
var pwd2Span = document.getElementById("pwd2Span");
if(password2 ==""){
pwd2Span.innerHTML = "确认密码不允许为空!";
pwd2Span.style.color = "red";
pwd2Span.style.fontSize = 10;
return false;
}
var password1 = document.getElementById("pwd").value;
if(password1 == password2){
pwd2Span.innerHTML = "<img src='img/true.ico'>";
var imgs = pwd2Span.getElementsByTagName("img");
var img = imgs[0];
img.style.height = "15px";
}else{
pwd2Span.innerHTML = "密码不一致，请确认";
pwd2Span.style.color = "red";
pwd2Span.style.fontSize = 10;
return false;
}
return true;
}
/**
* 验证 邮箱格式
*/
function checkEmail(){
var email = document.getElementById("email").value;
var emailSpan = document.getElementById("emailSpan");
if(email ==""){
emailSpan.innerHTML = "邮箱不允许为空!";
emailSpan.style.color = "red";
emailSpan.style.fontSize = 10;
return false;
}
var emailRegex = /^\w+@\w+(\.\w+)+$/; //定义正则表达式时，空格也算是需要验证的字符，注意
if(emailRegex.test(email)){
emailSpan.innerHTML = "<img src='img/true.ico'/>";
var imgs = emailSpan.getElementsByTagName("img");
var img = imgs[0];
img.style.height = "15px";
}else{
emailSpan.innerHTML = "邮箱格式不正确，请确认!";
emailSpan.style.color = "red";
emailSpan.style.fontSize = 10;
return false;
}
return true;
}
/**
* 验证所有的信息
*/
function check() {
var uName = checkUName();
var pwd1 = checkPwd();
var pwd2 = checkPwd2();
var email = checkEmail();
if(!(uName && pwd1 && pwd2 && email)){
alert("填写信息不正确，请确认!");
return false;
}
var genderArr = document.getElementsByName("gender");
if(genderArr[0].checked == genderArr[1].checked){
alert("请选择性别");
return false;
}
var likeArr = document.getElementsByName("like");
var fla = false;
for(var k=0;k<likeArr.length;k++){
if(likeArr[k].checked){
fla = true;
}
if(k==likeArr.length-1 && !fla){
alert("请选择爱好");
return false;
}
}
var city = document.getElementById("city").value;
if(city ==""){
alert("请选择城市");
return false;
}
var myInfo = document.getElementById("myInfo").value;
if(myInfo == "属于你个人的介绍，请填写" || myInfo ==""){
alert("请填写个人介绍");
return false;
}
return true;
}
/**
* 字符串去空格
* @param a
* @returns {string}
*/
function myTrim(a){
var str = new String(a);
var start = 0;
var end = str.length -1;
for(var i=0;i<str.length;i++){
if(" "==str[i]){ //注意这里的空格
start++;
}else{
break;
}
}
for(var j=end;j>0;j--){
if(" " ==str[j]){ //注意这里的空格
end--;
}else{
break;
}
}
return str.substring(start,end+1);
}
</script>
</html>
该注意的点都在上面注释标识出来，其他的也没什么了
看下效果图
Ⅲ.总结
…省略三万字的总结，继续学习！
1493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
