Web前端開發與設計02-表單

學習要點

• 表單
• 表單的高級應用
• 語義化的表單
• 表單的初步驗證

 

表單

定義

表單在網頁中應用廣泛，例如：登陸、注冊、訂單信息錄入、調查問卷、搜索等等。例如京東注冊頁面。

 

 

常見的表單元素：文本框，密碼框，下來列表框，多選框，提交按鈕等等。
語法：

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密碼：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交">
      <input type="reset" name="Reset" value="重填"> 
   </p>
</form>

　　

表單標簽及其屬性

表單標簽：<form>表單元素</form>
注：表單標簽在HTML中是一個容器標簽，其他表單標簽需要在它的范圍中才有效。例如<input>標簽。
form標簽屬性：

屬性	說明
Action	表示向何處發送表單數據。若該屬性為空，則默認表示提交到本頁。
Method	瀏覽器如何發送數據到服務器。Get，參數通過url發送到服務器；Post，數據作為數據塊發送到服務器。

 

 

表單元素及格式

語法：

<input  type="text"  name="fname" value="text">

　　

屬性	說明
type	指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button、email、url、number、range、search，默認為 text
name	指定表單元素的名稱。
value	元素的初始值。type 為 radio時必須指定一個值
size	指定表單元素的初始寬度。當 type 為 text 或 password時，表單元素的大小以字符為單位。對於其他類型，寬度以像素為單位
maxlength	type為text 或 password 時，輸入的最大字符數
checked	type為radio或checkbox時，指定按鈕是否是被選中

文本框

<input type="text" name="userName" value="用戶名" size="30" maxlength="20" >

　　

密碼框

<input type="password " name="pass" size="20" >

　　

單選按鈕

<input name="gen" type="radio" value="男" checked="checked" >男
<input name="gen" type="radio" value="女" >女

　　

復選框

<input type="checkbox" name="interest" value="sports">運動
<input type="checkbox" name="interest" value="talk" checked="checked" >聊天
<input type="checkbox" name="interest" value="play">玩游戲

　　

列表框

<select name="列表名稱" size="行數">
<option value="選項的值" selected="selected">…</option >
<option value="選項的值">…</option >
</select>

　　

按鈕

重置按鈕：<input type="reset" name="butReset" value="reset按鈕">
圖片按鈕：<input type="image" src="images/login.gif" />
普通按鈕：<input type="button" name="butButton" value="按鈕"/>

　　

多行文本域

<textarea name="showText" cols="x" rows="y">文本內容 </textarea >

　　

文件域

<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上傳" /></p>
</form>

　　

解釋：
A、type值為file即為文件域。
B、在表單中使用文件域時，必須設置表單的“enctype”編碼屬性為“multipart/form-data”，表示將表單數據分為多部分提交，即分為文件和普通表單元素提交。

 

郵箱

<p>郵箱:<input type="email" name="email"/></p>

　　

注意：會自動驗證Email地址格式是否正確

 

網址

<p>請輸入你的網址:<input type="url" name="userUrl"/></p>

 

注意：會自動驗證URL地址格式是否正確

 

數字

<p>請輸入數字:<input type="number" name="num" min="0" max="100" step="10"/></p>

　　

注意：在提示輸入的狀態下，min和max分別表示允許的最大值和最小值，step表示合法的數字間隔。

 

滑塊

<p>請輸入數字:<input type="range" name="range1" min="0" max="10" step="2"/></p>

　　

搜索框

<p>請輸入搜索的關鍵詞:<input type="search" name="sougo"/></p>

　　

文本框和數據列表

<input type="text" list="fruits"> <!-- 文本框和datalist的關聯 -->
<datalist id="fruits"> <!-- 定義可選數據的列表 -->
<option>蘋果</option>
<option>香蕉</option>
<option>菠蘿</option>
<option>桃子</option>
</datalist>

　　

表單的高級應用

設置表單的隱藏域

<input type="hidden" value="666" name="userid">

　　

表單的只讀與禁用設置

只讀：

<input name="name" type="text" value="張三" readonly="readonly">

 

禁用：

<input type="submit " disabled="disabled" value="保存" >

　　

HTML5對屬性值描述特點

