label 與 input
label：標(biāo)簽，在表單中與 input 標(biāo)簽綁定使用。
eg：
1.顯式聯(lián)系 —— label 的 for 屬性與 input 的 id 屬性對應(yīng)
<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 元素的名稱，用于對提交到服務(wù)器后的表單數(shù)據(jù)進行標(biāo)識，或在客戶端通過 js 引用表單數(shù)據(jù)。注：只有設(shè)置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。
如上，type 為 radio 的兩個 input，name 相同，則 radio 的作用范圍就在這兩個 input 上，即這個 input 里面，只有一個是能被選中的。若兩個 input 的 name 不同，則兩個 input 是否被選中彼此無關(guān)。
2.隱式聯(lián)系 —— label 標(biāo)簽中放入 input 標(biāo)簽，無需 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新特性練習(xí)
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位數(shù)字、字母、下劃線</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位數(shù)字、字母、下劃線</span>
</td>
</tr>
<tr>
<td class="left"><label for="re-password">確認(rèn)密碼:</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位數(shù)字、字母、下劃線</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位數(shù)字、字母、下劃線</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位數(shù)字、字母、下劃線</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位數(shù)字、字母、下劃線</span>
</td>
</tr>
<tr>
<td class="left"><label for="education">學(xué)歷:</label></td>
<td class="right">
<select name="education" id="education">
<option value="volvo">高中</option>
<option value="saab">學(xué)士</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">網(wǎng)球</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.itdecent.cn/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位 字母、數(shù)字、下劃線
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位 字母、數(shù)字、下劃線
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位 字母、數(shù)字、下劃線
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();
