介紹表單
●表單是網頁上用來收集用戶信息的區域,由文本域、複選框、單選框、菜單、文件地址域、按鈕等表單元素組成。
●標籤用於創建一一個表單,其基本語法如下所示:
在.上面的語法中,name屬性用來區分一個網頁中的多個表單;action屬性用於指定接收並處理表單數據的服務器url地址;method屬性用於設置表單數據的提交方式,其取值可以爲get或post,默認爲get。.
新增的表單屬性
(1) autocomplete屬 性
autocomplete屬性用於指定表單是否有自動完成功能,所謂“自動完成”是指將表單控件輸入的內容記錄下來,當再次輸入時,會將輸入的歷史記錄顯示在-一個下拉列表裏,以實現自動完成輸入。
(2) novalidate,屬性
novalidate,屬性用於指定在提交表單時取消對錶單進行有效的檢查。爲表單設置該屬性時,可以關閉整個表單的驗證,這樣可以使form內的所有表單控件不被驗證。
< input>標籤
●表單中最爲核心的就是標籤,使用標籤可以在表單中定義文本輸入框、單選按鈕、複選框、重置按鈕等,其基本語法格式如下:
在上面語法中,type屬 性爲其最基本的屬性,取值有多種,用來指定不同的控件類型,除type屬性外, 還可以定義很多其他屬性,常用屬性如name、value、 size等,
form表單的應用:
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body>
<form>
<div class="border-radius"></div>
<input type="text" name="name" placeholder="用戶名">
<input type="password" name="password" placeholder="密碼">
<input type="submit" name="submit" value="登錄" class="btn">
</form>
</body>
</html>
login.css
body{
background: url('../images/1.png') no-repeat center center fixed;/*設置背景圖片*/
background-size: cover;
padding: 20px;
}
form{
width: 343px;
height: 500px;
margin :0 auto;
padding: 30px;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 5px;
background-color: rgba(0,0,0,0.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,0.5);
overflow: hidden;
}
.border-radius{
width: 200px;
height: 200px;
border-radius: 200px;
background: url('../images/2.jpg')no-repeat center center;
margin: 40px auto;
border:5px solid rgba(255,255,255,0.4);
}
input{
width: 276px;
height: 48px;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 4px;
font-family: 'Source sans pro',sans-serif;
display: block;
font-size: 18px;
color: #fff;
padding-left: 45px;
padding-right: 20px;
margin-bottom: 20px;
background: rgba(255,255,255,0.4)no-repeat 16px 16px;
}
/*僞類選擇器*/
input[type=submit]{
cursor: pointer; /*當點擊input[type=submit]時,鼠標變成小手樣式*/
}
::-webkit-input-placeholder{
color: #fff;/*設置input 提示裏的文字顏色*/
}
.btn{
width: 138px;
height: 44px;
border-radius: 4px;
margin: 0 auto;
background: #00b0dc;
padding: 10.5px 21px;
color: #e1e1e1;
}
/*設置按鈕btn 點擊時的樣式*/
.btn:hover{
border:1px solid #253737;
box-shadow: 0 1px 0 #333333;
background: #00b0dc;
color: #fff;
}
/*當鼠標獲得焦點時的樣式*/
input:focus{
background-color: rgba(0,0,0,0.2);
box-shadow: 0 0 5px 1px rgba(255,255,255,0.5);
overflow: hidden;
}
其他表單標籤
- 標籤用於定義多行文本輸入框,可以通過cols和rows屬性來規定文本區域內可見的列數和行數,具體的尺寸可以通過
width和heiaht來設置
< textarea> 標籤的常用屬性如下表所示:
●< label>標籤
一
●< select>標籤
標籤可創建單選或多選菜單,其語法格式具體如下:
< datalist>標籤
一 標籤用於定義輸入域的選項列表,即與標籤配合定義標籤可能的值。
一列表通過標籤內的標籤創建,可以使用標籤的list屬性弓|用標籤的id屬性,具體用法如
下。
效果如下:
< keygen>標籤
- 標籤是密鑰對生成器( key-pair generator )。當提交表單時,會生成兩個鍵,一個是私鑰,一個公鑰。私鑰(privatekey)存儲於客戶端,公鑰( public key )則被髮送到服務器。公鑰可用於之後驗證用戶的客戶端證書( client certificate) 。具體用法如下:
< output>標籤
●< output>標籤用於定義不同類型的輸出,如腳本輸出的示例代碼如下:
onforminput屬性的值對應腳本的方法名。
表單驗證
表單驗證是一套系統,它爲終端用戶檢測無效的數據並標記這些錯誤,讓Web應用更快的拋出錯誤,大大的優化了戶體驗。
表單驗證是一套系統,它爲終端用戶檢測無效的數據並標記這些錯誤,讓Web應用更快的拋出錯誤,大大的優化了用戶體驗。
HTML5自帶表單驗證功能有兩種:
- ①通過required屬 性校驗輸入框填寫內容不能爲空,如果爲空將彈出提示框,並阻止表單提交。
- ②通過pattern屬性規定用於驗證input域的模式(pattern), 它接受一個正則表達式。表單提交時這個正則表達式會被用於驗證表單內非空的值,如果控件的值不匹配這個正則表達就會彈出提示框,並阻止表單提交。那些type爲email或urI的輸入控件內置相關正則表達式,如果value的值不符合其正則表達式,那表單將通不過驗證,無法提交。
例:用戶註冊頁面:
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶註冊</title>
<link rel="stylesheet" type="text/css" href="css/register.css"/>
</head>
<body>
<div>
<img class="tree"src="images/tree.jpg" alt="">
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
<li class="usually">
<h2>用戶註冊</h2>
</li>
<li class="usually">
<span>暱稱:</span>
<input type="text" id="name" name="name" required>
</li>
<li class="usually">
<span>密碼:</span>
<input type="password" name="password" required>
</li>
<li class="special">
<span>性別:</span>
<input type="radio" name="sex" id="male" checked>
<label for="male">男</label>
<input type="radio" name="sex" id="female" checked>
<label for="female">女</label>
</li>
<li class="usually">
<span>年齡:</span>
<input type="text" id="age" name="age" required>
</li>
<li class="special">
<span>興趣愛好:</span>
<input type="checkbox" name="interesting" id="football" >
<label for="football"> 足球</label>
<input type="checkbox" name="interesting" id="basketball" >
<label for="basketball">籃球</label>
<input type="checkbox" name="interesting" id="swim" >
<label for="swim"> 游泳</label>
<input type="checkbox" name="interesting" id="run" >
<label for="run"> 跑步</label>
<input type="checkbox" name="interesting" id="yoga" >
<label for="yoga"> 瑜伽</label>
</li>
<li class="usually">
<span>自我介紹:</span>
<textarea rows="10" cols="200" name="introduction" placeholder="Please enter your message" class="message" required>
</textarea>
</li>
<li>
<button class="submit" type="submit" >立即註冊</button>
</li>
</ul>
</form>
</div>
</body>
</html>
register.css代碼:
/*清除獲取焦點的外邊框*/
*:focus{
outline: none;
}
.contact_form{
width: 70%;
position: absolute;
top: 20%;
left: 35%;
}
.tree{
position: relative;
top: 420px;
left: 260px;
}
.contact_form h2,.contact_form span{
font-family: Georgia,"Times New Roman",Times,serif;
}
.contact_form ul{
width: 750px;
list-style: none;
margin: 0;
padding: 0;
}
.contact_form li{
padding:12px;
border-bottom: 1px solid #eee;
position: relative;
}
.contact_form li:first-child,
.contact_form li:last-child{
border-bottom: 1px solid #777;
}
.contact_form h2{
margin: 0;
}
.contact_form span{
width: 150px;
margin-top: 3px;
display: inline-block;
padding: 3px;
}
.usually input{
height: 20px;
width: 200px;
padding: 5px 8px;
}
.usually textarea{
padding: 8px;
width: 300px;
}
.contact_form button{
margin-left: 156px;
}
.special input{
height: 15px;
width: 40px
padding:5px 8px;
}
/*設置輸入框 末尾的 提示圖片*/
.usually input,
.usually textarea{
background:url('../images/attention.png')no-repeat 98% center;
border: 1px solid #aaa;
box-shadow: 0 0 3px #ccc,0 10px 15px #eee inset;
border-radius: 2px;
transition: padding 0.25s;
}
/*獲取焦點之後的外觀 撐開*/
.usually input:focus,
.usually textarea:focus{
background-color: #fff;
border: 1px solid #555;
box-shadow: 0 0 3px #aaa;
padding-right: 70px;
}
/*底部的提交按鈕 設置外觀*/
button.submit{
background-color: #68b12f;
background-image: linear-gradient(top,#68b12f,#50911e);
border: 1px solid #509111;
border-bottom: 1px solid #509111;
border-radius: 3px;
box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: blod;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1 px 0 #396715;
}
button.submit:hover{
opacity: 0.85;
cursor: pointer;
}
button.submit:active{
border:1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
}
/*表單元素 驗證失敗 驗證成功的 演示*/
/*invalid驗證失敗*/
.usually input:focus:invalid,
.usually textarea:focus:invalid{
background:#fff url('../images/warn.png')no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535;
}
/*valid驗證失敗*/
.usually input:focus:valid,
.usually textarea:focus:valid{
background:#fff url('../images/right.png')no-repeat 98% center;
box-shadow: 0 0 5px #5cb053;
border-color: #28921f;
}