label 与 input
label：标签，在表单中与 input 标签绑定使用。
eg：
1.显式联系 —— label 的 for 属性与 input 的 id 属性对应
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
label 的 for 属性与 id 和他相同的 input 元素绑定。
input 的 name 属性为 input 元素的名称，用于对提交到服务器后的表单数据进行标识，或在客户端通过 js 引用表单数据。注：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
如上，type 为 radio 的两个 input，name 相同，则 radio 的作用范围就在这两个 input 上，即这个 input 里面，只有一个是能被选中的。若两个 input 的 name 不同，则两个 input 是否被选中彼此无关。
2.隐式联系 —— label 标签中放入 input 标签，无需 for 与 id
<label>Date of Birth: <input type="text" name="DofB" /></label>
- td 中的 label 与 input 对齐：
label{
line-height: 35px;
height: 35px;
display: inline-block;
}
input{
vertical-align: middle;
}
input新特性练习
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>form & input</title>
</head>
<body>
<form action="MAILTO:1230@qq.com" method="post" class="container">
<table>
<tr>
<td class="left"><label for="username">用户名:</label></td>
<td class="right"><input class="input" type="text" id="username"></td>
<td class="note">
<i class="warning"></i>
<span class="warning-text">8-12位数字、字母、下划线</span>
</td>
</tr>
<tr>
<td class="left"><label for="password">密码:</label></td>
<td class="right"><input class="input" type="password" id="password"></td>
<td class="note">
<i class="warning"></i>
<span class="warning-text">8-12位数字、字母、下划线</span>
</td>
</tr>
<tr>
<td class="left"><label for="re-password">确认密码:</label></td>
<td class="right"><input class="input" type="text" id="re-password"></td>
<td class="note">
<i class="warning"></i>
<span class="warning-text">8-12位数字、字母、下划线</span>
</td>
</tr>
<tr>
<td class="left"><label for="identify">验证码:</label></td>
<td class="right"><input class="input" type="text" id="identify"></td>
<td class="note">
<i class="warning"></i>
<span class="warning-text">8-12位数字、字母、下划线</span>
</td>
</tr>
<tr>
<td class="left"><label>性别:</label></td>
<td class="right">
<label for="male">男：</label>
<input type="radio" checked="checked" class="sex" name="sex" id="male">
<label for="female">女：</label>
<input type="radio" class="sex" name="sex" id="female">
</td>
</tr>
<tr>
<td class="left"><label>性别:</label></td>
<td class="right">
<label for="amale">男：</label>
<input type="radio" checked="checked" class="sex" name="sexa" id="amale">
<label for="afemale">女：</label>
<input type="radio" class="sex" name="sexa" id="afemale">
</td>
</tr>
<tr>
<td class="left"><label for="age">年龄:</label></td>
<td class="right"><input class="input" type="number" id="age"></td>
<td class="note">
<i class="warning"></i>
<span class="warning-text">8-12位数字、字母、下划线</span>
</td>
</tr>
<tr>
<td class="left"><label for="date">出生日期:</label></td>
<td class="right"><input type="date" id="date"></td>
</tr>
<tr>
<td class="left"><label for="email">邮箱:</label></td>
<td class="right"><input class="input" type="email" id="email"></td>
<td class="note">
<i class="warning"></i>
<span class="warning-text">8-12位数字、字母、下划线</span>
</td>
</tr>
<tr>
<td class="left"><label for="education">学历:</label></td>
<td class="right">
<select name="education" id="education">
<option value="volvo">高中</option>
<option value="saab">学士</option>
<option value="fiat">硕士</option>
<option value="audi">博士</option>
</select>
</td>
</tr>
<tr>
<td class="left"><label>爱好:</label></td>
<td class="right">
<label for="swim">游泳</label>
<input type="checkbox" class="hobby" name="swim" id="swim">
<label for="badminton">羽毛球</label>
<input type="checkbox" class="hobby" name="badminton" id="badminton">
<label for="tennis">网球</label>
<input type="checkbox" class="hobby" name="tennis" id="tennis">
<label for="basketball">篮球</label>
<input type="checkbox" class="hobby" name="basketball" id="basketball">
</td>
</tr>
</table>
<fieldset class="health">
<legend>健康信息</legend>
<label for="stature">身高(cm)</label>
<input type="number" name="stature" id="stature">
<br>
<label for="weight">体重(kg)</label>
<input type="number" name="weight" id="weight">
</fieldset>
<input type="submit" value="提交" class="submit">
<input type="reset" value="重置" class="reset">
</form>
</body>
<script src="./index.js"></script>
</html>
scss部分
样式使用了sass，使用方法见http://www.jianshu.com/p/ff3494166bfb
.container {
width: 600px;
border: 1px solid #ff8d13;
border-radius: 10px;
padding: 10px;
text-align: center;
position: relative;
margin: 100px auto;
td {
height: 35px;
vertical-align: middle;
padding: 0;
}
.left {
text-align: right;
padding-right: 20px;
}
.right {
text-align: left;
.sex, .hobby {
vertical-align: middle;
}
.input {
width: 250px;
}
label {
line-height: 35px;
height: 35px;
display: inline-block;
}
}
.note {
font-size: 12px;
color: #aaa;
.warning{
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
}
.warning-text{
display: inline-block;
height: 34px;
line-height: 34px;
}
}
input {
height: 24px;
border-radius: 5px;
border: 1px solid #ccc;
}
table {
margin: 10px;
}
.health {
margin: 10px;
input {
margin: 5px;
}
}
}
js部分
function formFunction() {
let eles = {};
//用户名 8-12位 字母、数字、下划线
let username = document.querySelector('#username');
let usernameFlag = false;
username.onblur = () => {
let length = username.value.length;
let reg = /^(\w){8,12}$/.test(username.value);
usernameFlag = regJudge(username, reg);
};
eles.username = {
key:username,
flag: usernameFlag
};
//密码 8-12位 字母、数字、下划线
let password = document.querySelector('#password');
let passwordFlag = false;
password.onblur = () => {
let length = password.value.length;
let reg = /^(\w){8,12}$/.test(password.value);
passwordFlag = regJudge(password, reg);
};
eles.password = {
key:password,
flag: passwordFlag
};
//密码 8-12位 字母、数字、下划线
let repassword = document.querySelector('#re-password');
let repasswordFlag = false;
repassword.onblur = () => {
let length = repassword.value.length;
let reg = /^(\w){8,12}$/.test(repassword.value);
repasswordFlag = regJudge(repassword, reg);
};
eles.repassword = {
key:repassword,
flag: repasswordFlag
};
//验证码：6位字母
let identify = document.querySelector('#identify');
let identifyFlag = false;
identify.onblur = () => {
let length = identify.value.length;
let reg = /^([a-zA-Z]){6}$/.test(identify.value);
identifyFlag = regJudge(identify, reg);
};
eles.identify = {
key:identify,
flag: identifyFlag
};
//验证码：6位字母
let email = document.querySelector('#email');
let emailFlag = false;
email.onblur = () => { document.querySelector('#email');
let length = email.value.length;
let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/.test(email.value);
emailFlag = regJudge(email, reg);
};
eles.email = {
key:email,
flag: emailFlag
};
let submit = document.querySelector('.submit');
submit.onclick = () => {
if(!(usernameFlag && passwordFlag && repasswordFlag && identifyFlag && emailFlag)){
alert('请将信息填写完整！');
for(let key in eles){
let item = eles[key].key;
let itemFlag = eles[key].flag;
regJudge(item, itemFlag);
}
return false;
}
}
}
function regJudge(ele, reg) {
let warningIcon = ele.parentNode.parentNode.querySelector('.warning');
if(reg){
warningIcon.style.background = 'url("./img/right.png")no-repeat 0 0/20px';
return true;
}else{
warningIcon.style.background = 'url("./img/error.png")no-repeat 0 0/20px';
return false;
}
}
formFunction();
网友评论