具有boolean值的屬性
1. 只寫屬性名稱不指定屬性值，表示值為true
2. 如果設置改屬性值為false，表示不使用該屬性
3. 若要屬性值設置為true，可以將屬性名設定為屬性值，或將空字符串設定為屬性值。
屬性值引號使用
1. 可以使用單引號
2. 可以使用雙引號
3. 如果只有一個屬性或者一個屬性值，屬性值不包括空字符串、“>”、“<”、“=”、單引號、雙引號等字符時，屬性值兩邊的引號可省略。
例如：<meta charset="UTF-8">，UTF-8可以使用單引號、雙引號、省略引號。

 

語義化的表單

語義化

• 符合W3C標准
• 語義化的標簽
• 結構合理、代碼簡潔

對比：（語義化前后對比）：

 

 

<table width="170" border="1">
	<caption>崗位信息表</caption>
    <thead>
        <tr><th>姓名</th><th>職務</th></tr>
     </thead>
     <tbody>
        <tr><td align="center">張三</td><td align="center">技術員</td>
        </tr>
    </tbody>
</table>

 

語義化的表單標簽

域標簽：<fieldset>
域標題：<legend>

 

表單元素的標注

語法：

<label for=”表單元素的id”>標注的文本</label>

　　

作用：自動將焦點轉移到與該標注相關的表單元素上。

語義化表單示例

<fieldset>
    <legend>用戶注冊</legend>
    <form method="post" action="#">
        <p>ID：<input type="text" name="userID" value="345678"></p>
        <p>
            <label for="userName">賬戶：</label>
            <input type="text" name="userName" id="userName" size="15" maxlength="3"></p>
        <p>
            <label for="userPwd">密碼：</label>
            <input type="password" name="userPwd" id="userPwd" size="15" maxlength="3">
	</p>
        <p>性別：
            <input type="radio" name="gender" value="男" checked="checked">男
            <input type="radio" name="gender" value="女">女</p>
        <p>興趣愛好：
            <input type="checkbox" name="like" value="唱歌">唱歌
            <input type="checkbox" name="like" value="運動">運動
            <input type="checkbox" name="like" value="游戲">打游戲
            <input type="checkbox" name="like" value="閱讀">看書</p>
        <p>
            所在年級：
            <select name="grade">
                <option value="0" selected="selected">-請選擇-</option>
                <option value="gradeOne">一年級</option>
                <option value="gradeTwo">二年級</option>
                <option value="gradeThree">三年級</option>
                <option value="gradeFour">四年級</option>
            </select></p>
        <p><input type="submit" value="登陸" disabled="disabled">  
	<input type="reset" value="重置"></p>
    </form>
</fieldset>

　　

表單語義化的意義

語義化的目標是為了頁面結構更加合理；
在網頁設計和開發過程中，使用語義化的標簽，能夠達到見名知義的作用；
語義化的結構，更加符合Web標准，更利於搜索引擎的抓取（SEO的優化）和開發維護。

 

表單的初級驗證

表單驗證

為什么要進行表單驗證？
表單驗證的好處：減輕服務器的壓力；保證數據的可行性和安全性。

 

表單初級驗證屬性

placeholder
語法格式：

<input type="search" name="sougo" placeholder="請輸入要搜索的關鍵字"/>

　　

解釋：
1. 為input類型的文本框提供一種提示（hint）
2. 可以描述文本框期待用戶輸入何種內容
3. 提示語默認顯示，當文本框中輸入內容時提示語消失
4. 適合於input標簽：text、search、url、email和password等類型

required
語法格式：

<input type="text" name="username" required/>

　

解釋：
1. 規定文本框填寫內容不能為空，否則不允許用戶提交表單
2. 適合於input標簽：text、search、url、email、password、number、checkbox、radio、file等類型

pattern
語法格式：

<input type="text" name="tel" required pattern="^1[358]\d{9}" />

　　

解釋：
1. pattern屬性值為驗證規則，正則表達式。
2. 用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單。

　　

表單驗證練習

練習題：QQ注冊驗證
需求說明

• 能夠實現鼠標單擊文本時，與文本對應的表單元素自動獲得焦點
• 所有的表單元素不能為空
• 必須符合驗證規則才能提交
• 昵稱：pattern="[\w\u4E00-\u9FA5]{4,10}"
• 密碼：pattern="[\dA-Za-z]{6,16}"
• 手機號碼：pattern="1[3578]\d{9}"
• 年齡：pattern="\d|[1-9]\d|1[0-2]\d"