范仁義html+css課程---7、表單

一、總結

一句話總結：

表單標簽的話主要掌握form標簽、input標簽（以及input標簽的不同的type值）、select標簽、textarea等標簽，及這些標簽對應的一些屬性

 

1、form標簽的常用屬性？

action：指定表單的發送地址（服務器地址）

method:表單數據發送至服務器的方法，常用的有兩種：get/post

 

2、form的get提交方式和post提交方式的區別？

get方法提交：數據會附在網址之后主動提交給服務器

post方法提交：數據不會附在網址后，會將數據打包發送給服務器，等候服務器來讀取數據進行處理

 

 

3、html表單元素中input元素的作用？

用來設置表單中的內容項，比如輸入內容的文本框，密碼框，選項框，按鈕等

 

4、input標簽的type常用類型？

text、password、email、num、checkbox、radio、file、hidden、image、submit、reset 和 button等，默認為 text

 

 

5、當input標簽的type為radio或checkbox時，指定按鈕是否是被選中用什么屬性？

checked屬性：<input name="gender" type="radio" checked value="男"> 男

 

6、表單中的隱藏域如何使用？

將input標簽的type屬性設置為hidden：例如 <input type="hidden" value="666" name="userid">

 

 

7、表單元素的readonly屬性和disabled屬性的作用分別是什么？

readonly屬性：只讀，不可修改，但是會提交元素數據

disabled屬性：只讀，不可修改，並且不會提交元素數據

 

8、如何實現點擊label標簽 自動將焦點轉移到與該標注相關的表單元素上？

label元素的for屬性的屬性值為相關表單元素的id

<div>
    <label for="username">用戶名：</label>
    <input type="text" required id="username" name="name" placeholder="用戶名">
</div>

 

 

9、表單初級驗證的常用方法？

1.placeholder：提示語默認顯示，當文本框中輸入內容時提示語消失

2.required：規定文本框填寫內容不能為空，否則不允許用戶提交表單

3.pattern：用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單：如 pattern="^1[358]\d{9}"

 

 

 

 

二、HTML-表單（非常詳細）

博客對應視頻課程位置：7、表單（2）
https://fanrenyi.com/video/2/13

 

 

表單基本介紹

form元素

• 用來定義一個表單，是建立表單的基礎元素，（就類似定義表格的table）
• 表單的其他元素包含在form元素中，其主要子元素有：input/button/select......

 

form元素的屬性

• action：指定表單的發送地址（服務器地址）
• method:表單數據發送至服務器的方法，常用的有兩種：get/post

 

get和post提交的區別

• get方法提交，數據會附在網址之后主動提交給服務器
• post方法提交，數據不會附在網址后，會將數據打包發送給服務器，等候服務器來讀取數據進行處理

 

表單語法

<form  method="post"（規定如何發送表單數據      常用值：get|post）
 action="result.html">（表示向何處發送表單數據）
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密碼：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" value="提交"/>
      <input type="reset" value="重填“/> 
   </p>
</form>

經驗：在實際網頁開發中通常采用post方式提交表單數據

 

表單元素格式

語法：

<input  type="text"（input元素類型）name="fname"（input元素名稱） 
value="text"（input元素的值）/>

屬性	說明
type	指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默認為 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(單選按鈕選中狀態)  />男
<input name="gen" type="radio" value="女" />女

復選框-語法

<input type="checkbox"(復選框) name="interest" value="sports"(值)/>運動
<input type="checkbox" name="interest" value="talk" checked(復選框選中狀態) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戲

列表框-語法

<select(列表框) name="列表名稱" size="行數">
<option value="選項的值" selected="selected"(默認選中項)>…</option >
<option(選項) value="選項的值">…</option >
</select>

按鈕-語法

<input type="reset" (重置按鈕)  value="reset按鈕"(按鈕上顯示的文字)>
<input type="submit"(提交按鈕)  value="submit按鈕">
<input type="button"(普通按鈕)  value="button按鈕"/>


圖片按鈕

<input type="image" src="images/login.gif"/(圖片路徑)>

多行文本域-語法

<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>

郵箱-語法

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

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

