「測試開發全棧-HTML」(20) 表單元素業務整合示例(上)

于表單中可以用的元素和控件，我們已經學習了<input>、<select>和<textarea>，今天準備做一個綜合的業務示例。

按照下面這張圖，我們來實現吧!

首先，對這張圖片里的內容進行下業務拆解，可以看到頂部青春不常在，抓緊談戀愛是一部分，下面的是另一部分。上面部分使用標題標簽就可以，下面可以使用表單標簽來展示。

先來第一行的性別，男女

看下實現效果:

對應的代碼為:

<!DOCTYPE html>

<head>

</head>

<body>

<h4>青春不常在，抓緊談戀愛</h4>

性別:

</td>

<input type="radio" name="sex"> <img src="1.jpeg" width="15" height="10"> 男

<input type="radio" name="sex"> <img src="1.jpeg" width="15" height="10"> 女

</td>

</tr>

</table>

</body>

</html>

對頁面的代碼進行了更多的優化，可以在圖片上時進行點擊

<body>

<h4>青春不常在，抓緊談戀愛</h4>

性別:

</td>

</td>

</tr>

</table>

</body>

頁面效果是沒有變化的

接著我們看看第二行的效果圖:

對應的代碼為:

<!DOCTYPE html>

<head>

</head>

<body>

<h4>青春不常在，抓緊談戀愛</h4>

性別:

</td>

</td>

</tr>

<td>

生日:

</td>

<td>

<option>請選擇年份</option>

</select>

<option>請選擇月份</option>

</select>

<option>請選擇日期</option>

</select>

</td>

</tr>

</table>

</body>

</html>

這里對應三個select下拉列表元素，生日的年、月和日

今天先到這里，大家晚安~

習大綱

一、事件對象【★】

1、概述

用于存儲事件的信息

? 說明

? 事件對象是由用戶產生的（鼠標單擊或者按一下鍵盤）

? 事件對象存儲對應事件信息

? 事件對象存儲信息有：

事件的類別，如：click，keydown等等

點擊事件的位置

點擊的哪一個鍵

等等

? 用于阻止事件流，用于阻止瀏覽器默認動作；

2、獲取事件對象

? ie6、7、8

通過關鍵詞event獲取

nodeObj.onclick = function() {
window.event
}

? 主流瀏覽器

通過方法第一個參數獲取

nodeObj.onclick = function(evt) {
evt
}

思考：形參為什么不寫event系統關鍵詞不要用，一般用evt

? 兼容

nodeObj.onclick = function(evt) {
var evt = window.event ? window.event : evt;
}

3、事件對象的作用

1）判斷是否回車表單提交

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 #div1 {width: 800px; height: 800px; background: red; }
   #div2 {width: 400px; height: 400px; background: blue;}
     #div3 {width: 200px; height: 200px; background: green; }
 </style>
</head>
<body>
 <form action="提交給老范.html" id="form1">
   <input type="text" name="">
   <input type="submit" value="提交">
 </form>
<script>
window.onkeydown = function(evt) {
 var evt = window.event ? window.event : evt;
 // console.log(evt);
 // 當表單按下回車鍵則提交
 if (evt.keyCode == 13) {
   var form1Obj = document.getElementById('form1');
   form1Obj.submit();
 }
}
</script>
</body>
</html>

說明：完善表單提交瑕疵，當獲取焦點的時候可以按回車鍵直接提交，但是沒有獲取焦點就通過js觸發提交（but 必須判斷只能是回車鍵才可以提交）

2）阻止瀏覽器默認動作

? 說明

DOM1級事件 return false；

DOM1級事件或者DOM2級事件 evt.preventDefault();

? 案例

阻止用戶提交表單

3）事件對象中記錄的鼠標位置

? 說明

evt.screenX 相對于屏幕的左上角為原點

evt.screenY

evt.clientX 相對于瀏覽器的客戶端左上角為原點（不計算滾動條位置）

evt.clientY

evt.pageX 相對于瀏覽器的客戶端左上角為原點（計算滾動條的位置）

evt.pageY

evt.offsetX 以自己的左上角為原點

evt.offsetY

? 圖解

? 案例

點擊增加水果

<script>
document.body.style.backgroundImage="url('ft/bj.jpg')";
   document.body.style.backgroundSize='1366px 768px';
   document.onclick=function(evt){
        imgobg = document.createElement('img');
       i = parseInt(10*Math.random());
       imgobg.setAttribute('src','ft/sg/'+i+'.png');
       imgobg.style.width="100px";
       //隨機顯示位置
       imgobg.style.position = 'absolute';
       imgobg.style.top = evt.clientY + 'px';
       imgobg.style.left = evt.clientX + 'px';
       document.body.appendChild(imgobg);
   }
   </script>

