h5學習筆記——四、表單的應用

介紹表單

●表單是網頁上用來收集用戶信息的區域,由文本域、複選框、單選框、菜單、文件地址域、按鈕等表單元素組成。

●標籤用於創建一一個表單,其基本語法如下所示:
在這裏插入圖片描述
在.上面的語法中,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;
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章