網址-語法

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

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

數字-語法

<p>請輸入數字:<input type="number"(數字)  name="num" min="0"(允許的最小值) max="100"(允許的最大值) step(合法的數字間隔)="10"/></p>
<input type="submit"/>

滑塊-語法

<p>請輸入數字:<input type="range"(滑塊)  name="range1" min="0"(允許的最小值) max="10"(允許的最大值) step(合法的數字間隔)="2"/></p>
<input type="submit"/>

搜索框-語法

<p>請輸入搜索的關鍵詞:<input type="search"(搜索框)  name="sousuo"/></p>
<input type="submit"/>

 

表單的高級應用

隱藏域-語法

<input type="hidden"(隱藏域) value="666" name="userid">

只讀和禁用-語法

<input name="name" type="text" value="張三"  readonly(只讀文本框)>
<input type="submit "  disabled （禁用）  value="保存" >

表單元素的標注

1.增強鼠標的可用性

2.自動將焦點轉移到與該標注相關的表單元素上

語法

<label for="id"(表單元素的id)>標注的文本</label>
<input type="radio" name="gender" id="male"/(表單元素id)>

 

表單的初級驗證

表單驗證的好處

1.減輕服務器的壓力

2.保證數據的可行性和安全性

表單初級驗證的方法

1.placeholder 2.required 3.pattern

placeholder

1.input類型的文本框提供一種提示（hint）

2.可以描述文本框期待用戶輸入何種內容

3.提示語默認顯示，當文本框中輸入內容時提示語消失

4.適合於input標簽：text、search、url、email和password等類型

語法：

<input type="search" name="sousuo"  placeholder(文本框輸入內容提示)="請輸入要搜索的關鍵字"/>

 

required

1.規定文本框填寫內容不能為空，否則不允許用戶提交表單

2.適合於input標簽：text、search、url、email、password、number、checkbox、radio、file等類型

語法：

<input type="text" name="username"  required/(必填項)>

pattern

用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單

語法：

<input type="text" name="tel"  required pattern（驗證規則，正則表達式）="^1[358]\d{9}" />

 

部分資料來源於網絡，侵刪

 

三、參考資料

1、input標簽詳解

input元素

• 用來設置表單中的內容項，比如輸入內容的文本框，按鈕等
• 不僅可以布置在表單中，也可以在表單之外的元素使用

input元素的屬性

• type屬性：指定輸入內容的類型，默認為text:單行文本框
• name屬性:輸入內容的識別名稱，傳遞參數時候的參數名稱
• value屬性:默認值
• maxlength:輸入的最大字數
• readonly屬性：只讀屬性，設置內容不可變更，提交時會以前發送至服務器
• disabled屬性：設置為不可用（不可操作）
• required屬性：設置該內容為必須填寫項，否則無法提交
• placeholder屬性：設置默認值，當文本框獲得焦點時被清空，對text/url/tel/email//password/search有效
• autofocus屬性：自動獲得焦點
• accesskey屬性：指定快捷鍵windows中，指定快捷鍵后，按Alt+“快捷鍵”,便會獲得焦點
• tabindex屬性：指定按Tab鍵時，項目間的移動順序
• autocomplet屬性： HTML5新增屬性屬性值為on/off,定義是否開啟瀏覽器自動記憶功能

input的其他屬性還有很多，我們放在案例中逐步講解，暫時先了解這三個

type屬性值