4）阻止事件流

? 說明：

? ie6、7、8：event.cancelBubble=true;

? 主流瀏覽器：evt.stopPropagation();

面向對象OOP

一、概念

在面向對象編程中，類（class）是對象（object）的模板，定義一組對象公有的屬性和方法（類是抽象的，對象具體的）

? 在PHP中，可以通過實例化一個類來獲取對象

? 而在JavaScript中沒有“類”，但是可以用過另一種方法定義自定義“類”，然后創建

對象，也可以直接創建對象（對象可以有默認成員，也可以后期動態添加成員）

總結：在js里可以通過多種方式創建對象

二、JavaScript中“類”的種類

1、系統類

1）Array類

var arr = new Array();

var arr2 = new Array();

屬性

對象.length 獲取數組的長度

方法

對象.pop() 彈出數組的最后一個元素，并返回彈出的值

對象.push(n); 給數組添加一個元素，并返回新數組的長度

等等

2）Date類

3）Math類

4）String類

2、自定義類（構造函數）

1）概念

? 明確：類（class）是對象（object）的模板，然后“對象”根據這個模板生成。

? 說明1：JS語言中使用構造函數（constructor）作為對象的模板。所謂構造函數，

就是提供一個生成對象的模板，并描述對象的基本結構的函數。

? 說明2：一個構造函數，可以生成多個對象，每個對象都有相同的結構。

2）定義構造函數

fucntion 函數名（） {

}

經驗總結：構造函數一般情況下函數名首字母大寫

︴思考：思考如果通過構造函數創建對象

通過new關鍵詞+函數名（）即可創建對象

三、通過構造函數創建對象

1、通過構造函數創建對象

? 代碼

說明：函數名不區分大小寫，但是強烈推薦大寫

︴思考：構造函數和普通函數有什么區別？

答：沒有區別，如果直接調用則是普通函數，如果是new+函數名()則構造函數，用于創建對象

腳下留心：不要聲明構造函數，當普通函數使用（所以為了明確后期構造函數就使用new實例化，普通函數就直接調用則通過函數名首字母來區分是構造函數還是普通函數）

︴練習：描述一個人的信息

? 提出問題

如何將php面向對象代碼（code）轉換為 js面向對象代碼（code）

? 分析步驟

? 定義Person構造函數

? 豐富Person構造函數成員（屬性和方法）

? 創建對象

? 解決問題

<script>
   //定義構造函數
   function Preson(){
   
       //使用this定義名稱屬性
       this.name='郭美美';
       //使用this定義年齡屬性
       this.age = 28;
       console.log(type);
       
   }
   //2.創建對象
   peObj = new Preson();
 
   console.log(peObj);
   
</script>

︴思考：如果給構造函數傳遞參數

答：仿普通方法傳參

︴思考： js中this含義，如何使用？

1）BOM中，代表window對象

證明

2）在事件中，代表元素/節點對象

證明.

3）在函數/方法里邊代表調用該函數/方法的當前對象

證明.

4）在面向對象封裝概念中【★】

? 通過this來聲明類的公有屬性

? 通過var來聲明類的私有屬性

證明.

四、構造函數成員管理

1、成員屬性

var 變量名 = 值; //添加私有成員

this.變量名 = 值; //添加公有成員

2、成員方法

var 方法名 = function() {} //添加私有方法成員

this.方法名 = function() {} //添加公有方法成員

︴練習

定義人構造函數，設置姓名屬性和eat方法并創建對象輸出和調用

︴思考：如果是上述代碼是name是私有屬性，外面如何輸出

答：明確，外面不能直接輸出

解決：通過內部方法調用私有屬性

︴思考：如果給對象添加屬性和方法？是否會影響構造函數？

答：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<script type="text/javascript">
//定義人構造函數，設置姓名屬性和eat方法 并 創建對象輸出和調用
function Person() {
 //定義姓名屬性
 this.name = '張三';
 this.getName = function() {
   console.log(name);
 }
 //定義eat方法
 this.eat = function() {
   alert('吃飯日語');
 }
}
//創建對象
var obj = new Person();
console.log(obj);
//輸出obj對象里的name屬性
console.log(obj.name); //張三
//修改obj的name屬性
obj.name = '趙四';
console.log(obj.name);
//創建對象2
var obj1 = new Person();
console.log(obj1.name);
</script>
</body>
</html>

︴練習1：刪除對象屬性

語法：delete 對象.屬性

︴練習2：遍歷對象成員

1）語法

for (變量名 in 對象) {

}

腳下留心：變量名指的是對象的鍵

2）使用

五、獲取構造器（constructor）

1、說明：