• 默認為text
• password：密碼狀態輸入
• submit:提交按鈕，點擊將數據發送至服務器
• reset:重置按鈕
• button:普通按鈕
• imge：圖片式提交按鈕
• hidden；隱藏字段
• 該內容不會顯示頁面上
• 一般為網頁設計者設置的變量數據，提交時，隱藏內容會提交到服務器
• 關於hidden暫時只了解這么多，以后用到的時候再詳細說
• email:表示要輸入一個電子郵箱
• 這是HTML5新增的元素
• 他會對輸入內容進行驗證，在之前需要編寫大段的JS代碼來進行這項工作
• 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
• url:表示要輸入一個網址
• 這是HTML5新增的
• 他會對輸入內容進行驗證，在之前需要編寫大段的JS代碼來進行這項工作
• 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
• tel:表示輸入的內容是一個電話號碼
• 這是HTML5新增的
• 他不會對輸入內容進行驗證
• 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
• number:
• 這是HTML5新增的
• 可以配合input的max/min/step/value規定允許輸入的最大值/最小值/步長/默認值
• 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
• range(活動條)
• 這是HTML5新增的；與number類型類似，也是表示一定范圍的數值輸入，但是以一個活動條的狀態顯示
• 可以配合input的max/min/step/value規定的最大值/最小值/步長/默認值
• 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異
• 時間類
• 這是HTML5新增的；
• 包括datetime/datetime-local/date/month/week/time
• 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器支持程度不同
• color
• 這是HTML5新增的；
• 可以建立一個顏色的選擇輸入框
• 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器支持程度不同
• seacrch
• 這是HTML5新增的；
• 用於建立一個搜索框，用來供用戶輸入搜素的關鍵詞
• 瀏覽器版本比較低的話有可能不支持，不同的瀏覽器支持程度不同
• file
• 用來創建一個文件選取的輸入框
• 可通過accept屬性規定選取文件的類型，比如圖片/視頻
• multipe屬性可以設定一次允許選擇多個文件
• checkbox/復選框
• 用來創建一個復選框（可以多項選擇）
• 通過checked屬性可講某個選項設為默認的選取狀態，再次單擊取消選取
• radio/單選框
• 用來創建一個單選框（可以多項選擇）
• 通過checked屬性可講某個選項設為默認的選取狀態，再次單擊取消選取
• 必須將同一組單選項設置一個相同的name屬性值

四、課程代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄的表單實例</title>
</head>
<body>
    <div>
        <form action="action.html" method="post">
            <div>
                <label for="user_phone">手機號碼：</label>
                <input id="user_phone" name="user_phone" type="text" pattern="^1[358]\d{9}" placeholder="大陸手機號碼">
            </div>
            <br>
            <div>
                密碼：<input name="password" type="password" placeholder="密碼只能填寫6位">
            </div>
            <br>
            <div>
                <input name="remember_me" checked type="checkbox">記住我
            </div>
            <br>
            <div>
                <input name="gender" checked type="radio" value="nan"> 男
                <input name="gender" type="radio" value="nv"> 女
            </div>
            <br>
            <div>
                <div>愛好</div>
                <input name="hobby[]" type="checkbox" value="hobby1">籃球
                <input name="hobby[]" type="checkbox" value="hobby2">足球
                <input checked name="hobby[]" type="checkbox" value="hobby3">旅游
                <input checked name="hobby[]" type="checkbox" value="hobby4">挖掘機
            </div>
            <br>
            <div>
                <div>班級</div>
                <select name="class" id="">
                    <option value="class1">班級一</option>
                    <option value="class2">班級二</option>
                    <option selected="selected" value="class3">班級三</option>
                </select>
            </div>
            <br>
            <div>
                <div>個人簡介</div>
                <textarea name="profile" id="" cols="60" rows="5">textarea設置默認值</textarea>
            </div>
            <br>
            <div>
                <div>個人圖片</div>
                <input name="user_img" type="file">
            </div>
            <br>
            <div>
                <div>郵箱</div>
                <input name="email" type="email">
            </div>
            <div>
                <div>網址</div>
                <input name="url" type="url">
            </div>
            <div>
                <div>年齡</div>
                <input name="age" type="number" min="0" max="150" step="12">
            </div>
            <div>
                <div>滑塊</div>
                <input name="range1" type="range" min="2" max="150" step="30">
            </div>
            <div>
                <div>搜索</div>
                <input name="search11" type="search">
            </div>
            <br>
            <div>
                <div>隱藏域</div>
                <input type="hidden" value="666" name="userid">
            </div>
            <div>
                <input type="submit" value="登錄">
                <input type="reset" value="重置">
                <input type="button" value="普通按鈕">
                <input type="image" src="../img/btn.jpg" style="width: 100px;">
            </div>
        </form>
    </div>
</body>
</html>