通過指定構造函數創建對象，那么我們稱該對象的構造函數名稱為構造器

function Fn() {}

var obj = new Fn(); obj對象構造器是：fn

function Fun2() {}

var obj = new Fun2(); obj對象構造器是：Fun2

2、語法

獲取對象構造器：對象.constructor

返回對象的類型：typeof 變量名或者 typeof(變量名)

判斷對象是否是指定構造函數的實例：對象 instanceof 構造器

3、練習

果有人說開發Web系統，從來沒用到過HTML標簽中的表單標簽的話，那他或她，肯定不是在逗你玩，而是他們開發的是靜態頁面。如果是動態內容的話，表單標簽是必須用到的，畢竟它們是標簽界的杠把子，表單是一個包含表單元素的區域。

表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。

6.1 登錄窗口

細細想來，現在上什么平臺，好像都要登錄之后，才可以完成相關的業務操作。上電商平臺購物，登錄之后才可以付款，付款了才有貨收；上自媒體平臺，只有登錄之后，才可以發文章，發視頻。既然登錄這么常用，那我就HTML實現一下。

<form>標簽用于創建供用戶輸入的HTML表單，它的action屬性綁定后端的業務處理方法(URL);method方法可選get或post。

<input>標簽規定了用戶可以在其中輸入數據的輸入字段，type指定輸入類型，text為文本，password為密碼，可指定的類型還有好多種。name屬性指定input的名稱，而你輸入的值，會被賦給value屬性。

<button>按鈕標簽，常用的類型的有提交用戶輸入內容的submit，有重置清空表單的reset。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登錄之后更美</title>
</head>
<body>
<form action="login">
    賬號：<input type="text" name="account"/><br/>
    密碼：<input type="password" name="pwd"/><br/><br/>
    <button type="submit">
        登錄
    </button>
    <button type="reset">
        重置
    </button>
</form>
</body>
</html>

輸出結果

6.2 個人信息

好多平臺，為了給你推薦個性化的需求，會有一個頁面讓你填寫個人信息，內容常常會有你的愛好、性別、生日什么的。如果你不填寫，不友好的平臺就不給你跳過。如果遇到這種平臺，我一般就直接跳過，不再用，畢竟有些信息是個人隱私，比如老陳搞了10多年IT。

radio單選按鈕，屬性name的值相同時，多選一，否則都可以選擇；

checkbox復習框：可以勾選多個。常用在興趣等多個類型選擇中；

select下拉列表框：在多個預設選項中，選擇其中一個；

textarea多行輸入框：輸入的內容較多時，就用它。rows屬性指定行數，cols指定列數。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>亮出你的美</title>
</head>
<body>
個人信息登記 <br/> <br/>
<form action="infoSubmit">
    姓名：<input type="text" name="name"/><br/>
    性別：<input type="radio" name="gender" value="male"/>男
    <input type="radio" name="gender" value="female"/>女<br/>
    興趣：<input type="checkbox" name="p" value="p"/>編程
    <input type="checkbox" name="k" value="k"/>看書
    <input type="checkbox" name="c" value="c"/>看電影
    <input type="checkbox" name="l" value="l"/>看美女
    <br/>
    愛好：
    <select name="love">
        <option value="x">下象棋</option>
        <option value="j">下軍旗</option>
        <option value="t">下跳棋</option>
        <option value="w">下圍棋</option>
    </select>
    <br/><br/>
    <textarea rows="10" cols="35">個人簡介</textarea><br/><br/>
    <button type="submit">
        提交
    </button>
    <button type="reset">
        重置
    </button>
</form>
</body>
</html>

輸出結果

好了，有關html表單的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##程序員##HTML5##表單##數據#

在線咨詢

上一篇：掌握 onmouseover 事件：打造動態 HTML 體驗
下一篇：3月瀏覽器排行榜出爐，Edge排名第4，QQ瀏覽器排名第8！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「測試開發全棧-HTML」(20) 表單元素業務整合示例(上)

習大綱

一、事件對象【★】

1、概述

2、獲取事件對象

3、事件對象的作用

1）判斷是否回車表單提交

2）阻止瀏覽器默認動作

3）事件對象中記錄的鼠標位置

4）阻止事件流

面向對象OOP

一、概念

二、JavaScript中“類”的種類

1、系統類

2、自定義類 （構造函數）

三、通過構造函數創建對象

1、 通過構造函數創建對象

四、構造函數成員管理

1、成員屬性

2、成員方法

五、 獲取構造器（constructor）

1、說明：

2、語法

3、練習

6.1 登錄窗口

6.2 個人信息

您的項目需求

2、自定義類（構造函數）

1、通過構造函數創建對象

五、獲取構造器（constructor）